@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');

:root {
  --black-color: #1c202b;
  --red-color: #b80302;
  --yellow-color: #ead500;
  --white-color: rgb(238, 238, 238);
}

h2, h3, h4, h5 {
  font-family: 'Bungee', serif;
  color: var(--red-color);
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: var(--black-color);
  color: var(--white-color);

  display: flex;
  flex-direction: column;
  min-height: 100dvh;

  main {
    flex-grow: 1;
    align-content: center;
  }
}


nav .btn {
  color: var(--white-color);
  --bs-btn-padding-x:0;

  &:hover {
    color: var(--yellow-color);
  }
}

.navbar {
  background-color: var(--black-color);
  --bs-navbar-color: var(--white-color);
  --bs-navbar-hover-color: var(--yellow-color);
  --bs-navbar-active-color: var(--red-color);
  font-size: 1.7rem;
  --bs-navbar-padding-y: 0;
  --bs-navbar-toggler-icon-bg: url("/images/icon-movie.png");
}

.navbar-toggler {
  padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
  font-size: var(--bs-navbar-toggler-font-size);
  line-height: 1;
  border: var(--bs-border-width) solid var(--white-color);
  border-radius: 0;
  transition: var(--bs-navbar-toggler-transition);
}
.navbar-toggler-icon {
  background-image: url("/images/icon-movie.png");
  width: 2rem;
}

form {
  width: 50%;
   @media (width <= 675px) {
      width: 75%;
    }

  .image {
    &:hover {
      color: var(--yellow-color);
    }
  }

  .btn {
    color: var(--white-color);

    &:hover {
      color: var(--yellow-color);
    }

  }
}

footer {
  background-color: var(--black-color);
  a {
    color: var(--white-color);
  }
}

.msg-err {
  color: var(--red-color);
}