/* Whole Site Styles */
* {
    box-sizing: border-box;
    font-family: "Special Elite";
}

body {
    height: 100vh;
}

textarea,
input.text,
input[type='text'],
input[type='button'],
input[type='submit'] {
    color: black;
}

.fit-content {
    width: fit-content;
}

.fit-content-height {
    height: fit-content;
}

/* icons and images*/

.footer-icon {
    width: 2.5rem;
    height: 2.5rem;
}

.icon {
    width: 2.5rem;
    height: fit-content;
}

.icon-button {
    width: 2.5rem;
    height: fit-content;
}

.icon-logo {
    width: 4rem;
    height: fit-content;
}

.small-icon {
    width: 1.5rem;
    height: fit-content;
}

.film-img {
    width: 90%;
}

/* Colors */
.main-bg {
    background-color: rgba(255, 222, 222);
}

.dark-grey {
    background-color: #d9d9d9;
}

.default-1 {
    background: rgb(164, 194, 97);
}

.default-2 {
    background: rgb(251, 221, 87);
}

.info-message {
    background: rgba(120, 152, 189);
}

.warning-message {
    background: rgba(234, 40, 38);
}

.scroll-container-default::-webkit-scrollbar-track {
    background: rgb(164, 194, 97);
    border-radius: 5px;
}

.scroll-container-default::-webkit-scrollbar-thumb {
    background: rgb(251, 221, 87);
    border-radius: 5px;
}

.asteroid-1 {
    background: rgba(189, 159, 109);
}

.asteroid-2 {
    background: rgba(83, 211, 198);
}

.scroll-container-asteroid::-webkit-scrollbar-track {
    background: rgba(189, 159, 109);
    border-radius: 5px;
}

.scroll-container-asteroid::-webkit-scrollbar-thumb {
    background: rgba(83, 211, 198);
    border-radius: 5px;
}

.french-dispatch-1 {
    background: rgba(243, 221, 88);
}

.french-dispatch-2 {
    background: rgba(161, 201, 194);
}

.scroll-container-french-dispatch::-webkit-scrollbar-track {
    background: rgba(243, 221, 88);
    border-radius: 5px;
}

.scroll-container-french-dispatch::-webkit-scrollbar-thumb {
    background: rgba(161, 201, 194);
    border-radius: 5px;
}

.isle-of-dogs-1 {
    background: rgba(234, 40, 38);
}

.isle-of-dogs-2 {
    background: rgba(237, 237, 237);
}

.scroll-container-isle-of-dogs::-webkit-scrollbar-track {
    background: rgba(234, 40, 38);
    border-radius: 5px;
}

.scroll-container-isle-of-dogs::-webkit-scrollbar-thumb {
    background: rgba(237, 237, 237);
    border-radius: 5px;
}

.budapest-1 {
    background: rgba(120, 66, 131);
}

.budapest-2 {
    background: rgba(229, 0, 12);
}

.scroll-container-budapest::-webkit-scrollbar-track {
    background: rgba(120, 66, 131);
    border-radius: 5px;
}

.scroll-container-budapest::-webkit-scrollbar-thumb {
    background: rgba(229, 0, 12);
    border-radius: 5px;
}

.moonrise-1 {
    background: rgba(255, 230, 79);
}

.moonrise-2 {
    background: rgba(195, 188, 97);
}

.scroll-container-moonrise::-webkit-scrollbar-track {
    background: rgba(255, 230, 79);
    border-radius: 5px;
}

.scroll-container-moonrise::-webkit-scrollbar-thumb {
    background: rgba(195, 188, 97);
    border-radius: 5px;
}

.fantastic-1 {
    background: rgba(155, 50, 20);
}

.fantastic-2 {
    background: rgba(226, 157, 60);
}

.scroll-container-fantastic::-webkit-scrollbar-track {
    background: rgba(155, 50, 20);
    border-radius: 5px;
}

.scroll-container-fantastic::-webkit-scrollbar-thumb {
    background: rgba(226, 157, 60);
    border-radius: 5px;
}

.darjeeling-1 {
    background: rgba(254, 219, 77);
}

.darjeeling-2 {
    background: rgba(120, 152, 189);
}

.scroll-container-darjeeling::-webkit-scrollbar-track {
    background: rgba(254, 219, 77);
    border-radius: 5px;
}

.scroll-container-darjeeling::-webkit-scrollbar-thumb {
    background: rgba(120, 152, 189);
    border-radius: 5px;
}

.aquatic-1 {
    background: rgba(242, 79, 38);
}

.aquatic-2 {
    background: rgba(155, 255, 249);
}

.scroll-container-aquatic::-webkit-scrollbar-track {
    background: rgba(242, 79, 38);
    border-radius: 5px;
}

.scroll-container-aquatic::-webkit-scrollbar-thumb {
    background: rgba(155, 255, 249);
    border-radius: 5px;
}

.tenenbaums-1 {
    background: rgba(199, 121, 18);
}

.tenenbaums-2 {
    background: rgba(210, 25, 30);
}

.scroll-container-tenenbaums::-webkit-scrollbar-track {
    background: rgba(199, 121, 18);
    border-radius: 5px;
}

.scroll-container-tenenbaums::-webkit-scrollbar-thumb {
    background: rgba(210, 25, 30);
    border-radius: 5px;
}

.rushmore-1 {
    background: rgba(36, 34, 55);
}

.rushmore-2 {
    background: rgba(237, 37, 24);
}

.scroll-container-rushmore::-webkit-scrollbar-track {
    background: rgba(36, 34, 55);
    border-radius: 5px;
}

.scroll-container-rushmore::-webkit-scrollbar-thumb {
    background: rgba(237, 37, 24);
    border-radius: 5px;
}

.bottle-rocket-1 {
    background: rgba(251, 221, 87);
}

.bottle-rocket-2 {
    background: rgba(164, 194, 97);
}

.scroll-container-bottle-rocket::-webkit-scrollbar-track {
    background: rgba(251, 221, 87);
    border-radius: 5px;
}

.scroll-container-bottle-rocket::-webkit-scrollbar-thumb {
    background: rgba(164, 194, 97);
    border-radius: 5px;
}

/* nav bar */

.logo-text {
    font-size: 1rem;
}

.nav-link {
    color: black;
    margin-right: 1rem;
}

.dropdown-item.active {
    color: black;
    text-decoration: underline;
    background-color: white;

}

a {
    color: black;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0;
}

.menu {
    font-size: 0.7rem;
    padding-top: 0.25rem;
}

.dropdown-toggle {
    padding: 0 0.5rem;
    border: none;
    background-color: white;
}

.show {
    outline: none;
}

/*poster link on about page */

.poster-link:hover,
.poster-link:focus {
    opacity: 0.7;
}

/* general, focus, hover, active */

.hidden {
    visibility: hidden;
}

.head {
    padding: 1rem 1rem 0 1rem;
    width: fit-content;
}

.br {
    border-radius: 5px;
}

.nav-link:hover,
.nav-link:focus,
.normal-link:hover,
.normal-link:focus,
.active,
.navbar-brand:hover,
.navbar-brand:focus,
.trailer:hover,
.trailer:focus,
.wiki:hover,
.sign-button:hover,
.sign-button:focus,
.wiki:focus {
    color: black;
    text-decoration: underline;
    text-shadow: 0 5px 18px black;
}

.icon-button:hover,
.icon-button:focus,
#deleteConfirm:hover,
#deleteConfirm:focus {
    box-shadow: 0 5px 18px black;
    cursor: pointer;
}

.no-blue-focus:focus {
    border: black;
    outline: none;
    box-shadow: 0 5px 18px black;
}

/* poster container */

.film-image-container {
    display: grid;
    min-height: 50vh;
}

.film-poster-container {
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    position: relative;
}

/* film info container */

.film-info {
    grid-column: 1;
    grid-row: 1;
    z-index: 0;
}

.close-cont {
    display: inline-block;
    margin: 1rem;
    margin-right: auto;
}

.close {
    font-size: 1.5rem;
    padding: 0 0.25rem;
}

.trailer {
    padding: 0.5rem;
    margin: 5%;
    width: fit-content;
}

.bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
}

.bottom-left {
    position: absolute;
    bottom: 0px;
    left: 0px;
}

/* scroll container learnt from https://www.youtube.com/watch?v=3yfswsnD2sw */

::-webkit-scrollbar-track {
    background: rgb(164, 194, 97);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: rgb(251, 221, 87);
    border-radius: 5px;
}

::-webkit-scrollbar {
    width: 1rem;
}

.scroll-container {
    display: grid;
    gap: 1rem;
    grid-auto-flow: column;
    grid-auto-columns: 75%;
    padding: 0 1rem 1rem 1rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    width: 100%;
    margin: 0 auto
}



.scroll-container::-webkit-scrollbar {
    height: 0.5rem;
}

.scroll-container figure {
    display: grid;
    grid-template-rows: min-content;
    gap: 1rem;
    padding: 1rem;
    border-radius: 5px;
}

.snaps-inline {
    scroll-snap-type: inline mandatory;
    scroll-padding-inline: 1rem;
}

.snaps-inline>* {
    scroll-snap-align: start;
}

blockquote {
    padding: 0.5rem;
    background-color: white;
    width: fit-content;
    border-radius: 5px;
    overflow-wrap: anywhere;

}

.info-comment {
    padding: 0.5rem;
    background-color: white;
    width: fit-content;
    border-radius: 5px
}

blockquote::before {
    content: "“";
}

blockquote::after {
    content: "”";
}

.figure-heading {
    background-color: white;
    padding: 0.5rem;
    width: fit-content;
    overflow-wrap: anywhere;
}

.full-width-snap {
    grid-auto-columns: 95%;
    width: 95%;
}

/* login and register page */

.login input {
    display: block;
}

#id_remember {
    display: inline-block;
}

#hint_id_password1  {
    display: none;
}

/* form style */

.textarea.form-control,
.textInput {
    outline: none;
    box-shadow: none;
    }

.textarea.form-control:focus,
.textInput:focus {
    border: black;
    outline: none;
    box-shadow: 0 5px 18px black;
    }

.select.form-control:focus {
    border: black;
    outline: none;
    box-shadow: 0 5px 18px black;
}

.score-form div {
    padding: 0 1rem 0 0;
}    

/* modal style */

#deleteConfirm {
    background-color: rgba(120, 66, 131);
    }

/*media queries*/

@media (max-width: 340px) {
    .logo-text {
        font-size: 0.85rem;
    }

    .icon-logo {
        width: 2.5rem;
    }

    .icon {
        width: 1.5rem;
    }

    .footer-text {
        font-size: 0.75rem;
    }
}

@media (min-width: 768px) {
    .full-width-snap {
        width: 75%;
        grid-auto-columns: 75%;
    }
}

@media (min-width: 991.98px) {
    .film-container {
        padding: 0 2rem;
    }

    .scroll-container {
        grid-auto-columns: 75%;
    }

    .lg-width {
        width: 75%;
    }
}