:root {
  --wp--preset--color--custom-color-1: #7400b8;
  --wp--preset--color--custom-color-2: #72efdd;
  --wp--preset--color--custom-color-3: #4ea8de;
  --wp--preset--color--custom-color-4: #f72585;
  --wp--preset--color--custom-color-5: #f72585;
  --wp--preset--color--custom-color-6: #f1ea39;
  --wp--preset--color--custom-color-7: #5e60ce;
  --wp--preset--color--base: #ffffff;
  --wp--preset--color--contrast: #000000;
  --wp--preset--color--primary: #72efdd;
  --wp--preset--color--secondary: #f72585;
  --wp--preset--color--tertiary: #F6F6F6;

  --brandColor: #F72585;
  --neonText: #F72585;
  --neonBox: #4EA8DE;
  --syng-blue: #4EA8DE;
  --syng-green: #72EFDD;
  --syng-pink: #F72585;
  --syng-purple: #7400B8;
  --syng-violet: #5E60CE;
  --syng-yellow: #F1EA39;
  --sim-height: 540px;
  --syng-header-height: 80px;

  --content-width: 100vw;
  --content-width-sm: 90vw;
}

@media screen and (min-width: 967px) {
  :root {
    --content-width: 960px;
    --content-width-sm: 720px;
  }
}

@media screen and (min-width: 1400px) {
  :root {
    --content-width: 1200px;
    --content-width-sm: 720px;
  }
}

* {
  box-sizing: border-box;
}

body {
  font-family: "Titillium Web", sans-serif;
  font-size: clamp(1.125rem, 1.125rem + ((1vw - 0.2rem) * 0.392), 1.2rem);
}

html, body {
  padding: 0;
  margin: 0;
}

hr.syng-contrast-separator {
  border-top: 5px solid white;
  border-bottom: 10px solid black;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Glegoo", sans-serif;
  font-weight: 700;
}

h1, h2 {
  font-size: clamp(1.624rem, 1.624rem + ((1vw - 0.2rem) * 2.047), 2.75rem);
  line-height: 1.4;
}

img {
  max-width: 100%;
}

.syng-keyword-mark {
  background: none;
  color: var(--wp--preset--color--custom-color-4);
}

.syng-operator-mark {
  color: var(--wp--preset--color--custom-color-1);
}

.m0 {
  margin-block: 0;
}

.ms0 {
  margin-block-start: 0;
}
.me0 {
  margin-block-end: 0;
}

img {
  max-width: 100%;
}

a {
  color: var(--brandColor);
}

header {
  padding-block: 1rem;

  a {
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }
}

header, footer {
  background: var(--wp--preset--color--contrast);

  &, a {
    color: var(--wp--preset--color--base);
  }
}

footer {
  padding-inline: 1rem;
  padding-block: 3rem;

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .syng-social-link {
    background: white;
    color: black;
    border-radius: 50%;

    &, a {
      display: inline-flex;
    }

    a {
      padding: 0.25rem;
    }
  }
}

.screenreader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.syng-section {
  display: flex;
  flex-direction: column;
}

.syng-section--contrast {
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
}

.syng-content-box {
  width: var(--content-width);
  align-self: center;
  padding-inline: 1rem;
}

.syng-content-box--sm {
  width: var(--content-width-sm);
}

.lg-visible {
  display: none;
}

.justify-items-center {
  justify-items: center;
}

@media screen and (min-width: 960px) {
  .lg-indent {
    margin-inline-start: 4rem;
  }

  .lg-visible {
    display: initial;
  }

  .lg-justify-items-start {
    justify-items: start;
  }

  .lg-justify-self-center {
    justify-self: center;
  }

  .lg-justify-self-end {
    justify-self: end;
  }
}

@media screen and (min-width: 960px) {
  .syng-content-box, .syng-content-box--sm {
    padding-inline: 0;
  }
}

button.syng-button {
  cursor: pointer;
  appearance: unset;
  font-size: inherit;
  font-family: inherit;
}

.syng-button {
  text-transform: uppercase;
  box-shadow: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);
  text-decoration: none;
  font-weight: 700;

  width: fit-content;

  letter-spacing: 2px;
  padding-top: 0.667em;
  padding-right: 1.33em;
  padding-bottom: 0.667em;
  padding-left: 1.33em;

  background: transparent none;
  border-color: currentColor;
  border-width: 2px;
  border-style: solid;

  white-space: nowrap;

  background-color: var(--bg);
  color: var(--fg);

}

.syng-button--filled {
  --fg: var(--wp--preset--color--base);
  --bg: var(--wp--preset--color--custom-color-4);
  border-color: var(--bg);

  &:hover {
    color: var(--bg);
    background-color: var(--fg);
  }
}

.syng-button--outline {
  --bg: var(--wp--preset--color--base);
  --fg: var(--wp--preset--color--contrast);


  &:hover {
    color: var(--bg);
    background-color: var(--fg);
  }
}
/*
.syng-augment-table {
  thead {
    position: relative;
    border-bottom: unset;
    background: var(--brandColor);
  }

  th {
    color: white;
    border: none;
    padding: 1rem;
    text-align: left;

    &:nth-of-type(2) {
      background: rgba(0,0,0,0.2);
    }

    &:nth-of-type(3) {
      background: rgba(0,0,0,0.3);
    }
  }

  td {
    &:nth-of-type(3) {
      background: rgba(0,0,0,0.04);
    }
  }
} */


.syng-toolkit-table {
  font-size: 1rem;

  overflow: visible;
  box-shadow: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);

  border-collapse: collapse;
  width: 100%;
}

.syng-toolkit-table thead {
  position: relative;
  border-bottom: unset;
  background: var(--brandColor); /* for safari backwards compat */
}

.syng-toolkit-table thead:before {
  content: ' ';
  position: absolute;
  top: 0;
  left: -1px;
  right: -1px;
  bottom: 0;
  background: var(--brandColor);
  z-index: -1;
  box-shadow: 0 3px 4px 0 rgba(0,0,0,0.2);
}

.syng-toolkit-table th {
  color: white;
  border: none;
  padding: 1rem;
  text-align: left;
}

.syng-toolkit-table td:nth-of-type(1),
.syng-toolkit-table th:nth-of-type(1) {
  word-break: initial;
  white-space: initial;
}

.syng-toolkit-table tbody td:nth-of-type(1) {
  border-left: none;
}

.syng-toolkit-table tbody tr:nth-of-type(even) {
  background: #F6F6F6;
  box-shadow: 0 -1px 1px rgba(0,0,0,0.1) inset, 0 0 1px 0 white inset;
}

.syng-toolkit-table tbody td {
  border: none;
  padding: 1rem;
  vertical-align: top;
}

.syng-toolkit-table td:nth-of-type(2) {
  background: rgba(0,0,0,0.02);
}
.syng-toolkit-table td:nth-of-type(3) {
  background: rgba(0,0,0,0.04);
}

.syng-toolkit-table th:nth-of-type(2) {
  background: rgba(0,0,0,0.2);
}
.syng-toolkit-table th:nth-of-type(3) {
  background: rgba(0,0,0,0.4);
}

syng-switch {
  display: flex;
  flex-direction: column-reverse;
}

syng-switch .syng-switch-pagination {
  height: 3rem;
}

syng-switch [slot="slides"] {
  flex-grow: 1;
}

syng-simulation .egs-row-view td {
  position: relative;
}

syng-simulation .egs-column-view .egs-source.egs-nm .egs-source-code {
  box-shadow: 3px 0 0 0px #F72585 inset;
}

syng-simulation-controls {
  zoom: 1.5;
}

#syng-splash {
  background: black;
  flex-grow: 1;
  padding-inline: 0.5rem;
  max-width: 620px;

  syng-switch {
    min-height: var(--sim-height);
  }
}

.syng-section--contrast {
  syng-simulation {
    color: white;
  }

  syng-switch .syng-switch-pagination {
    height: 4rem;
    align-items: center;
  }

  syng-switch .syng-switch-pagination button .progressFrame {
    background: rgba(255,255,255,0.3);
    border-radius: 5px;
  }

  syng-switch .syng-switch-pagination button .progressElapsed {
    background: white;
    border-radius: inherit;
  }

  syng-simulation svg {
    fill: white;
  }

  syng-simulation syng-simulation-controls button:hover svg {
    fill: var(--brandColor);
  }

  syng-simulation .egs-typewriter {
    box-shadow: none;
  }

  syng-simulation .egs-highlight {
    background: white;
    color: initial;
  }

  syng-switch syng-simulation-controls {
    position: absolute;
    bottom: 0;
  }

  syng-switch [slot=slides] {
    display: flex;
  }
  syng-switch .syng-switch-slide {
    flex-grow: 1;
  }

  syng-switch .syng-switch-pagination button.active .progressElapsed {
    background: var(--brandColor);
  }
}

#syng-splash syng-switch {
  /* align it with the aug inset */
/*    padding-top: calc(var(--sim-padding-top) - 3rem);*/

  padding-top: 15%;
  padding-left: 5rem;
  padding-right: 3rem;
  padding-bottom: 0;

  border-inline: 5px solid white;

  flex-grow: 1;

  /* fuse the pagination with the top edge of the hero */
  /* margin-bottom: -1.1rem; */

  /* make it span the entire screen's height */
  min-height: max(var(--sim-height), calc(100vh - var(--syng-header-height) - 6.5rem));
}

#syng-splash syng-switch .syng-switch-slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}