@font-face {
    font-family: 'TwinPeaksFont';
    src: url('../fonts/OPTINational-Gothic.otf') format('opentype');

}

body {
    font-family: 'TwinPeaksFont', sans-serif;
}

.body-padding-for-navbar {
    padding-top: calc(10vh + 1rem);
}

.bg-black-lodge {
    background-image: url('../imgs/background-black-lodge.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh;
    width: 100%;
}


.twin-peaks-logo {

    height: 10vh;
    width: auto;
    min-height: 40px;

}

input[type="checkbox"] {
    border: 2px solid red;
    box-shadow: none;
}

input[type="checkbox"]:checked,
input[type="checkbox"]:focus {
    background-color: red;
    border-color: red;
    box-shadow: none;
    outline: none;
}

section,
article,
#personagens,
#trilha-sonora,
#galeria {
    scroll-margin-top: calc(10vh + 2rem);
}

.shadow-red {
    box-shadow: 0 0 32px rgba(255, 0, 0, 0.45);
  }
  
 .accordion {

    --bs-accordion-color: white;
    --bs-accordion-bg: rgba(0, 0, 0, 0.25);
    --bs-accordion-border-width: 0px;
    --bs-accordion-btn-color: #ffffff;
    --bs-accordion-active-bg: rgba(255, 0, 0, 0.45);
    --bs-accordion-active-color: white;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
 
 }

 .accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
  }

  .accordion-button:focus {
    box-shadow: 0 0 32px rgba(255, 255, 255, 0.45);
  }
  
  .nav-link:not(.active) {
    color: white;
}

#carouselTwinPeaks .carousel-inner {
    aspect-ratio: 16 / 9;
}

#carouselTwinPeaks .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* A partir daqui as classes da pagina de login */

::placeholder {
  color: #ccc !important;
  opacity: 1;
}