:root {
  --b1: #ff69b4;
  --b2: red;
  --b3: orange;
  --b4: gold;
  --b5: green;
  --b6: rgb(76, 218, 218);
  --b7: blue;
  --b8: purple;
  --b9: #e13ae1;
  --b10: brown;
  --contrasting-text-color: black;
  --font-fudge-factor: 2.5;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
dd,
dl,
dt,
p,
article,
h1,
h2,
h3,
h4,
footer,
header {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

html {
  background: black;
  body {
    font-family: "Domine", Tahoma, serif;
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-width: 67dvh;
    font-size: min(
      calc(var(--font-fudge-factor) * 1dvw),
      calc(var(--font-fudge-factor) * 0.67dvh)
    );
    margin: 0 auto;
    background: black;

    header {
      font-size: 1.35em;
      height: 5em;
      line-height: 5em;
      user-select: none;
      background: transparent;
      position: sticky;
      top: 0;
      z-index: 1;
      font-family: "Montserrat", sans-serif;
      text-align: center;
      text-transform: uppercase;
      color: white;
      background: black url("ui/bug.svg") no-repeat 0.75em 50% / 3em 3em;

      display: flex;
      align-items: center;
      justify-content: center;
      #qr-btn {
        position: absolute;
        right: 0.75rem;
        background: url("ui/qr.jpeg") center / 4em 4em no-repeat;
        border: none;
        padding: 0;
        cursor: pointer;
        width: 4em;
        height: 4em;
      }
    }
    #qr-popover {
      border: none;
      padding: 2rem;
      background: transparent;
      img {
        display: block;
        width: min(80dvw, 80dvh);
        height: auto;
      }
      &::backdrop {
        background: rgba(0, 0, 0, 0.66);
      }
    }
    main {
      flex: 1;
      overflow-y: auto;
      position: relative;
      dl {
        .accordion-toggle {
          display: none;
        }
        dt:has(.accordion-toggle:checked) + dd {
          display: block;
        }
        dt {
          font-size: 1.6em;
          height: 4em;
          line-height: 4em;

          user-select: none;
          -webkit-tap-highlight-color: transparent;
          position: sticky;
          top: 0;
          z-index: 1;
          color: white;
          background: black url("ui/arrow_forward_white.svg") no-repeat 0 50% /
            4dvh 4dvh;

          label {
            display: block;
            cursor: pointer;
            h2 {
              font-family: "Montserrat", sans-serif;
              text-transform: uppercase;
              padding-left: 4dvh;
            }
          }

          &:nth-of-type(1) {
            background-color: var(--b1);
          }
          &:nth-of-type(2) {
            background-color: var(--b2);
          }
          &:nth-of-type(3) {
            background-color: var(--b3);
          }
          &:nth-of-type(4) {
            background-color: var(--b4);
            color: var(--contrasting-text-color);
            background-image: url("ui/arrow_forward_black.svg");
            --arrow-checked: url("ui/arrow_downward_black.svg");
          }
          &:nth-of-type(5) {
            background-color: var(--b5);
          }
          &:nth-of-type(6) {
            background-color: var(--b6);
            color: var(--contrasting-text-color);
            background-image: url("ui/arrow_forward_black.svg");
            --arrow-checked: url("ui/arrow_downward_black.svg");
          }
          &:nth-of-type(7) {
            background-color: var(--b7);
          }
          &:nth-of-type(8) {
            background-color: var(--b8);
          }
          &:nth-of-type(9) {
            background-color: var(--b9);
          }
          &:nth-of-type(10) {
            background-color: var(--b10);
          }

          &:has(.accordion-toggle:checked) {
            background-image: var(
              --arrow-checked,
              url("ui/arrow_downward_white.svg")
            );
          }
        }

        dd {
          /* Domine wants to be quite a bit bigger than Montserrat */
          font-size: 2.2em;
          line-height: 1.5em;
          display: none;
          background: #fff;
          padding: 2dvh 2dvh 1dvh;

          h3,
          p {
            margin-bottom: 1.5vh;
          }
          img {
            width: 100%;
          }
          a.button {
            display: block;
            width: 100%;
            color: white;
            text-align: center;
            text-decoration: none;
            padding: 0.5em 0;
            background: darkblue url("ui/arrow_outward_white.svg") 0.5em 50% /
              1.2em 1.2em no-repeat;
            &.phone {
              background-color: green;
              background-image: url("ui/phone_white.svg");
            }
            &.mail {
              background-color: coral;
              background-image: url("ui/mail_white.svg");
            }
            &.map {
              background-color: darkred;
              background-image: url("ui/map_white.svg");
            }
          }
        }
      }
    }
    footer {
      color: white;
      text-align: center;
      padding: 3dvh;
      font-size: 2em;
    }
  }
}

/* 
  horrible hack to prevent Liquid Glass from coloring the bottom chrome
*/

.glassy {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  height: 5px;
  z-index: 8675309;
}