navigation-menu {
  --text-color: white;
  --signup-button-color: #5049ff;
  --signup-button-hover-color: #5f57ff;
}

h1 {
  margin: 0;
  font-size: clamp(2rem, 2.4vw + 1.3rem, 3.2rem);
}

h2 {
  margin: 0;
  font-size: clamp(2rem, 1vw + 1.7rem, 2.5rem);
  text-align: center;
}

#hero {
  padding: 4rem max((100% - 1000px) / 2 + 2rem, 2rem);
  background: linear-gradient(135deg, #571fd3, #7cd3f5);
  color: white;
  header {
    display: grid;
    grid-template:
      ".           image" 1fr
      "title       image" auto
      "description image" auto
      ".           image" 1fr
      / minmax(auto, 34rem) auto;
    place-items: start;
    gap: 2rem 4rem;
    padding: 4rem 0 0;
    background:
      no-repeat 100% 50% / 400px 400px radial-gradient(#80FFD982, transparent 70%);
  }
  h1 { grid-area: title; }
  img {
    grid-area: image;
    width: auto;
    max-width: 30vw;
    height: auto;
    place-self: center stretch;
  }
  p {
    grid-area: description;
    margin: 0 0 2rem 0;
    max-width: 40rem;
    font-size: clamp(1rem, .4vw + .9rem, 1.2rem);
  }
  a { color: white; }
  @media (width < 1000px){
    header {
      grid-template:
        "title      " auto
        "description" auto
        "cta        " 1fr
        / 1fr;
      text-align: center;
      justify-items: center;
      gap: 2rem;
      background: none;
    }
    img { display: none; }
  }
}

#settings {
  display: grid;
  grid:
    "panel ." 1fr
    "panel title" auto
    "panel description" auto
    "panel ." 1fr / auto 1fr;
  gap: 0rem 4rem;
  max-width: 60rem;
  margin: 4rem auto 0;
  h2 {
    margin-bottom: 2rem;
    text-align: left;
    grid-area: title;
  }
  .mobile-layout { display: none; }
  @media (width < 800px){
    grid: "title" auto "panel" auto "description" auto / 1fr;
    .mobile-layout { display: inline; }
    .widescreen-layout { display: none; }
  }
}
#settings-panel {
  grid-area: panel;
  padding: 2rem 6rem 2rem 5.5rem;
  color: #12324b;
  background: linear-gradient(135deg, #ece4ff, #daf5ff);
  position: relative;
  border-radius: 2rem;
  font-size: clamp(1rem, .2vw + .9rem, 1.1rem);
  font-weight: 600;
  @media (width < 800px){
    display: grid;
    grid: auto auto / 1fr 1fr;
    padding: 2rem 5rem;
    label { gap: 1rem; }
  }
  @media (width < 600px){
    display: block;
  }
  @media (width < 400px){
    padding-inline: 2rem;
  }
  &.loading {
    > * { visibility: hidden; }
    &::after {
      content: "";
      display: block;
      width: 1rem;
      height: 1rem;
      position: absolute;
      inset: 50% auto auto 50%;
      translate: -50% -50%;
      border: 3px solid currentcolor;
      border-color: #51657e #51657e transparent transparent;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
  }
  label {
    display: grid;
    grid: "switch description" auto / auto 1fr;
    place-items: center start;
    gap: 2rem;
    margin: 1rem 0;
    cursor: pointer;
  }
  input[type=checkbox]{
    grid-area: switch;
    width: 1px;
    height: 1px;
    opacity: 0.01;
    & + svg { --value: 0; }
    &:checked + svg { --value: 1; }
    &[disabled] + svg { filter: grayscale(1); }
  }
  svg {
    grid-area: switch;
    display: block;
    height: 4rem;
    width: 4rem;
  }
  label:has(input[disabled]){
    color: #757575;
    filter: grayscale(1);
  }
}
#settings-description {
  grid-area: description;
}

@keyframes spin {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

#cookies-explanation {
  max-width: 60rem;
  padding: 4rem 5rem;
  margin: 5rem auto 2rem;
  box-sizing: border-box;
  color: white;
  background: linear-gradient(135deg, #6b3dd0, #1b75dd);
  border-radius: clamp(.1px, 50vw - 450px, 50px);
  @media(width < 700px){
    padding: 4rem 3rem;
  }
  h2 { margin: 0 auto 1em; }
  a {
    text-decoration: underline;
    color: white;
  }
}

#further-details {
  padding: 4rem max((100% - 800px) / 2 + 2rem, 2rem);
  h2 { margin: 1em auto }
  h3 {
    margin: 4rem auto 1rem;
    font-size: 1.5rem;
    & + p { margin: 1rem 0; }
  }
  .description {
    margin: 0 auto;
    max-width: 30rem;
    text-align: center;
  }
  a {
    color: #3d39ff;
    text-decoration: none;
    &:is(:hover, :active, :focus) { text-decoration: underline; }
  }
  .no-cookies {
    margin: 3rem auto;
    color: #6c7393;
    text-align: center;
  }
  .table-scroller {
    width: 100%;
    margin: 2rem 0;
  }
  table {
    border-spacing: 0;
    width: 100%;
    text-align: left;
    background-color: #f6f9fd;
    border-radius: .5rem;
  }
  img {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    margin: .25rem;
  }
  code {
    font-size: .9rem;
    background-color: #dcdfee;
    border-radius: .4em;
    padding: 0.2em 0.5em;
  }
  button {
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    margin: 0 .25rem;
    position: relative;
    color: #959bbb;
    background: none;
    border: 1.5px solid currentcolor;
    border-radius: 50%;
    font-weight: 600;
    font-size: 1rem;
    line-height: 0;
    text-align: center;
    &::after {
      content: attr(data-info);
      display: inline-block;
      width: min(70vw, 400px);
      padding: 1rem 2rem;
      position: absolute;
      inset: 50% 100% auto auto;
      translate: 0 -50%;
      z-index: 10;
      color: black;
      background-color: white;
      box-shadow: 0 3px 10px #12324b55;
      border-radius: 0.5rem;
      font-weight: normal;
      font-size: 1rem;
      line-height: 1.3;
      text-align: left;
      opacity: 0;
      visibility: hidden;
      transition: translate .3s 0s, opacity .3s 0s, visibility 0s .3s;
    }
    &::before {
      content: "";
      display: block;
      width: 0;
      height: 0;
      position: absolute;
      inset: 50% 100% auto auto;
      translate: .5rem -50%;
      z-index: 11;
      border: .5rem solid transparent;
      border-left-color: white;
      border-right-width: 0;
      opacity: 0;
      visibility: hidden;
      transition: translate .3s 0s, opacity .3s 0s, visibility 0s .3s;
    }
  }
  td:hover button::before { translate: -.5rem -50%; }
  td:hover button::after { translate: -1rem -50%; }
  td:hover button::before,
  td:hover button::after {
    opacity: 1;
    visibility: visible;
    transition: translate .3s 0s, opacity .3s 0s, visibility 0s 0s;
  }
  :is(th, td){
    height: 3rem;
    padding: 0 .5rem;
    &:first-child { padding-left: 1rem; }
    &:last-child { padding-right: 1rem; }
  }
  th {
    color: #51657e;
    background-color: #e2eaf5;
    font-weight: 600;
    &:first-child { border-top-left-radius: .5rem; }
    &:last-child { border-top-right-radius: .5rem; }
  }
  @media(width < 700px){
    .table-scroller { overflow-x: auto; }
    :is(th, td):nth-child(5){ display: none; }
    :is(th, td):nth-child(4){ padding-right: 1rem; }
    th:nth-child(4){ border-top-right-radius: .5rem; }
  }
}