body {
  position: relative;
  min-block-size: 100%;
  overflow-y: auto;
  
  &::after {
    content: "";
    position: absolute;
    opacity: 0.5;
    z-index: 0;
    top: -150px;
    left: 50%;
    translate: -50%;
    filter: blur(50px);
    inline-size: 920px;
    block-size: 254px;
    border-radius: 450px / 130px;
    background-repeat: no-repeat;
    background-image: var(--top-gradient);
  }
  
  &::before {
    content: "";
    position: absolute;
    opacity: 0.75;
    z-index: 1;
    top: 0;
    left: 50%;
    translate: -50%;
    inline-size: 1180px;
    block-size: 200px;
    background-repeat: no-repeat;
    background-image: var(--top-gradient-filter);
  }
}

main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--padding-double);
  inline-size: 700px;
  max-inline-size: 90%;
  margin: auto;
}

h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: 48px;
  font-weight: 600;
  color: var(--text-color);
  letter-spacing: -0.14px;
  text-align: center;
  line-height: 48px;
  
  @media (max-width: 500px) {
    font-size: 40px;
  }
  
  img {
    inline-size: 144px;
    margin-top: 40px;
  }
}

select {
  display: flex;
  align-items: center;
  inline-size: auto;
  padding: 6px 8px;
  padding-inline-end: 15px;
  margin-inline-end: -10px;
  font-size: calc(var(--text-size) + 2);
  color: var(--text-color);
  text-align-last: center;
  border: none;
  border-radius: var(--border-radius);
  appearance: none;
  background-color: light-dark(white, #2b2b2b/*oklch(1 0 0 / 17%)*//*oklch is making dropdown white on Windows OS*/);
  background-image: url('data:image/svg+xml;utf8,<svg width="37" height="55" xmlns="http://www.w3.org/2000/svg"><path d="M18.5 0c-.553 0-1.059.264-1.636.852L.65 16.922c-.41.44-.65 1.058-.65 1.939 0 1.528.938 2.673 2.19 2.673.528 0 1.034-.235 1.611-.763L18.5 6.14l14.699 14.63c.553.528 1.083.763 1.588.763 1.275 0 2.213-1.145 2.213-2.673 0-.881-.24-1.498-.65-1.939L20.136.822C19.559.265 19.029 0 18.5 0Zm0 55c.53 0 1.059-.264 1.636-.823L36.35 38.078c.41-.44.65-1.058.65-1.939 0-1.528-.938-2.703-2.213-2.703-.505 0-1.035.265-1.588.793L18.5 48.86 3.801 34.23c-.577-.528-1.083-.793-1.612-.793C.94 33.436 0 34.611 0 36.14c0 .881.24 1.498.65 1.939l16.214 16.07c.577.588 1.083.852 1.636.852Z" fill="gray" fill-rule="nonzero"/></svg>');
  background-repeat: no-repeat;
  background-position: right 8px top 50%, 0 0;
  background-size: 8px auto, 100%;
}

h2 {
  margin-bottom: var(--padding);
  font-size: 21px;
  font-weight: 500;
  color: var(--text-dimmed);
  letter-spacing: 0.23px;
  text-align: center;
  line-height: 25px;
  
  @media (max-width: 500px) {
    font-size: 18px;
  }
}

#bigCards {
  display: grid;
  gap: var(--padding-double);
  grid-template-columns: 1fr 1fr;
  flex-shrink: 0;
  inline-size: 100%;
  
  @media (max-width: 700px) {
    grid-template-columns: 1fr;
  }
  
  a {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: var(--padding-double);
    border-radius: var(--border-radius-large);
    cursor: pointer;
    text-decoration: none;
    background: var(--box-background);
    
    svg.person {
      position: relative;
      width: 50px;
      aspect-ratio: 1;
      color: var(--sf-color);
    }
    
    p {
      display: flex;
      align-items: center;
      gap: var(--padding);
      font-size: calc(var(--font-size) + 6px);
      font-weight: 500;
      color: var(--text-color);
      
      svg {
        position: relative;
        top: 1px;
        width: 8px;
        height: 17px;
        color: var(--text-color);
      }
    }
  }
}

h3 {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  align-self: start;
  padding-inline-start: 20px;
  font-size: 20px;
  font-weight: 500;
  color: var(--text-dimmed);
  
  @media (max-width: 835px) {
    padding-inline-start: 15px;
  }
}

.bigLinkBlocks {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  inline-size: 100%;
  margin-block: auto;
  border-radius: var(--border-radius-large);
  list-style: none;
  background: var(--box-background);
  
  li {
    position: relative;
    
    a,
    label {
      position: relative;
      display: flex;
      align-items: center;
      padding: var(--padding-double);
      font-size: calc(var(--font-size) + 6px);
      font-weight: 500;
      color: var(--text-color);
      border: none;
      border-bottom: solid 1px var(--delimiter);
      outline-offset: -3px;
      appearance: none;
      text-decoration: none;
      cursor: pointer;
      background: transparent;
    }
    
    &:last-of-type a,
    &:last-of-type label {
      border-bottom: none;
    }
    
    svg.logo {
      position: relative;
      inline-size: 22px;
      aspect-ratio: 1;
      margin-inline-end: var(--padding);
      color: var(--sf-color);
    }
    
    svg.chevron {
      position: relative;
      inline-size: 18px;
      aspect-ratio: 1;
      margin-inline-start: auto;
      color: var(--text-dimmed);
    }
  }
}

footer {
  opacity: 0.8;
  display: flex;
  justify-content: center;
  margin-top: auto;
  padding-block: var(--padding-double);
  font-size: calc(var(--font-size));
  color: var(--text-dimmed);
  font-weight: 500;
}