@font-face {
  font-family: Arimo;
  src:
    url("../assets/font/Arimo.woff2") format("woff2"),
    url("/src/assets/font/Arimo.ttf") format("truetype");
  font-display: swap;
  font-weight: 100 900;
}

@font-face {
  font-family: Onest;
  src:
    url("../assets/font/Onest.woff2") format("woff2"),
    url("../assets/font/Onest.ttf") format("truetype");
  font-display: swap;
  font-weight: 100 900;
}

:root {
  --heading-h1: calc(var(--size) * 4);
  --heading-h2: calc(var(--size) * 3.5);
  --heading-h3: calc(var(--size) * 2);
  --color1: #0d0e0f;
  --color2: #1c2022;
  --size: 1rem;
  --default: #fff;
  --font-arimo: "Arimo", sans-serif;
  --font-onest: "Onest", sans-serif;
  --dark: #c4c4c4;
  --highlist: rgb(225 0 255);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  background-color: #141414;
  background-image: radial-gradient(circle at 1px 1px, #333 0 1px, transparent 0 1rem);
  background-size: 2rem 2rem;
  background-position: -1rem -1rem;
  transition: all 0.75s;
  opacity: 1;

  @starting-style {
    opacity: 0;
  }
}

.menu-container {
  max-width: 100dvw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  background-image: linear-gradient(0.4turn, rgb(0 0 0 / 100%), transparent);
  position: sticky;
  top: 0;
  z-index: 1;

  div {
    display: flex;
    align-items: center;
    color: var(--default);
    gap: 0.5rem;
    transition: transform 0.3s ease-out;

    &:hover {
      transform: translate(3px, 4px);
    }

    :where(img) {
      width: 50px;
      height: 100%;
    }

    a {
      font-family: var(--font-onest);
      font-weight: 600;
      text-decoration: none;
      color: var(--default);
    }
  }

  nav {
    display: flex;
    gap: var(--size);
    padding: calc(var(--size) * 1.5);
    justify-content: center;
    font-family: Onest, sans-serif;

    a {
      color: var(--default);
      text-decoration: none;
      padding: 0.5rem;
      border-radius: 4px;

      &:hover {
        background-color: var(--default);
        color: #000;
      }
    }
  }

  .playlist {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-image: linear-gradient(0.3turn, #f33, darkred);
    outline: 2px solid white;
    color: var(--default);
    font-family: var(--font-onest);
    font-weight: 600;
    text-decoration: none;
    padding: 0.5rem 2rem;
    border-radius: 10px;
    transition:
      filter 0.2s ease-in,
      scale 0.2s ease-in;

    &:hover {
      filter: saturate(2);
      scale: 1.1;
    }
  }

  :where(img) {
    width: calc(var(--size) * 1.5);
    height: calc(var(--size) * 1.5);
  }
}

.welcome-container {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: calc(var(--size) * 0.5);

  header h1 {
    font-family: var(--font-arimo);
    font-size: var(--heading-h1);
    color: var(--default);
    padding: var(--size);
    text-align: center;
  }

  header p {
    font-family: var(--font-onest);
    color: var(--dark);
    text-align: center;
  }

  article {
    color: var(--default);
    max-width: 700px;
    margin-top: calc(var(--size) * 3);

    header h2 {
      font-family: var(--font-arimo);
      font-size: var(--heading-h2);
      text-align: center;
    }

    ul {
      font-family: var(--font-onest);
      padding: calc(var(--size) * 2.5);
      max-width: 800px;
      text-wrap: pretty;
      color: var(--dark);

      li {
        list-style: square;
        margin-block: calc(var(--size) * 1.4);

        & .highlist {
          color: var(--highlist);
          font-weight: 600;
        }
      }
    }
  }
}

.content {
  text-align: center;
  font-size: var(--heading-h2);
  font-family: var(--font-arimo);
  color: var(--default);
  margin-block: calc(var(--size) * 2);
}

.content-container {
  text-wrap: pretty;
  color: var(--default);
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  justify-items: center;
  gap: var(--size);

  header p {
    margin-block: var(--size);
    font-family: var(--font-onest);
  }
}

#contenido > h2 {
  font-size: var(--heading-h2);
  font-family: var(--font-arimo);
  text-align: center;
  color: var(--default);
  padding: calc(var(--size) * 1.3);
}

.content-card {
  background-image: linear-gradient(0.75turn, #000, transparent, #101010);
  width: 300px;
  height: fit-content;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  transition: scale 0.3s ease-in;

  &:hover {
    scale: 1.03;
  }

  header {
    padding: var(--size);
  }

  header h3 {
    font-family: var(--font-arimo);
    font-size: var(--heading-h3);
    text-align: center;
    padding: var(--size);
  }

  :where(img) {
    width: 100%;
    border-radius: 8px;
  }

  :where(p) {
    padding: var(--size);
    font-family: var(--font-onest);
    color: var(--dark);
  }

  footer {
    color: var(--default);
    font-size: calc(var(--size) * 1.8);
    margin-bottom: var(--size);

    nav {
      font-family: var(--font-arimo);
      transition:
        transform 0.3s ease,
        color 0.3s ease;

      &:hover {
        transform: scale(1.1);
      }

      a {
        color: var(--default);
      }
    }
  }
}

#opiniones > h2 {
  color: var(--default);
  font-family: var(--font-arimo);
  font-size: var(--heading-h2);
  text-align: center;
  padding: var(--size);
}

.feed-content {
  max-width: 950px;
  margin: auto;
  color: var(--default);
  font-family: var(--font-onest);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 0.5rem;

  & .feed-card {
    background-image: linear-gradient(to bottom, rgb(0 0 0 / 30%), rgb(0 0 0 / 70%));
    padding: calc(var(--size) * 1.5);
    border-radius: 8px;
    transition:
      filter 0.2s ease-in,
      transform 0.2s ease-in-out;

    &:hover {
      filter: brightness(1.2);
      transform: translate(2px, -2px);
    }
  }
}

.card-user {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: var(--size);
  margin-top: var(--size);

  :where(img) {
    width: 75px;
    height: 75px;
    border-radius: 50%;
  }
}

.end-content {
  background: #101010;
  color: var(--default);
  margin-top: var(--size);

  :where(p) {
    font-family: var(--font-onest);
    font-size: calc(var(--size) * 1.1);
    text-align: center;
    padding: calc(var(--size) * 1.9);
  }
}