/* Variables Generales */
:root {
  --dark-grey: #303841;
  --mid-grey: #3A4750;
  --light-grey: #EEEEEE;
  --yellow: #F6C90E;
}

.bgDarkGrey {
  background-color: var(--dark-grey);
}

.bgMidGrey {
  background-color: var(--mid-grey);
}

.bgLightGrey {
  background-color: var(--light-grey);
}

.bgYellow {
  background-color: var(--yellow);
}

/* Estilos Navbar */
#mainNav {
  background-color: var(--dark-grey);
}

/* Tamaño Logo */
.logo {
  max-width: 100px;
}

/* Boton Login dentro de Offcanvas */
.loginButton {
  text-decoration: none;
  background-color: var(--yellow);
  color: var(--dark-grey);
  padding: 8px 16px;
  margin-right: 5px;
  border-radius: 0.375rem;
}

.loginButton:hover {
  color: var(--light-grey);
}

.loginButton:active {
  color: var(--mid-grey);
}

/* Botones de navegación */
.buttonNav {
  color: var(--light-grey);
}

.buttonNav:hover {
  font-size: larger;
  color: var(--yellow);
}

.togglerNav {
  background-color: var(--light-grey);
  color: var(--yellow);
}

.nav-link:focus {
  color: var(--light-grey);
}

/* Ocultar Boton Login del Navbar expandido */
.loginButtonDisplay {
  display: none;
}

/* Breakpoint lg xl xxl */
@media (min-width: 992px) {

  /* Tamaño Logo */
  .logo {
    max-width: 150px;
  }

  /* Botones de navegación */
  .buttonNav {
  width: initial;
  text-align: center;
  }

  .buttonNav:hover {
    color: var(--yellow);
    font-size: initial;
  }

  .loginButtonDisplay {
    display: flex;
  }
}

/* Estilos Footer */
.footerLink {
  color: #757575;
}

.footerLink:hover {
  color: var(--light-grey);
}

/* Página principal */
body {
  background-color:var(--light-grey);
}

.textShadow {
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.popcornImg {
  max-width: 4.7rem;
}

.pagination {
  --bs-pagination-color: var(--yellow);
  --bs-pagination-hover-color: var(--mid-grey);
  --bs-pagination-focus-box-shadow: 0 0 0 0.05rem var(--light-grey);
  --bs-pagination-focus-color: var(--yellow);
  --bs-pagination-active-bg: var(--mid-grey);
  --bs-pagination-active-border-color: var(--dark-grey);
}

.dropdownSize {
  width: 100%;
}

@media (max-width: 767px) {
  /* Cards */
  .cardWidth {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  /* Cards */
  .cardWidth {
    width: 14rem;
  }

  /* Búsqueda y Dropdown Aside */
  .dropdownSize, .formSize {
    width: 500px;
  }
}

@media (min-width: 992px) {
  /* Búsqueda y Dropdown Aside */
  .formSize {
    width: 100%;
  }
}