@font-face {
    font-family: 'Dancing Script';
    src: url('../font/DancingScript-VariableFont_wght.ttf') format('truetype');
}

* {
    font-family: "Dancing Script";
}

:root {
    --custom-dark-blue-color: #0a5773;
    --custom-light-blue-color: #0a8cbb;
    --custom-green-color: #C2D76B;
    --custom-light-red-color: #D42633;
    --custom-dark-red-color: #A92831;
    --custom-black-color: #333031;
}

.home-title-logo {
    position: absolute;
    left: 5px;
    width: 85px;
}

.home-title {
    text-decoration: none;
    color: white;
    font-weight: bold;
}

.home-logo {
    max-width: 350px!important;
}

.slider-image {
    width: 100%;
    max-width: 550px;
    max-height: 650px;
    border-radius: 15px;
    box-shadow: 15px 15px 15px;
}

.slider-padding {
    padding: 15px;
}

.list-film-image {
    max-height: 650px;
    border-radius: 5px;
}

.text-blue-color {
    color: var(--custom-blue-color);
}

.text-green-color {
    color: var(--custom-green-color) ;
}

.text-light-red-color {
    color: var(--custom-light-red-color);
}

.text-dark-red-color {
    color: var(--custom-dark-red-color);
}

.text-black-color {
    color: var(--custom-black-color);
}

.bg-dark-blue-color {
    background-color: var(--custom-dark-blue-color);
}

.bg-light-blue-color {
    background-color: var(--custom-light-blue-color);
}

.bg-dark-red-color {
    background-color: var(--custom-dark-red-color)!important;
}

.bg-black-color {
    background-color: var(--custom-black-color);
}

.bg-black-color-opacity {
    background-color: rgb(51, 48, 49, 0.75);
}

.hover-reservation {
    position: absolute;
    padding: 15px;
    display: none;
}

.navbar-brand::first-letter {
    color: var(--custom-green-color);
}

.nav-item::first-letter {
    color: var(--custom-green-color);
    font-weight: bold;
}

.nav-link {
    color: white!important;
}

.text-font-size {
    font-size: 1.3rem;
} 

.list-group-horizontal-sm {
    justify-content: center;
}

.title-ligne {
    margin: auto;
    text-align: center;
    border: 1px solid var(--custom-green-color);
    width: 35%;
    margin-top: -3px;
}

.news-container {
    background-color: var(--custom-light-blue-color);
    margin: 15px 0px!important;
    border-radius: 0.375rem;
}

.news-container-film {
    background-color: var(--custom-light-blue-color);
    margin: 15px 0px!important;
    border-radius: 0.375rem;
}

.custom-slider {
    position: relative;
    margin: 15px 0px!important;
}

.custom-slider-image-main {
    width: 35%!important;
}

.custom-slider-image-other {
    width: 20%!important;
}

.custom-slider-arrow-container {
    position: absolute;
}

.custom-slider-arrow-left {
    position: absolute;
    width: auto!important;
    font-size: 25px;
    color: white;
    z-index: 1;
}

.custom-slider-arrow-left:hover {
    scale: 1.5;
    transition: scale 500ms;
}

.custom-slider-arrow-left:not(:hover) {
    scale: 1;
    transition: scale 500ms;
}

.custom-slider-arrow-left:active {
    scale: 1;
    transition: scale 150ms;
}

.custom-slider-arrow-right {
    position: absolute;
    width: auto!important;
    font-size: 25px;
    color: white;
    right: 0;
    z-index: 1;
}

.custom-slider-arrow-right:hover {
    scale: 1.5;
    transition: scale 500ms;
}

.custom-slider-arrow-right:not(:hover) {
    scale: 1;
    transition: scale 500ms;
}

.custom-slider-arrow-right:active {
    scale: 1;
    transition: scale 150ms;
}

.movie-description {
    bottom: 0;
    position: absolute;
    transform: translateY(650px);
    transition: transform 500ms;
}

.card {
    overflow: hidden;
    position: relative;
}

.card:hover {
    scale: 1.05;
    transition: scale 500ms;
}

.card:not(:hover) {
    scale: 1;
    transition: scale 500ms;
}

.card:hover + .film-background {
    transform: translate(0px, 0px);
    transition: transform 500ms;
}

.card:not(:hover) + .film-background {
    transform: translate(50px, 50px);
    transition: transform 500ms;
}


.card:hover .movie-description {
    transform: translateY(0px);
}

.film-container-news {
    background-color: var(--custom-light-blue-color);
    margin: 15px 0px!important;
    border-radius: 0.375rem;
}

.nav-item:hover {
    scale: 1.5;
    transition: scale 500ms;
}

.nav-item:not(:hover) {
    scale: 1;
    transition: scale 500ms;
}

.btn:hover {
    scale: 1.15;
    transition: scale 500ms;
}

.btn:not(:hover) {
    scale: 1;
    transition: scale 500ms;
}

input:not(:focus):invalid {
    background: var(--custom-light-red-color);
    border: 2px solid var(--custom-light-red-color);
    color: black;
}

.navbar {
    border-radius: 0 0 85% 85% / 30%;
}

.film-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1%!important;
    margin-bottom: 5%!important;
    padding: 0px!important;
}

.film-background {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.65;
    box-shadow: 0 0 10px 10px #ebebeb inset, 0 0 30px 20px #ebebeb inset, 0 0 50px 30px #ebebeb inset;
    border-radius: 5px;
    background-size: contain;
    background-repeat: no-repeat;
    transform: translate(50px, 50px);
}

.text-content {
    font-size: 1.25rem;
    font-family: Calibri;
    text-align: justify;
}

.news {
    box-shadow: 5px 5px 20px 0px;
    margin-bottom: 5%;
}

.up-page {
    position: fixed;
    background-color: black;
    right: 15px;
    bottom: 15px;
    z-index: 1;
    border-radius: 5px;
    font-size: 25px;
    color: white;
    padding: 5px;
    display: none;
}

.card-title {
    text-decoration: underline;
}

.list-group-item a {
    text-decoration: none;
    color: black;
}

@media screen and (max-width: 1200px) {
    .news-container {
        background-color: white;
        margin: auto;
    }

    .news-container-film {
        display: none;
    }

    .film-container-news {
        display: none;
    }

    .up-page {
        display: block;
    }
}

@media screen and (max-width: 992px) {
    .nav-font-size {
        font-size: 3vw;
    }

    .text-font-size {
        font-size: 1.25rem;
    }

    .movie-content {
        font-size: 1rem;
    }

    .navbar-toggler-icon {
        width: 1em!important;
        height: 1em!important;
    }

    .film-container {
        margin-bottom: 15%!important;
    }

    .home-logo-container {
        display: none!important;
    }
}

@media screen and (min-width: 992px) {
    .nav-font-size {
        font-size: 1.3vw;
    }

    .navbar-nav > .nav-item {
        margin: 0px 15px;
    }

    .navbar-brand {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .nav-font-size {
        font-size: 5vw;
    }

    .film-container {
        margin-top: 5%!important;
        margin-bottom: 15%!important;
    }
}

@media screen and (max-width: 576px) {
    .movie-description {
        bottom: 0;
        position: absolute;
        transform: translateY(0px);
    }

    .film-container {
        margin-top: 5%!important;
        margin-bottom: 15%!important;
    }
}