body{
    width : 100vw;
    height:100vh;
    overflow : hidden;
    padding : 0px !important;
    margin : 0px !important;
    font-family: "Lato", "Noto Kufi Arabic", sans-serif;
    fill : white;
}
[lang="ar"], :dir(rtl) {
    font-family: "Noto Kufi Arabic", sans-serif !important;
}
#cover{
    position: fixed;
    top: 0;
    left: 0;
    width: 200vw; /* plus large que le viewport */
    height: auto;
    transition: transform 0.1s linear;
}
#coverWrapper {
    position: fixed;
    top: 0; left: 0;
    width: 200vw; height: 100vh;
    overflow: hidden;
    background-color : #3F3B37;
    opacity : 0.5;
    z-index : 100;
    transition: opacity 0.5s ease;
}
#general-mobile{
    display:none
}
#general{
    width : 95vw;
    margin:auto;
    height:33vh;
    color : white;
    fill:white;
    font-size : 28px;
    text-transform : uppercase;
    text-align :center;
    font-family: "Lato", sans-serif;
    font-weight: 900;
    font-style: normal;
    z-index : 101;
    display:flex;
    flex-flow:row nowrap;
    justify-content: space-between;
    align-items: center;
}
.main-content{
    display:flex;
    flex-flow:column nowrap;
    justify-content: space-around;
    align-items: center;
    gap:34px;
}
#logo{
    width : 100px;
    height : 100px;
    z-index : 101;
}
#fullName{
    font-size : 32px;
    letter-spacing : 4px;
    font-weight: 900;
    width:100%;
    z-index : 101;
}
#infos{
    display:flex;
    flex-flow: row;
    justify-content: center;
    align-items: flex-start;
    font-size : 16px;
    font-weight: 400;
    z-index : 101;
    width:100%;
    gap:34px;
    
}
#infos a{

    z-index : 101;
    cursor : pointer;
    text-decoration : none;
    color : white
}
#lang{
    width:100px;
    height:100px;
    display : flex;
    flex-flow : column nowrap;
    justify-content : center;
    align-items : center;
    z-index : 101;
    gap:12px;
    color:white;
    font-size:16px;
    font-weight:400;
}
#presentation{
    display:block;
    position:fixed;
    top:33vh;
    left:0px;
    width:100vw;
    height:67vh;
    z-index:101;
}
#presentation-box{
    position:absolute;
    bottom : 18vh;
    left:28.5vw;
    width:40vw;
    height:30vh;
    border-style:solid;
    border-color:white;
    border-width:1px;
    border-radius:3px;
    background-color: #AFAFAF;
    opacity:0.7;
    color:#231F21;
    display:flex;
    flex-flow:column nowrap;
    justify-content: center;
    align-items: center;
    text-align:center;
    padding:20px;
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.5);
    font-size : 24px;
    font-weight:300;
    line-height: 50px;
    font-style:italic;
}
.presentation-text{
    position:absolute;
    bottom : 18vh;
    left:28.5vw;
    width:40vw;
    height:30vh;
    padding:20px;
    display:flex;
    flex-flow:column nowrap;
    justify-content: center;
    align-items: center;
    text-align:center;
    font-size : 24px;
    font-weight:300;
    line-height: 50px;
    font-style:italic;
}
.livre-box{
    position:absolute;
    width:50vw;
    left:25vw;
    bottom:5%;
    margin:auto;
    color:white;
    height:80%;
    display:flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items:center;
    text-decoration: none;
}
.livre-box livre-show{
    height:80%;
}
expo-vignette{
    position:absolute;
    width:60vw;
    left:20vw;
    bottom:5%;
}
actu-cover{
    position:absolute;
    width:60vw;
    bottom:5%;
    left:20vw;
}

@media only screen and (max-width: 800px) {
    #general{
        display:none
    }
    html,body{
        width : 98vw !important;
        height:98vh !important;
        overflow : hidden!important;
        padding : 0px !important;
        margin : 0px !important;
        font-family: "Lato", "Noto Kufi Arabic", sans-serif;
        fill : white;
        position:relative;
    }
    #general-mobile{
        position : absolute;
        top:12px;
        left:0px;
        height: 80%;
        width:100vw;
        margin:auto;
        display : flex;
        flex-flow:column nowrap;
        justify-content: space-between;
        align-items: center;
        z-index:101;
    }
    #general-mobile .header{
        width : 100vw;
        display : flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
    }
    #general-mobile .main-content{
        z-index:101; 
    }
    #fullName-mobile{
        
        width:100vw;
        color:white;
        font-size:32px;
        z-index: 101;
        text-transform: uppercase;
    }
    #infos-mobile{
        height: 50%;
        width:100%;
        position :relative;
        display : flex;
        flex-flow:column nowrap;
        justify-content: flex-start;
        align-items: center;
        padding-top:34px;
    }
    #infos-mobile a{
        height:50px;
    }
    #lang-mobile{
        width:100px;
        height:100px;
        display : flex;
        flex-flow : column nowrap;
        justify-content : center;
        align-items : center;
        z-index : 102;
        color:white;
    }
    #presentation{
       display:none
    }
    #presentation-box{
       display:none
    }
    #general-mobile .presentation {
        width:85vw;
        padding:12px;
        opacity:0.8;
        background-color: white;
    }
    .discover{
        position:relative;
        width:250px;
        height:10%;
        background-color: #3F3B37;
        opacity:0.8;
        color:white;
        display:flex;
        flex-flow: column nowrap;
        justify-content: center;
        text-align: center;
        text-decoration: none;
    }
    
  
    
}