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

html.aero, div.aero-icon {
  --transwhite: rgba(163, 239, 254, 0.05);
  --transblack: rgba(62, 92, 114, 0.2);
  --outlinecolor: rgba(255,255,255,0.6);
  --bordercolor: #4a4a4a;
  --borderwidth: 1px;
  --aeroside: 0.35rem;
  --aerotop: 1.75rem;
  --innerpadding: 1rem;
}

html.aero {
  background-image: url(../img/train-768.jpg);
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  padding: 1px; /* nominal to prevent margin collapse */
  position: relative;
  
  body {
    font-family: 'Selawik', sans-serif;
    font-size: 0.85rem;
    margin: 0;
  }

  .hidden {
    visibility: hidden;
  }
  
  button.change-theme {
    all: unset;
    width: 4.75rem;
    height: 4.375rem;
    position: absolute;
    top: 0.3125rem;
    left: 0;
    margin: 0;
    color: white;
    font-size: 0.8rem;
    font-family: 'Selawik', sans-serif;
    cursor: pointer;
    text-shadow:
      0 0.0625rem 0.125rem black,
      0 0.0625rem 0.125rem black,
      0 0.0625rem 0.125rem black,
      0 0.0625rem 0.125rem black,
      0 0.0625rem 0.125rem black,
      0 0.0625rem 0.125rem black,
      0 0.0625rem 0.125rem black,
      0 0.0625rem 0.125rem black,
      0 0.0625rem 0.125rem black,
      0 0.0625rem 0.125rem black,
      0 0.0625rem 0.125rem black,
      0 0.0625rem 0.125rem black,
      0 0.0625rem 0.125rem black,
      0 0 0.25rem black;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    border-radius: 2px;
    outline: 1px solid transparent;
    border: 1px solid transparent;
    
    &:hover:not(:focus) {
      background-color: rgba(196, 220, 242, 0.6);
      border: 1px solid rgba(165, 234, 255, 0.5);
      outline: 1px solid rgba(196, 220, 242, 1);
    }
    
    &:focus {
      background-color: rgba(196, 220, 242, 0.9);
      border: 1px solid rgba(165, 234, 255, 0.5);
      outline: 1px solid rgba(196, 220, 242, 1);
      user-select: none;
    }
    
    &:before {
      content: '🖌️';
      font-size: 2rem;
      text-shadow: none;
    }

    &:focus:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: var(--borderwidth) dotted var(--bordercolor);
      border-radius: 2px;
    }
  }

  section {
    margin-left: auto;
    margin-right: auto;
    max-width: calc(100% - 1rem);
    background-image:
      linear-gradient(-45deg,
        transparent 60%,
        rgba(255, 255, 255, 0.2) 80%
      ),
      linear-gradient(60deg,
        var(--transwhite) 30%,
        var(--transblack) 32%,
        var(--transblack) 60%,
        var(--transwhite) 62%,
        var(--transwhite) 80%,
        var(--transblack) 82%
      ), 
      linear-gradient(
        rgba(0,0,0,0) 0%,
        rgba(255,255,255,0.8) 35%,
        var(--transblack) 36%,
        rgba(0,0,0,0) 100%
      );
    backdrop-filter: blur(3px);
    border-radius: var(--aeroside);
    outline: var(--borderwidth) solid var(--bordercolor);
    border: var(--borderwidth) solid var(--outlinecolor);
    padding: var(--aerotop) var(--aeroside) var(--aeroside);
    position: relative;
    overflow: visible;
    box-shadow: 0 0 1rem, 0 0 0.25rem;

    --close-button-width: 3rem;    
    .aero-close-button {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      cursor: pointer;
      position: absolute;
      top: 0;
      right: var(--aeroside);
      width: var(--close-button-width);
      text-align: center;
      height: 1.15rem;
      line-height: 0.66rem;
      background:
        radial-gradient(
          rgba(242, 152, 124, 0.4),
          rgba(255,255,255,0.1) 80%
        ),
        linear-gradient(
          rgba(255, 255, 255, 0.5) 0%,
          rgba(0, 0, 0, 0.15) 50%
          /* rgba(125, 0, 0, 0.5) 50%,
          rgba(180, 11, 11, 0.3) 100% */
        ),
        linear-gradient(
          rgba(255,255,255,0.1) 0%,
          rgba(255, 255, 255, 0.1) 60%,
          rgba(255, 177, 125, 0.9) 95%
        ),
        #d42916;
      box-shadow:
        inset 0 -1px 0 rgba(255, 177, 125, 0.9),
        inset -1px 0 0 rgba(255, 177, 125, 0.9),
        inset  1px 0 0 rgba(255, 177, 125, 0.9);
      border: var(--borderwidth) solid var(--bordercolor);
      border-top: 0;
      outline: var(--borderwidth) solid var(--outlinecolor);
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      color: rgb(232, 244, 253);
      font-weight: bold;
      font-family: 'Selawik', sans-serif;
      font-size: 1.05rem;
      text-decoration: none;
      --stroke-color: rgb(55, 55, 55);
      -webkit-text-stroke: 0.08rem var(--stroke-color);
      paint-order: stroke fill;
      z-index: 3;

      &:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 50%;
        bottom: 0;
        left: 0;
        background: linear-gradient(
           rgba(101, 0, 20, 0.391),
           rgba(0,0,0,0.1)
        );
        z-index: -1;
      }

      &:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 1px;
        top: -1px;
        left: 0;
        background: white;
      }

      &:hover, &:focus {
        --orangeouter: rgb(255, 128, 93);
        box-shadow:
          inset 0 -1px 0 rgba(255, 177, 125, 0.9),
          inset -1px 0 0 rgba(255, 177, 125, 0.9),
          inset  1px 0 0 rgba(255, 177, 125, 0.9),
          0 0 0.1rem rgba(255,255,255,0.5),
          0 0 0.5rem var(--orangeouter),
          0 0 1rem var(--orangeouter),
          0 0 1rem var(--orangeouter);

        &:before {
          background: linear-gradient(
            rgba(0,0,0,0.1),
            rgba(0,0,0,0)
          );
        }

        background:
          radial-gradient(
            rgba(242, 152, 124, 0.5),
            rgba(255,255,255,0.1) 80%
          ),
          linear-gradient(
            rgba(255,255,255,0.42) 0%,
            rgba(116, 21, 0, 0.15) 50%,
            rgba(125, 31, 0, 0.5) 50%,
            rgba(180, 59, 11, 0.3) 100%
          ),
          linear-gradient(
            rgba(255,255,255,0.2) 0%,
            rgba(255,255,255,0.2) 60%,
            rgba(255, 190, 147, 0.9) 95%
          ),
          #cf3737;
      }
    }

    /* white backdrop for content */
    &:after {
      content: '';
      position: absolute;
      top: var(--aerotop);
      left: var(--aeroside);
      width: calc(100% - (var(--aeroside) * 2));
      height: calc(100% - var(--aeroside) - var(--aerotop));
      z-index: 0;
      background: white;
      border-radius: 2px;
      border: var(--borderwidth) solid var(--bordercolor);
      outline: var(--borderwidth) solid var(--outlinecolor);
    }

    &.intro {
      width: 32rem;
      margin-top: 10rem;
      margin-bottom: 10rem;
      position: relative;
      right: 2rem;
    }

    &.sponsors {
      --button-padding: 0.5rem;
      width: calc((88px * 4) + (var(--button-padding) * 3) + ((var(--aeroside) + var(--borderwidth) + var(--innerpadding)) * 2));
      margin-bottom: 2rem;
      position: relative;
      left: 3rem;

      p.buttons {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: var(--button-padding);
      }

      img {
        image-rendering: pixelated;
      }
    }

    &[data-moving] {
      user-select: none;
    }

    h1 {
      font-size: 1.2rem;
      font-weight: 300;
      font-family: 'Selawik Semilight', 'Selawik', sans-serif;
      color: #039;
      margin-top: var(--innerpadding);
      margin-bottom: var(--innerpadding);
    }

    h2 {
      cursor: pointer;
      margin: 0;
      line-height: var(--aerotop);
      height: var(--aerotop);
      margin-top: calc(-1 * var(--aerotop));
      padding-left: 0.1rem;
      font-size: 0.9rem;
      font-weight: normal;
      --shadow-color: rgba(220, 220, 220, 0.9);
      text-shadow:
        0 0 2px var(--shadow-color),
        0 0 4px var(--shadow-color),
        0 0 4px var(--shadow-color),
        0 0 5px var(--shadow-color);
      font-family: 'Selawik', sans-serif;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      width: calc(100% - var(--close-button-width) - var(--aeroside));
    }

    > * {
      position: relative;
      z-index: 2;
    }

    > *:not(h2, .aero-close-button) {
      margin-left: var(--innerpadding);
      margin-right: var(--innerpadding);
    }

    p {
      margin-top: var(--innerpadding);
      margin-bottom: var(--innerpadding);
      line-height: 1.2;
    }

    p.fun-fact-container {
      min-height: 2.6em; /* NOT rem, scales with font size */
    }

    > .links {
      margin-bottom: var(--borderwidth);
      margin-left: var(--borderwidth);
      margin-right: var(--borderwidth);
      padding: 1.25rem 1rem;
      background: #f0f0f0;
      border-top: 1px solid rgba(0,0,0,0.15);
      display: flex;
      justify-content: flex-end;
      gap: calc(var(--innerpadding) * 0.66);
      margin-top: calc(2 * var(--innerpadding));
      list-style: none;
    }

    > .links a, button#reload-fun-fact {
      display: inline-block;
      text-decoration: none;
      color: inherit;
      font-size: 0.8rem;
      outline: var(--borderwidth) solid rgba(0,0,0,0.5);
      border: var(--borderwidth) solid #f3f3f3;
      border-radius: 3px;
      text-align: center;
      background: linear-gradient(
        #f2f2f2,
        #ebebeb 45%,
        #dddddd 45%,
        #cfcfcf
      ), #f0f0f0;
      text-shadow: 0 0 5px rgba(255,255,255,0.05);
      position: relative;

      &:hover, &:active, &:focus {
        outline: var(--borderwidth) solid #3c7fb1;
      }
      &:hover:not(:focus), &:active {
        background: linear-gradient(
          #eaf6fd,
          #d9f0fc 45%,
          #bee6fd 45%,
          #a7d9f5
        );
      }
      &:active, &:focus {
        --blue2: #41d7fc;
        box-shadow: inset 0 0 2px var(--blue2);
        border: var(--borderwidth) solid var(--blue2);
      }
      &:active:before, &:focus:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: var(--borderwidth) dotted var(--bordercolor);
        border-radius: 2px;
      }
    }

    > .links a {
      min-width: 6rem;
      height: 1.5rem;
      line-height: 1.2rem;
    }

    button#reload-fun-fact {
      height: 1rem;
      width: 1rem;
      line-height: 1rem;
      font-size: 0.7rem;
      left: 0.3rem;
      margin: 0;
      padding: 0;
      font-family: 'Noto Sans Symbols 2', sans-serif;
    }

    &.sponsors a {
      text-decoration: none;
    }
  }
  dialog[open] {
    position: fixed;
    top: 0;
    left: 0;
    min-height: 100vh;
    margin: 0;
    width: 20rem;
    max-width: calc(100vw - 2rem);
    box-sizing: border-box;
    background-color: transparent;
    background-image:
      linear-gradient(
        rgba(255,255,255,0.3),
        rgba(0,0,0,0.5),
        rgba(255,255,255,0.3) 80%
      );
    backdrop-filter: blur(3px);
    outline: var(--borderwidth) solid var(--bordercolor);
    border: var(--borderwidth) solid var(--outlinecolor);
    box-shadow: 0 0 1rem, 0 0 0.25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    z-index: 9999999999;

    &::backdrop {
      background-color: rgba(0,0,0,0.4);
      backdrop-filter: blur(6px);
    }

    &.unselectable {
      user-select: none;
    }

    h3 {
      font-weight: 300;
      font-family: 'Selawik Semilight', 'Selawik', sans-serif;
      font-size: 1.2rem;
      line-height: 1.4;
      margin: 1rem;
      color: white;
      text-shadow: 0 0.125rem 0.25rem black;
    }

    button[command="close"] {
      /* bottom margin picked to make
         everything above the form 8rem total */
      margin: 0.5rem 0.5rem 0.99rem;
      align-self: flex-end;
      background:
        radial-gradient(
          rgba(242, 152, 124, 0.4),
          rgba(255,255,255,0.1) 80%
        ),
        linear-gradient(
          rgba(255, 255, 255, 0.5) 0%,
          rgba(0, 0, 0, 0.15) 50%
        ),
        linear-gradient(
          rgba(255,255,255,0.1) 0%,
          rgba(255, 255, 255, 0.1) 60%,
          rgba(255, 177, 125, 0.9) 95%
        ),
        #d42916;
      box-shadow:
        inset 0 -1px 0 rgba(255, 177, 125, 0.9),
        inset -1px 0 0 rgba(255, 177, 125, 0.9),
        inset  1px 0 0 rgba(255, 177, 125, 0.9);
      border: var(--borderwidth) solid var(--bordercolor);
      outline: var(--borderwidth) solid var(--outlinecolor);
      border-radius: 2px;
      color: rgb(232, 244, 253);
      font-weight: bold;
      font-family: 'Selawik', sans-serif;
      font-size: 1.05rem;
      text-decoration: none;
      --stroke-color: rgb(55, 55, 55);
      -webkit-text-stroke: 0.08rem var(--stroke-color);
      paint-order: stroke fill;
      z-index: 3;
      position: relative;
      width: 2rem;
      text-align: center;
      height: 1.15rem;
      line-height: 0.75rem;
      padding: 0;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      cursor: pointer;

      &:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 50%;
        bottom: 0;
        left: 0;
        background: linear-gradient(
           rgba(101, 0, 20, 0.391),
           rgba(0,0,0,0.1)
        );
        z-index: -1;
      }

      &:hover {
        --orangeouter: rgb(255, 128, 93);
        box-shadow:
          inset 0 -1px 0 rgba(255, 177, 125, 0.9),
          inset -1px 0 0 rgba(255, 177, 125, 0.9),
          inset  1px 0 0 rgba(255, 177, 125, 0.9),
          0 0 0.1rem rgba(255,255,255,0.5),
          0 0 0.5rem var(--orangeouter),
          0 0 1rem var(--orangeouter),
          0 0 1rem var(--orangeouter);
      }
      
      &:hover, &:focus {
        &:before {
          background: linear-gradient(
            rgba(0,0,0,0.1),
            rgba(0,0,0,0)
          );
        }

        background:
          radial-gradient(
            rgba(242, 152, 124, 0.5),
            rgba(255,255,255,0.1) 80%
          ),
          linear-gradient(
            rgba(255,255,255,0.42) 0%,
            rgba(116, 21, 0, 0.15) 50%,
            rgba(125, 31, 0, 0.5) 50%,
            rgba(180, 59, 11, 0.3) 100%
          ),
          linear-gradient(
            rgba(255,255,255,0.2) 0%,
            rgba(255,255,255,0.2) 60%,
            rgba(255, 190, 147, 0.9) 95%
          ),
          #cf3737;
      }
    }

    form {
      width: 100%;
      margin: 1rem 0;
      padding: 0.5rem 0;
      background: rgba(255,255,255,0.25);
      outline: var(--borderwidth) solid var(--bordercolor);
      border: var(--borderwidth) solid var(--outlinecolor);
      border-left: 0;
      border-right: 0;
    }

    a.change-theme-button {
      display: flex;
      height: 3rem;
      margin: 0.5rem;
      border-radius: 2px;
      align-items: center;
      text-shadow:
        0 0 0.5rem rgba(255,255,255,0.5),
        0 0 0.5rem rgba(255,255,255,0.5),
        0 0 0.5rem rgba(255,255,255,0.5),
        0 0 0.5rem rgba(255,255,255,0.5),
        0 0 0.5rem rgba(255,255,255,0.5),
        0 0 1rem rgba(255,255,255,0.5);
      border-radius: 2px;
      outline: 1px solid transparent;
      border: 1px solid transparent;
      text-decoration: none;
      color: inherit;
      
      &:hover:not(.current-theme) {
        background: rgba(196, 220, 242, 0.4);
        border: 1px solid rgba(165, 234, 255, 0.5);
        outline: 1px solid rgba(196, 220, 242, 1);
      }
      
      &.current-theme {
        background: linear-gradient(
          rgba(161, 206, 248, 0.8),
          rgba(143, 195, 244, 0.7)
        );
        border: 1px solid rgba(165, 234, 255, 0.5);
        outline: 1px solid rgba(196, 220, 242, 1);
        text-shadow:
          0 0 0.5rem rgba(255,255,255,0.5),
          0 0 0.5rem rgba(255,255,255,0.5),
          0 0 1rem rgba(255,255,255,0.5);
      }

      div {
        height: 2rem;
        width: 2rem;
        margin: 0 1rem 0 0.5rem;
      }
    }
  }
}

dialog a.change-theme-button div.aero-icon {
  background:
    linear-gradient(45deg,
      rgba(0,0,0,0) 50%,
      rgba(255,255,255,0.4)
    ),
    linear-gradient(
      rgba(0,0,0,0) 80%,
      rgba(255,255,255,0.4)
    ),
    #99bddf;
  height: 2rem;
  width: 2rem;
  outline: var(--borderwidth) solid var(--bordercolor);
  border: var(--borderwidth) solid var(--outlinecolor);
  box-shadow: 0 0.05rem 0.05rem;
  border-radius: 0.2rem;
}

@media(max-width: 600px) {
  html.aero {
    section {
      &:before {
        font-size: 1.1rem;
      }

      &.intro {
        right: 0;
        margin-bottom: 5rem;
      }

      &.sponsors {
        left: 0;
        width: calc((88px * 3) + (var(--button-padding) * 2) + ((var(--aeroside) + var(--borderwidth) + var(--innerpadding)) * 2));

        p.buttons {
          justify-content: center;
        }
      }

      > .links a {
        min-width: 5rem;
      }
    }
  }
}

@media(min-height: 768px) or (min-width: 1024px) {
  html.aero {
    background-image: url(../img/train-1536.jpg);
  }
}

@media(min-height: 1536px) or (min-width: 2048px) {
  html.aero {
    background-image: url(../img/train-3072.jpg);
  }
}