main {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  padding: 128px 0 192px;
  counter-reset: topSongs topArtists;

  div.top {
    max-width: 496px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-feature-settings: "ss07" 1;
    margin: 0 16px;

    > h1 {
      text-align: center;
      user-select: none;

      &.emoji {
        font-size: 48px;
        margin-bottom: -12px;
      }

      &.main-heading span.tag {
        color: var(--text-extra-dark);
        font-size: 18px;
        font-family: Consolas;
        @media (max-width: 420px) { display: none; }
      }

      &.main-heading span.hey {
        text-transform: lowercase;
        cursor: none;
        transition: color 300ms, background-color 500ms;

        &:hover {
          color: var(--background-main);
          background-color: var(--text-normal);
        }
      }
    }

    div.divider {
      height: 1px;
      width: 100%;
      background-color: #444;
    }

    span.location {
      display: flex;
      align-items: center;
      gap: 4px;
      color: var(--text-dark);
      user-select: none;
    }

    > p {
      color: var(--text-dark);
      font-size: 16px;
      text-align: justify;

      > time { color: var(--text-dark); }
    }

    ul.links {
      display: flex;
      gap: 8px;
      list-style-type: none;
      user-select: none;
      z-index: 0;
      
      @media (min-width: 561px) {
        justify-content: flex-end;
        margin: -16px 0 -32px 0;
      }

      > li {
        height: 40px;
        width: 40px;
        padding: 0;

        &:active { transform: scale(0.9); }

        > a {
          height: 100%;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          -webkit-user-drag: none;

          > img, > svg {
            height: 28px;
            width: 28px;
            stroke: #aaa;
          }
        }
      }
    }

    > h2 {
      color: var(--text-dark);
      user-select: none;
    }

    div.stack {
      max-height: 242px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      overflow-y: auto;

      > div {
        height: 40px;
        display: flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
        padding: 0 6px;
        cursor: pointer;
        user-select: none;
        &:active { transform: scale(0.9); }

        > img {
          max-height: 28px;
          min-width: 28px;
          border-radius: 4px;
        }
      }
    }

    div.hackatime-stats {
      display: flex;
      flex-direction: column;
      gap: 8px;

      div#hackatimeChart {
        height: 24px;
        display: flex;
        padding: 0;
        overflow: hidden;

        div {
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          color: black;
          background-color: black;
          font-weight: 700;
          overflow: hidden;
        }
      }

      #hackatimeTotalTime {
        color: var(--text-dark);
        text-align: right;
      }
    }
  }

  div.projects {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 16px;
    user-select: none;

    &.selected > div { @media (width <= 1080px) { grid-template-columns: 1fr; } > a:after { @media(width <= 1080px) { left: 50%; }}}
    &:not(.selected) > div { @media (width <= 1080px) { grid-template-columns: 1fr 1fr; } > a:after { @media(width <= 1080px) { left: 100%; }}}
    &:not(.selected) > div { @media (width <= 720px) { grid-template-columns: 1fr; } > a:after { @media(width <= 720px) { left: 50%; }}}
    &.selected > div > a > h2 > span { @media (width > 1080px) { height: 32px; }}
    > h1 { text-transform: lowercase; }

    > div {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 1px;
      position: relative;
      border-right: 1px #333 solid;
      padding: 0 1px;

      &::before {
        width: 100vw;
        height: 1px;
        position: absolute;
        left: 50%;
        content: "";
        background-color: #333;
        translate: -50%;
        z-index: 1;
      }

      > a {
        min-height: 96px;
        width: 288px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 16px;
        text-decoration: none;
        border: #333 solid;
        border-width: 0 0 1px 1px;
        padding: 12px 16px;
        background-color: var(--background-main);
        &:active > h2 { scale: 0.9; }

        &::after {
          width: 100vw;
          height: 1px;
          position: absolute;
          bottom: -1px;
          left: 150%;
          content: "";
          background-color: #333;
          translate: -50%;
          z-index: 1;
        }

        &:has(> div.letters:hover) > h2 {
          color: var(--text-normal); font-size: 20px;
          > span { height: 0; color: transparent; }
        }

        &[data-release-stage]::before {
          position: absolute;
          inset: 0 auto auto 0;
          content: attr(data-release-stage);
          font-size: 20px;
          font-weight: bold;
          text-transform: capitalize;
          border: 1px #333 solid;
          border-radius: 4px;
          padding: 4px 6px;
          rotate: -10deg;
          translate: -20% -20%;
          z-index: 1;
        }

        &[data-release-stage=alpha]::before { background-color: color-mix(in srgb, var(--background-main), crimson 15%) }
        &[data-release-stage=beta]::before { background-color: color-mix(in srgb, var(--background-main), goldenrod 15%) }

        > div.letters {
          height: 288px;
          width: 100%;
          color: var(--text-dark);
          font-size: 18px;
          font-family: Consolas;
          word-break: break-word;
          opacity: 0;
          overflow: hidden;
          transition-duration: 300ms;
          cursor: none;

          @media (max-width: 1080px) { display: none; }
          &:hover { opacity: 1; }
        }

        > div.gradient {
          width: 288px;
          height: 288px;
          position: absolute;
          mix-blend-mode: var(--mix-blend-mode);
          pointer-events: none;

          @media (max-width: 1080px) { display: none; }
          &.orange { background: radial-gradient(var(--background-main) 40%, #ff2c1d 60%, #fc902a); }
          &.cyan { background: radial-gradient(var(--background-main) 40%, #2979ff 60%, #2afc98); }
          &.pink { background: radial-gradient(var(--background-main) 40%, #6929ff 60%, #fc2a70); }
        }

        > h2 {
          height: calc(100% - 24px);
          width: 100%;
          position: absolute;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          color: var(--text-dark);
          font-size: 32px;
          text-align: center;
          pointer-events: none;
          transition: font-size 200ms ease-out, scale 200ms;

          > span {
            font-size: 16px;
            font-weight: normal;
            text-wrap: balance;
            transition: 200ms;
          }
        }
      }

      > img {
        width: 64px;
        position: fixed;
        top: 0;
        left: 0;
        display: none;
        pointer-events: none;
        transition: transform 0.1s ease;
      }
    }

    > a {
      height: 36px;
      display: flex;
      font-size: 24px;
      text-decoration: none;
      border: 1px #333 solid;
      padding: 8px 8px 8px 12px;
      cursor: pointer;
      overflow: hidden;

      &:hover {
        > span.text { translate: 0 -48px; }
        > span.arrow { translate: 0 0; }
      }

      > span {
        height: 88px;
        width: max-content;
        display: flex;
        flex-direction: column;
        line-height: 44px;
        transition-duration: 300ms;

        &.text { translate: 0 -4px; }
        &.arrow { translate: 0 -36px; }

        > svg {
          height: 36px;
          width: 36px;
          stroke-width: 1.5px;
        }
      }
    }
  }

  div.spotify-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;

    > span {
      display: flex;
      align-items: center;
      gap: 8px;
      user-select: none;

      > img {
        height: 36px;
        filter: invert(var(--invert));
      }

      > span { padding: 4px 6px; }
    }

    > h1 {
      gap: 8px;
      text-transform: lowercase;
      user-select: none;
    }

    > div.main {
      display: flex;
      gap: 8px;
      margin-top: 4px;

      @media (max-width: 880px) { flex-direction: column; }
      @media (max-width: 520px) { align-items: center; }

      > div {
        height: 346px;
        width: 370px;
        min-width: 304px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        color: #ccc;
        padding: 12px 14px;

        * { color: white; }

        > div.title-bar {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 16px;
          user-select: none;

          @media (max-width: 420px) { flex-direction: column; }

          > div > form {
            display: flex;
            gap: 8px;

            > input { display: none; }
            > label { cursor: pointer; }

            > input:checked + label {
              font-weight: bold;
              text-decoration: underline;
            }
          }
        }

        > div.main {
          position: relative;
          display: flex;
          flex-direction: column;
          gap: 6px;
          overflow-y: auto;

          &.top-songs > div::before {
            content: counter(topSongs);
            counter-increment: topSongs;
          }

          &.top-artists > div::before {
            content: counter(topArtists);
            counter-increment: topArtists;
          }

          &.top-artists div.left img { border-radius: 50% !important; }

          > div {
            min-height: 56px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 4px;
            border-radius: 6px;
            padding: 0 4px;
            cursor: pointer;
            transition: background-color 200ms;

            &:hover { background-color: #181818; }

            &::before {
              width: 12px;
              position: absolute;
              display: flex;
              justify-content: center;
            }

            > div {
              display: flex;
              align-items: center;
              gap: 8px;

              &.left {
                margin-left: 16px;

                img {
                  height: 48px;
                  width: 48px;
                  object-fit: cover;
                  border-radius: 4px;
                  user-select: none;
                }

                > div {
                  display: flex;
                  flex-direction: column;

                  > span {
                    max-width: 180px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  }

                  > span:has(a), a { color: #ccc; }
                }
              }

              &.right {
                iframe {
                  height: 0;
                  width: 0;
                  border: none;
                }

                a svg {
                  translate: 0 2px;
                  stroke: #ccc;
                }

                button {
                  height: 48px;
                  width: 48px;
                  color: black;
                  background-color: #1ed760;
                  border: none;
                  border-radius: 50%;
                  cursor: pointer;
                  transition-duration: 200ms;

                  &:hover { scale: 1.05; }
                  &:active { scale: 0.9; }
                  svg { translate: 0 1px; }
                }
              }
            }
          }
        }
      }
    }

    div.bottom {
      display: flex;
      gap: 8px;
      margin-top: 4px;

      > a {
        min-height: 40px;
        display: flex;
        align-items: center;
        gap: 4px;
        text-decoration: none;
        user-select: none;
        &:active { scale: 0.9; }
        span { color: white; }
      }

      > button {
        padding: 0 8px;
        cursor: pointer;
        &:active { scale: 0.9; }
        > svg { stroke: #ccc; }
      }
    }
  }

  div.youtube-stats {
    width: min-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    text-transform: lowercase;
    user-select: none;

    h1 {
      grid-column: span 5;
      gap: 8px;
      text-transform: lowercase;
      user-select: none;
    }

    > div {
      display: flex;
      align-items: center;
      font-size: 24px;

      .counter {
        width: 192px;
        font-size: 36px;
        font-family: "Black Ops One";
        margin-bottom: -6px;
      }
  
      .divider {
        height: 96px;
        width: 2px;
        background-image: linear-gradient(transparent, #fff9, white, #fff9, transparent)
      }
    }
  }

  div.newspaper {
    max-height: 720px;
    width: min(640px, 100vw - 128px);
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    font-size: 8px;
    overflow: auto;
    transition: font-size 5s;
    h1 { text-decoration: underline; }

    &:hover { font-size: 14px; }
  }
}