*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-width: none; /* For Firefox */
  -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

*::-webkit-scrollbar {
  display: none; /* For Chrome, Safari, and Opera */
  min-height: min-content;
  text-rendering: optimizeSpeed;
  overflow-x: hidden;
}

body {
  color: white;
  font-family: "DM Sans";
  font-weight: 500;
  min-height: 100svh;
  background: url("../images/bg.png") no-repeat -50vh 10% / 100%,
    hsl(202, 24%, 8%);
}

@media screen and (max-width: 768px) {
  body {
    background-size: 250%;
    background-position: -50vh 30vh;
  }
}

main {
  display: flex;
  flex-direction: column;
  animation: hue 30s infinite;
}

:root {
  --selection-bg: #666b;
  --selection-text: #fff;
}

::selection {
  background-color: var(--selection-bg);
}

a {
  text-decoration: none;
  color: white;
  overflow: hidden;

  & i {
    overflow: hidden;
    overflow: clip;
  }
}

#header-icons {
  display: flex;
  gap: 1em 0.75em;
  align-items: center;
  justify-content: center;
  margin-top: 0.5em;
  overflow: hidden;

  & a {
    height: 1.33em;
    /* line-height: 1.33em; */
    display: grid;
    place-items: center;
    aspect-ratio: 1/1;
    border-radius: 0.25em;
  }

  & i {
    display: inline-block;
    width: 100%;
  }
}

/* h1 {
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px currentColor;
} */

#links {
  & a {
    display: flex;
    color: gainsboro;
    align-items: center;
    position: relative;
    transition: 0.3s all ease-in-out;
    gap: 0.25em;
    text-shadow: 0 0 1px rgba(155, 155, 155, 0.6);

    & i {
      padding-inline-end: 0.5em;
      padding: 0.25em 0.5em 0.25em 0.05em;
      display: inline-block;
      font-size: 0.8em !important;
      height: max-content;
      width: 2em;
    }
  }

  & span {
    position: relative;
  }

  & h4 {
    font-variant: small-caps;
    position: relative;
  }

  & a:hover {
    transform: scale(0.92);
    transform: translateY(-0.2rem);
    color: white;
  }

  & a > i:nth-of-type(2) {
    position: absolute;
    right: 1em;
    padding: 0.3em 0.667em;
    background-color: #1111;
    border-radius: 50%;
    z-index: 10;
  }
}

#links:has(a:hover) a:not(:hover) {
  opacity: 0.8;
}

main #links a.large-btn {
  max-height: 15em;
  align-items: center;
  display: flex;
  overflow: visible;
  border-radius: 0.75rem;
  background-repeat: no-repeat;

  & i {
    align-self: flex-end;
  }

  & span {
    align-self: flex-end;
  }
}

/*
 *  This is for the Modal
 *  Very Messy
*/

.modal {
  -webkit-backdrop-filter: blur(0.25em);
  backdrop-filter: blur(0.25em);

  & ul {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    list-style: none;
    padding: 1em;
    border: 1px solid rgba(80, 80, 80, 0.6) x;
    border-radius: 0.25em;
    max-width: 628px;
    width: 33%;

    & li {
      display: flex;
      gap: 0.5em;
      align-items: center;
      border-radius: inherit;
      background-color: #4443;
      cursor: pointer;
      padding: 0.25em 0.5em;
      border: 2px solid rgba(80, 80, 80, 0.6);
      width: 100%;

      & a,
      button {
        font-size: 0.5em;
        width: 100%;
      }

      & i {
        padding: 0.125em;
        height: 1.25em;
        aspect-ratio: 1/1;
        display: grid;
        border-radius: 0.5rem;
        color: attr(data-color);
        place-items: center;
      }
    }

    & li:not(:last-of-type):after {
      font-family: FontAwesome;
      content: "\f08e";
      font-size: 0.33em;
      margin-left: auto;
      padding-inline-start: 0.5em;
      flex-shrink: 0;
    }
  }
}

@media screen and (max-width: 768px) {
  .modal {
    & ul {
      max-width: 60%;
      width: 100%;
    }
  }
}

.btn,
.large-btn {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background-color: #2226;
  width: 100%;
  font-size: 0.67em;
  border: 1px solid #5555;
  border-radius: 0.25rem;
  padding: 0.75rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  margin-bottom: 0.25rem;
}

@media screen and (max-width: 768px) {
  .btn,
  .large-btn {
    max-width: 57.5%;
  }
}

@media screen and (min-width: 768px) {
  .btn,
  .large-btn {
    max-width: 400px;
    padding: 0.5rem 0.75rem;
  }
}

@media screen and (min-width: 1024px) {
  .btn,
  .large-btn {
    padding-top: 1rem;
    padding-bottom: 1rem;
    max-width: 600px;
    margin-bottom: 0.75rem;
  }
}

@media screen and (min-width: 1280px) {
  .btn,
  .large-btn {
    font-size: 0.55em;
  }
}