:root {
  --main-font: NerkoOne;
  --secondary-font: Comfortaa;
  --main-color: #3a497b;
  --bg-color: #272b30;
}

*,
::after,
::before {
  box-sizing: border-box;
}

a {
  all: unset;
  cursor: pointer;
}

body {
  background-color: var(--bg-color);
  overflow-x: hidden; /* fine */
  overflow-y: auto; /* fine */
}

header {
  overflow: hidden;

  img {
    object-fit: cover;
    max-height: 30vh;
  }
}

.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar-style {
  background-color: var(--main-color);
  border-radius: 25px;
  box-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px 0px;
  img {
    width: 40px;
    height: 40px;
  }
}

.navbar-brand {
  font-family: var(--main-font);
  color: white;
  font-size: 20px;
  font-weight: 500;

  &:hover {
    color: white;
  }
}

.navbar-nav li a {
  color: white;
  font-family: var(--secondary-font);
  font-size: 12.25px;
  font-weight: 400;
}

.nav-link:hover {
  color: #0099cc;
}

.nav-link:focus {
  color: #0099cc;
}

.nav-link.active {
  color: #09c;
  transition: color 0.5s;
}

.card {
  cursor: pointer;
  border: solid black 1px;
  transition: 0.4s all;
  filter: grayscale(0.7);

  &:hover {
    transform: scale(1.05);
    filter: grayscale(0);
  }
  figcaption {
    header {
      h2 {
        color: white;
        font-family: var(--main-font);
        font-size: 14px;
        font-weight: 500;
      }
      span {
        background-color: var(--main-color);
        border-radius: 5px;
        color: white;
        font-family: var(--secondary-font);
        font-size: 12px;
        font-weight: 700;
        padding: 7px 10px;
      }
    }
    p {
      font-size: 14px;
      font-weight: 400;
      font-family: var(--secondary-font);
    }

    footer {
      span {
        background-color: #32383e;
        border-radius: 5px;
        padding: 5px 5px;
        color: white;
        font-family: var(--secondary-font);
        font-size: 10.5px;
        font-weight: 700;
      }
    }
  }
}

.detail {
  header {
    h1 {
      color: white;
      font-family: var(--main-font);
      font-size: 23.8px;
      font-weight: 500;
    }
    span {
      i {
        color: grey;
        cursor: pointer;
        transition: all 0.4s;
        &:hover {
          color: rgb(214, 213, 213);
        }
      }
    }
  }

  article {
    h2 {
      color: white;
      font-family: var(--main-font);
      font-size: 23.8px;
      font-weight: 500;
    }
    h3 {
      color: white;
      font-family: var(--secondary-font);
      font-size: 16px;
      font-weight: 400;

      span {
        background-color: #0dcaf0;
        padding: 2px 5px;
        color: black;
        border-radius: 5px;
        font-family: var(--secondary-font);
        font-size: 12px;
        font-weight: 700;
      }
    }

    p {
      color: white;
      font-family: var(--secondary-font);
      font-size: 14px;
      font-weight: 400;
    }

    button {
      border: solid 1px RGB(255, 193, 7);
      background-color: transparent;
      border-radius: 5px;
      padding: 6px 12px;
      color: white;
      font-size: 16px;
      font-weight: 400;
      font-family: var(--secondary-font);
      transition: all 0.4s;
      &:hover {
        color: white;
        background-color: RGB(255, 193, 7);
      }
    }
  }
}