/* GENERAL */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600&display=swap');

* {
margin: 0%;
padding: 0;
}

body {
    font-family:"Be Vietnam Pro", sans-serif;
    background-color: rgb(10 10 10 / 100);
    text-align: center;
}

.logo img{
 min-width: 90px;
}

.gribouillages__txt{
    padding-top: 4vh;
    height: 0vh;
    margin: 0 1rem;
}

.slider__img{
   max-height: 105vh;
   margin-top: 5vh;
}

#slider {
    /* position: relative;
    width: 1080px;
    margin: auto;
    display: flex; */
    align-items: center;
}

#precedent, #suivant {
    position: absolute;
    font-size: 50px;
    top: 70vh;
    background-color: rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    opacity: 0;
    transition: opacity 300ms ease;
    margin-top: 5vh;
}

#precedent{
    left: 15%;
}

#suivant{
    right: 15%;
}

#slider:hover #precedent, #slider:hover #suivant{
    opacity: 1;
}

html{
    scroll-behavior: smooth;
}

h1{
     color: #202230;
}

p{
    color: rgb(200, 200, 200);
    font-size: 20px;
}

/* TRANSITION */

a, .btn{
    transition: all 300ms ease;
}

/* DESKTOP NAV */

nav,
.nav-links {
    display:flex
}

nav{
    justify-content: space-around;
    align-items: center;
    height: 28vh;
    background-color: #f3d60e;
}

.nav-links{
   gap: 2rem;
   list-style: none;
   font-size: 1.2rem;
}

a{
    color: #202230;
    text-decoration: none;
}

a:hover{
    color:white;
    text-decoration: underline 0.2rem;
    text-underline-offset: 1rem;
    transition: all 100ms ease;
    /* text-decoration-color: brown; */

}

.logo{
 
}

.logo:hover{
    cursor: pointer;
}

/* HAMBURGER MENU */

#hamburger-nav{
    display: none;
}

.hamburger-menu{
    position: relative;
    display: inline-block;
}

.hamburger-icon{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 24px;
    width: 30px;
    cursor: pointer;
}

.hamburger-icon span{
    width: 100%;
    height: 2px;
    background-color: #202230;
    transition: all 0.3 ease-in-out;
}

.menu-links{
    position: absolute;
    top: 100%;
    right: 0;
    background-color: white;
    width: fit-content;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3 ease-in-out;
}

.menu-links a{
    display: block;
    padding: 5px;
    text-align: center;
    font-size: 1.5rem;
    color: #202230;
    text-decoration: none;
    transition: all 0.3 ease-in-out;
}

.menu-links li{
    list-style: none;
}

.menu-links.open{
    max-height: 300px;
}

.menu-links :hover{
    background-color: #f3d60e;
}

.hamburger-icon.open span:first-child{
    transform: rotate(45deg) translate(10px, 5px);
}

.hamburger-icon.open span:nth-child(2){
    opacity: 0;
}

.hamburger-icon.open span:last-child{
    transform: rotate(-45deg) translate(10px, -5px);
}

.hamburger-icon span:first-child{
    transform: none;
}

.hamburger-icon span:first-child{
    opacity: 1;
}

.hamburger-icon span:first-child{
    transform: none;
}