.mobile-exposition-gallery-title{
    display: none;
}
/* Section observatoire */
.observatory-link-button{
    all: unset;
    font-family: Inter;
    font-size: x-large;
    margin-left: 100px;
    color: #005f86;
    background-image: url("../images/bouton-observatoire-header.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 1.5% 5%;
    border-radius: 31px;
}
.observatory-link-button:active{
    animation-name: ObservatoryButtonShadow;
    animation-duration: 0.5s;
}
.observatory-link{
    display: flex;
    justify-content: center;
    padding: 38vh 0;
}

/* Section expositions */
main{
    padding-top: 1%;
}

.exposition-gallery{
    margin: 0 2vw;
}

.exposition-gallery-title{
    font-family: Lora;
    color: #005f86;
}

.exposition-gallery-item-row{
    display: flex;
    justify-content: space-between;
}

.exposition-gallery-item{
    display: flex;
    flex-direction: column;
    gap: 2vh;
}

.exposition-gallery-text{
    font-family: Inter;
    color: #f37551;
    margin-left: 5vw;
}

/* Section texte */
.text-paragraph-row{
    display: flex;
    justify-content: space-evenly;
    margin: 5vh 20vw 5vh 5vw;
}

.text-paragraph{
    display: flex;
    flex-direction: column;
    max-width: 26.3vw;
}

.text-paragraph-title{
    font-family: Lora;
    color: #005f86;
    font-size: 27px;
}

.text-paragraph-contents{
    font-family: Lora;  
}

.exposition-links{  
    display: flex;
    justify-content: space-between;
    padding: 0 2vw 15vh 2vw;
    a{
        font-family: Inter;
        font-style: italic;
        color: #ff8d6d;
    }
    a:hover{
        position: relative;
        animation-name: LowerElement;
        animation-duration: 0.3s;
        animation-fill-mode: forwards;
    }
}
.main-page-header{
    background-image: url("../images/vague-navigation.png"), url("../images/algues-eau-header.jpg");
    background-size: 100vw, cover;
    background-repeat: no-repeat;
}


@media screen and (max-width: 1200px){
    .exposition-gallery{
        display: none;
    }
    .mobile-exposition-gallery-title, .exposition-gallery-title{
        display: flex;
        justify-self: center;
        font-family: Lora;
        color: #005f86;
        font-size: 35px;
    }
    .carousel, .carousel-images{
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .carousel-images{
        gap: 15vh;
    }
    .carousel-first-image, .carousel-third-image, .carousel-second-image{
       display: flex;
       flex-direction: column;
       align-items: center;
       p{
            font-family: Inter;
            color: #f37551;
            font-weight: 600;
       }
    }
    .carousel-first-image, .carousel-third-image{
        img{
            width: 15vw;
            height: auto; 
        }
    }
    .carousel-second-image{
        img{
            width: 27vw;
            height: auto;
        }
    }
    .carousel-control{
        /* Filtre trouvé à l'aide d'une ressource en ligne, trouvable à l'addresse suivante: https://angel-rs.github.io/css-color-filter-generator/ */
        filter: brightness(0) saturate(100%) invert(54%) sepia(74%) saturate(1219%) hue-rotate(328deg) brightness(100%) contrast(91%);;
        img{
            width: 10vw;
            height: auto;
        }
        margin-top: 8vh;
    }
    .text-paragraph-row{
        flex-direction: column;
        gap: 10vh;
        margin: 5vh 0vw 20vh 15vw;
    }
    .text-paragraph-contents{
        width: 50vw;
    }
    .exposition-links{
        a:hover{
            animation-name: none;
        }
        a:active{
            animation-name: GrowText;
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
        }
    }
}
@media screen and (max-width: 1080px){
    .carousel, .mobile-exposition-gallery-title{
        display: none;
    }
    .exposition-gallery{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .exposition-gallery-text{
        font-size: 25px;
        font-weight: bold;
    }
    .exposition-gallery-item-row{
        flex-direction: column;
        gap: 10vh;
    }
    .exposition-gallery-item{
        gap: 0;
    }
    .text-paragraph-row{
        flex-direction: column;
        gap: 10vh;
        margin: 10vh 0vw 20vh 25vw;
    }
    .text-paragraph-contents{
        width: 50vw;
        line-height: 40px;
    }
    .text-paragraph-title{
        margin-left: 4vw;
    }
}