@import url("https://use.typekit.net/vrb8vtl.css");
body{
    font-size: 24px;
    background-color: #04094E;
    font-family: "Space Grotesk", sans-serif;
    font-style: normal;
    color: white;
    background-image:
    linear-gradient(to right, #e0e0e01b 1px, transparent 1px),
    linear-gradient(to bottom, #e0e0e01b 1px, transparent 1px);
    background-size: 80px 80px;
}
p{
    line-height: 140%;
}
.accueil{
    margin-bottom: 90px;
}
.nav{
    border-bottom: 1px solid #ffffff;
    padding: 0px 45px;
}
.liste__nav{
    display: flex;
    justify-content: space-around;
    padding-left: 0px;
}
.liste{
    list-style: none;
}

a{
    text-decoration: none;
    color: white;
    transition: font-size 0.2s ease-in-out;
}
.a__nav:hover{
    font-size: 30px;
}
.a__nav--actif{
    color: #b5f800;
}

.zendots{
    font-family: "ethnocentric", sans-serif;
    font-style: normal;
    font-weight: 400;
}

.h1{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 106px;
    margin: 258px 0px 172px 0px;
}
.h1 span{
    font-size: 45px;
    color: #b5f800;
    text-shadow: 
    0 0 1px #b5f800,
    0 0 3px #d9ff6f;
}
h2{
    font-size: 56px;
    margin: 168px 0px 56px 56px;
}
.fontsize__30{
    font-size: 30px;
    display: inline-block;
    max-width: 50ch;
    margin: 60px 30px 60px 30px;
}
.fontsize__37{
    font-size: 37px;
    font-weight: bold;
}
.accroche{
    display: flex;
    border-style: solid;
    border-color:#ffffff;
    border-width: 3px;
    border-radius: 16px;
    background-color:#04094E;
}
.accroche__contenu{      
    display: flex;
    flex-direction: column;
}
.accroche__img{
    width: 30%;
    height: auto;
    border-radius: 16px;
}
.contenu__encadre{
    display: flex;
    justify-content: space-between;
    margin-bottom: 112px;
}
.contenu__encadre p{
    max-width: 40ch;
    margin: 24px 56px;
}

footer{
    height: 415px;
    background-image: url("images/footer2.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: bottom center;
    display: flex;
    justify-content: center; 
    align-items: center; 
}
.menu__button{
 display: none;
}

.no-scroll{
    overflow: hidden;
}
/*------------ animation ------------*/
.texte__accueil{
    display: flex;
    flex-direction: column;
    margin: 48px 45px;
    font-family: "Major Mono Display", monospace;
    font-weight: 900;
    font-style: normal;
    font-size: 19px;
}
.texte__accueil--anime span{
    position: relative;
}
.texte__accueil--anime span::before{
    content: "206475 2064C3A96AC3A0 207675";
    color:#b5f800;
    animation: words 15s infinite;
}
.texte__accueil--anime span::after{
    content: "";
    position: absolute;
    width: calc(100% + 8px);
    height: 100%;
    background-color:#04094E;
    border-left: 2px solid white;
    right: -8px;
    animation: cursor .8s infinite, typing 29s steps(26) infinite;
}


@keyframes cursor{
    to{
        border-left: 2px solid #04094E;
    }
}

@keyframes words {
    0%, 100%{
        content: "206475 2064C3A96AC3A0 207675";
    }
}
@keyframes typing {
    10%,15%,30%,35%,55%,70%,90%,95%{
        width: 0;
    }
    5%,20%,25%,40%,60%,65%,80%,85%{
        width: calc(100% + 8px);
    }   
}

/*----------ressources----------*/
.ressources__el{
    border: solid #ffffff 3px;
    border-radius: 8px;
    list-style: none;
    margin: 24px 56px;
    padding: 24px;
}
.ressources__a{
    display: flex;   
}
.ressources__a:hover{
    color: #b5f800;
}
.ressources__h2{
    font-size: 45px;
    margin: 45px;
}
.ressources__img{
    width: 50%;
    height: 50%;
    border-radius: 8px;
}
.ressources__contenu p{
    margin: 24px 45px;
}
@media (max-width: 1200px){

    .nav{
        padding: 0px 34px;
        border-bottom: none;
    }
    .h1__ressources{
       font-size: 86px; 
    }
    /*-------------burger menu---------------*/
    .menu__toggle{
        display: block;
        position: fixed;
        top: 20px;
        right: 20px;
        cursor: pointer; 
        z-index: 20;
        background-color: transparent;
        width: 40px;
        height: 40px;
        border: none;
    }
    .burger-icon {
        width: 32px;
        height: 32px;
    }
    .line {
        stroke: white;
        stroke-width: 2;
        stroke-linecap: round;
        transition: transform 0.3s ease-in-out;
        transform-origin: center;
        transform-box: fill-box;
    }
    .menu--open .line-top {
        transform: translateY(4px) rotate(45deg);
    }
    .menu--open .line-bottom {
        transform: translateY(-4px) rotate(-45deg);
    }
    .menu__liste{
        display: flex;
        flex-direction: column;
        align-items: center;
        position: fixed;
        top: 0px;
        left:0;
        width: 100%;
        height: 100%;
        margin: 0 ;
        padding: 18px 0 0 0 ;
        z-index: 10;
        background-color:#04094E;
        color: rgb(255, 255, 255);
        transform: translateX(-100%);
        transition: transform 0.4s ease-in-out;
    }
    .menu__el{
        padding: 22px;
        font-size: 22px;
    }
    .menu--open {
        .menu__liste{
            transform: translateX(0) ;
        }
        .burgermenu__closed{
        display: none;
        }
        .burgermenu__open{
        display: block;
        }
    }
    .burgermenu__closed{
        display: block;
    }
    .burgermenu__open{
        display: none;
    }
    button span{
        position: absolute;
        opacity: 0;
    }  
    @media (max-width:800px){
        body{
            font-size: 18px;
        }
        .accueil{
            margin-bottom: 68px;
        }
        .a__nav:hover{
        font-size: 22px;
        }
        .h1{
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 52px;
            margin: 156px 18px 156px 18px;
        }
        .h1 span{
        font-size: 27px;
        }
        h2{
            font-size: 34px;
            margin: 68px 18px 68px 18px;
        }
        .accroche__img{
            width: 70%;
            height: 70%;
        }
        .fontsize__30{
            font-size: 22px;
            max-width: 55ch;
            margin: 44px 22px 44px 22px;
        }
        .fontsize__37{
            font-size: 27px;
        }
        .accroche{      
            display: flex;
            flex-direction: column;
            align-items: center;
            border-style: solid;
            border-color: #ffffff;
            border-width: 3px;
            border-radius: 16px;
        }
        .contenu__encadre{
            display: block;
            margin: 22px 22px;
        }
        .contenu__encadre p{
            max-width: 55ch;
            margin: 18px 0px;
        }
    
        footer{
            height: 315px;
            display: flex;
            justify-content: center; 
            align-items: center; 
        }
    
        /*-------animation----------*/
        .texte__accueil{
            margin: 44px 22px;
            font-size: 15px;
        }
    
        /*-----------ressources----------*/
        .h1__ressources{
            font-size: 42px;
        }
        .ressources__h2{
            font-size: 27px;
            margin: 27px 0px;
        }
        .ressources__el{
            margin: 24px 22px;
            padding: 24px;
        }
        .ressources{
            padding: 0px;
        }
        .ressources__contenu p{
            margin: 18px 0px;
        }
    }
}