:root {
      --accent: #ffef80;
      --light: #fff;
      --dark: #000;
      --mute: #ccc;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      line-height: 1.55;
    }

    button,
    input,
    select,
    textarea {
      font-family: inherit;
    }

    body:has(dialog[open]) {
      overflow: hidden;
    }

    .heading {
      position: absolute;
      left: 1.25rem;
      right: 1.25rem;
      top: 1rem;
      display: flex;
      justify-content: space-between;
    }

    .heading a {
      text-decoration: none;
    }

    .brand {
      font-weight: 800;
    }

    #nav-languages a {
      font-weight: normal;
    }

    #nav-languages a.active {
      font-weight: 800;
    }

    section {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0 0 3rem 0;
    }

    section .container {
      width: clamp(330px, 70vw, 980px);
    }

    #intro {
      background-image: url("/assets/blob-intro.svg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 75% 75%;
    }

    #intro .logo {
      width: clamp(180px, 28vw, 360px);
      height: auto;
      display: block;
      margin: 0 auto;
    }

    #about {
      background-image: url("/assets/blob-about.svg");
      background-position: -25% center;
      background-repeat: no-repeat;
      background-size: 75% 75%;
    }

    #prex {
      background-image: url("/assets/blob-prex.svg");
      background-position: right center;
      background-repeat: no-repeat;
      background-size: 75% 75%;
    }

    #skills {
      background-image: url("/assets/blob-skills.svg");
      background-position: right 70%;
      background-repeat: no-repeat;
      background-size: 65% 65%;
    }

    #openTestimonialsButton {
      grid-area: tbtn;
    }

    #cta {
      background-image: url("/assets/blob-cta.svg");
      background-position: left center;
      background-repeat: no-repeat;
      background-size: 65% 65%;
    }

    #footer {
      text-align: center;
    }

    #footer .container {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    #footer details summary {
      text-decoration: underline;
      text-underline-offset: 2px;
      text-decoration-thickness: 2px;
      font-weight: bold;
    }

    #footer details div {
      font-size: smaller;
    }

    h1 {
      font-size: clamp(2rem, 4vw, 3rem);
      text-align: center;
    }

    h2 {
      font-size: clamp(1.5rem, 3vw, 2.25rem);
    }

    a {
      color: inherit;
      text-decoration-thickness: 2px;
      text-underline-offset: 2px;
    }

    button,
    a.button {
      border: 2px solid var(--dark);
      border-radius: 1rem;
      padding: 1rem;
      font-size: inherit;
      font-weight: bold;
      line-height: 1.55;
      text-decoration: none;
      background: var(--light);
      text-align: center;
      cursor: pointer;
    }

    button img {
      padding: 2rem;
      max-width: 40vw;
    }

    .mini-socials a {
      display: inline-block;
      border: 2px solid var(--dark);
      border-radius: 1rem;
      padding: 0.25rem 1rem 0.35rem 1rem;
      font-size: small;
      font-weight: 600;
      line-height: normal;
      text-decoration: none;
      background: var(--light);
      text-align: center;
      cursor: pointer;
      min-width: 15ch;
    }

    .grid-lr {
      display: grid;
      column-gap: 4rem;
      grid-template-columns: 6.5fr 3.5fr;
      grid-template-areas:
        "content actions"
      ;
    }

    .grid-rl {
      display: grid;
      column-gap: 4rem;
      grid-template-columns: 3.5fr 6.5fr;
      grid-template-areas:
        "actions content"
      ;
    }

    .container .content {
      grid-area: content;
    }

    .container .actions {
      grid-area: actions;
    }

    .content>p {
      margin-top: 0;
    }

    #nav-sections {
      position: fixed;
      right: 1rem;
      top: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      gap: .75rem;
      justify-content: center;
    }

    #nav-sections a {
      width: .75rem;
      height: .75rem;
      border-radius: 50%;
      background-color: var(--mute);
      display: block;
      text-decoration: none;
      border: 2px solid var(--mute);
    }

    #nav-sections a.active {
      background-color: var(--accent);
      border: 2px solid var(--dark);
    }

    .intro-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 1.25rem;
      justify-content: center;
    }

    .skills-actions {
      width: clamp(330px, 70vw, 80%);
      margin: 0 auto;
      padding-top: 2rem;
      display: grid;
      gap: 1rem;
      grid-template-columns: 1fr 4fr 1fr;
      grid-template-areas:
        "left content right"
        "tbtn tbtn tbtn"
      ;
    }

    .cta-actions {
      width: clamp(330px, 70vw, 80%);
      margin: 0 auto;
      padding-top: 2rem;
      display: grid;
      gap: 1rem;
      grid-template-columns: 1fr 1fr;
    }

    #openSkillDialogButton {
      padding: 0.2rem;
    }

    .inverted {
      color: var(--light);
      background: var(--dark) !important;
    }

    .muted {
      color: var(--mute);
    }

    dialog {
      width: clamp(330px, 70vw, 980px);
      max-height: 70vh;
      border-radius: 2em;
    }

    dialog[open] {
      display: flex;
      flex-direction: column;
    }

    .dialog-header {
      position: relative;
      border-bottom: 2px solid var(--dark);
    }

    .dialog-header h3 {
      margin: 0 3rem 0.75rem 0;
    }

    .dialog-header button.close-dialog {
      position: absolute;
      top: -0.15rem;
      right: 0;
      height: 2rem;
      width: 2rem;
      border-radius: 0.5rem;
      padding: 0.5rem;
      font-size: small;
      font-weight: bold;
      line-height: 1;
      color: var(--light);
      background: var(--dark);
      text-align: center;
      cursor: pointer;
    }

    .dialog-content {
      overflow-y: auto;
    }

    .unscramble-actions button {
      border: 2px solid var(--dark);
      border-radius: 1rem;
      padding: 0.5rem;
      font-size: inherit;
      font-weight: inherit;
      line-height: 1.55;
      text-decoration: none;
      background: var(--light);
      text-align: center;
      cursor: pointer;
    }

    #matchPrinciples {
      display: grid;
      gap: 3rem;
      grid-template-columns: 1fr 1fr;
    }

    #matchPrinciples button {
      padding: 0.5rem;
      font-size: small;
      font-weight: normal;
      display: block;
      width: 100%;
      text-align: left;
      margin: 0.5rem 0;
    }

    #matchPrinciples button.selected {
      background-color: var(--mute);
    }

    #matchPrinciples button.matched {
      background-color: var(--accent);
    }

    #matchPrinciples button:disabled {
      opacity: 1;
      color: var(--dark);
      cursor: default;
    }


    @keyframes shake {

      0%,
      100% {
        transform: translateX(0);
      }

      25% {
        transform: translateX(-4px);
      }

      75% {
        transform: translateX(4px);
      }
    }

    .shake {
      animation: shake .28s linear;
    }


    #unscrambleGameDialog input {
      border: 2px solid var(--dark);
      border-radius: 1rem;
      padding: 0.5rem;
      font-size: inherit;
      font-weight: inherit;
      line-height: 1.55;
      background: var(--light);
      display: block;
      width: 100%;
      margin: 1rem 0;
    }

    #reframeCards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1rem;
      overflow-y: auto;
      margin-top: 1rem;
    }

    .reframe-card {
      min-height: 4.3rem;
      font-size: inherit;
      font-weight: normal;
      padding: 0.5rem;
    }

    .reframe-card.flipped {
      background-color: var(--accent);
    }

    .skills-tools button,
    .skills-tools span {
      border: 2px solid var(--dark);
      border-radius: 1rem;
      padding: 0.5rem;
      font-size: inherit;
      font-weight: inherit;
      line-height: 1.55;
      text-decoration: none;
      background: var(--light);
      text-align: center;
      cursor: pointer;
      margin: 0.2rem 0;
    }

    .skills-tools span {
      display: inline-block;
      width: 5ch;
    }

    .skills-tools span.highlight {
      background-color: var(--accent);
    }

    .skills-tools.active span {
      background-color: var(--accent);
    }

    #testimonialsDialog blockquote {
      position: relative;
      font-style: italic;
      font-size: smaller;
      margin: 1rem 0.5rem 1rem 1rem;
    }

    #testimonialsDialog blockquote::before {
      content: '“';
      position: absolute;
      top: -0.25rem;
      left: -1.25rem;
      font-size: 3rem;
      font-family: Arial, Helvetica, sans-serif;
      color: rgba(0, 0, 0, 0.25);
      line-height: 1;
    }

    @media (max-width: 768px) {
      dialog {
        width: 90vw;
        max-height: 95vh;
      }

      button img {
        padding: 0;
      }

      .grid-rl,
      .grid-lr {
        row-gap: 2rem;
        grid-template-columns: 1fr;
        grid-template-areas:
          "content"
          "actions"
        ;
      }

      .cta-actions {
        grid-template-columns: 1fr;
      }

      #matchPrinciples {
        gap: 1rem;
        grid-template-columns: 1fr;
      }

      #nav-sections {
        right: 0.2rem;
      }

      .intro-actions {
        flex-direction: column;
        align-items: stretch
      }

      #intro {
        background-size: 90%;
      }

      #about {
        background-position: center 10%;
        background-size: 90%;
      }

      #prex {
        background-position: center top;
        background-size: 85%;
      }

      #skills {
        background-position: center 30%;
        background-size: 90%;
      }

      #cta {
        background-position: center 40%;
        background-size: 90%;
      }
    }