@font-face {
    font-family: "Chillax";
    src: url();
}
@font-face {
    font-family: "Sentient";
    src: url(../Fonts/Sentient-Variable.ttf);
}
.chillax{
    font-family: "Chillax";
    font-weight: 500;
}
.sentient{
    font-family: "Sentient";
    font-weight: 500;
}
figcaption{
    font-size: 11px;
}
.nav{
    background-color: #010029;
    color: white;
}
.nav a{
    color: white;
    text-decoration: none;
}
.nav__liste{
    list-style: none;
    display: flex;
    justify-content: start;
    margin: 0;
}
.nav__el{
    padding: 20px 0px 20px 35px;
}
.img__design{
    margin-bottom: 0;
}
@media (max-width: 600px){

    .nav__toggle{
        display: block;
        position: sticky;
        top: 10px;
        left: 10px;
        background-image: url(../icons/menu.svg);
        background-repeat: no-repeat;
        width: 24px;   
        height: 24px;
        background-position: center;
        background-size: contain;
        text-indent: 11100px;
        overflow: hidden;
        white-space: nowrap;
    }
    .nav__liste{
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        z-index: 10;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;  
    }
    .nav--open .nav__liste{
        transform: translateX(0);   
    }
    .nav{
        background: linear-gradient(270deg,rgba(58, 0, 140, 1) 0%, rgba(20, 0, 41, 1) 100%);
    }
    .nav__el{
        margin-top: -20px;
    }
}
@media (min-width: 600px){
    .nav__toggle{
        display: none;
    }
}
@media (min-width: 600px){
     .nav__liste{
        justify-content: end;
        margin-right: 60px;
    }
}
img{
    max-width: 100%;
    box-shadow: 3px 3px 13px 2px rgba(0,0,0,0.20);
}
body{
    font-family: "Supreme";
    margin: 0;
}
.angkor{
    font-family: "Angkor", serif;
    font-size: 45px;
    font-weight: 400;
    margin: 0;
    margin-top: 50px;
}
.headersomme{
    background: linear-gradient(270deg,rgba(58, 0, 140, 1) 0%, rgba(20, 0, 41, 1) 100%);
    color: white;
    padding: 20px 47px 34px 47px;
    text-align: center;
}
.paragraphe{
    font-size: 16px;
    line-height: 150%;
    margin: 0;
}
.underline{
    text-decoration: underline;
    text-underline-offset: 16%;
    font-size: 32px;
    font-weight: 700;
    margin: 31px 0 27px 0;
    text-align: center;
    white-space: nowrap;
}
h3{
    font-size: 23px;
    margin: 40px 0 19px 0;
}
.mainsomme{
    margin-inline: 40px;
    display: flex;
    flex-direction: column;
}
.img{
    border-radius: 5px;
    object-fit: cover;
}
.code__imgs{
    display: flex;
    gap: 10px;
    margin: 0px 0 16px 0;
}
.img--code{
    width: 60%;
    height: auto;
}
.img--resp{
    width: 40%;
    height: auto;
}
.design__grid{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.design__police{
    display: flex;
    justify-content: center;
    gap: 30px;
}
.design__police p{
    margin: 0px 0 0 0;
}
.design__police h4{
    margin: 16px 0 0 0;
}
.design__h4{
    margin: 0;
}
.design__chillax{
    justify-items: center;
}
.design__sentient{
    justify-items: center;
}
.circles{
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.img--footer{
    margin: 16px 0 16px 0;
}

.circle{
    width: 86px;
    height: 86px;
    border-radius: 50%;
    margin: 24px 0 39px 0;
}
.circle--1{
    background-color:#151515;
}
.circle--2{
    background-color:#DCE1DE;
}
.circle--3{
    background-color:#2A3EF0;
}
.somebtn{
    display: inline-block;
    padding: 9px 45px 9px 45px;
    border-radius: 20px;
    box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);
    transition: 0.2s ease;
    color: black;
    text-decoration: none;
    font-size: 23px;
    white-space: nowrap;
    margin: 57px 0 32px 0;
}
.somebtn:hover{
    scale: 1.05;
    background-color: black;
    color: white;
    cursor: pointer;
    border-color: black;
}
footer{
    display: flex;
    flex-direction: column;
    background-color: #140029;
    color: white;
    align-items: center;
    padding-bottom: 5px;
    padding-top: 15px;
    gap: 13px;
}
.mainsomme, .design, .code, .intro{
    display: flex;
    flex-direction: column;
    align-items: center;
}
@media (min-width: 1024px){
    .grid{
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: 1fr 1fr;
        column-gap: 20px;
        margin-inline: 20px;
    }
    .underline{
        margin-bottom: 0;
        grid-row: 1/2;
        margin: 39px 0 13px 0;
        font-size: 29px;
    }
    .intro__paragraphe{
        grid-column: 1/5;
    }
    .design{
    display: flex;
    margin-inline: 20px;
    }
    .img--debut{
        width: 50%;
        height: 50%;
    }
    
    .img--footer{
        grid-column: 1/3;
        grid-row: 1/3;
        margin: 0;
        object-fit: cover;
    }
    .design__design{
        display: flex;
        gap: 20px;
        flex-direction: column;
        align-items: center;
        margin-bottom: 10px;
    }
    .design__imgs{
        display: flex;
        gap: 20px;
    }
    .design__grid{
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(2, 1fr);
        column-gap: 20px;
        margin-top: -36px;
    }
    .design__paragraphe{
        grid-column: 3/5;
        grid-row: 1/2;
        align-self: flex-end;
    }
    .circles{
        grid-column: 3/5;
        grid-row: 2/3;
        justify-content: space-evenly;
    }
    .circle{
        width: 112px;
        height: 112px;
    }
    .design__h4{
        grid-column: 5/6;
        align-self: center;
        justify-self: center;
        font-size: 20px;
        margin-top: 85px;
    }
    .design__police{
        grid-column: 5/6;
        flex-direction: column;
        gap: 0;
        margin-top: -80px;
    }
    .code__section{
        display: flex;
        flex-direction: column-reverse;
    }
    .code{
        align-items: start;
    }
    .img--resp{
        max-width: 411px;
        max-height: 265px;
    }
    .img--code{
        max-width: 560px;
        max-height: 265px;
    }
    .code__imgs{
        justify-content: center;
        flex-direction: row-reverse;
        gap: 50px;
    }
    .code__paragraphe{
        margin-right: 27%;
        margin-bottom: 25px;
    }
    .somebtn{
        align-self: center;
    }
    .paragraphe{
        font-size: 20px;
    }
    .angkor{
        font-size: 90px;
    }
    h3{
        font-size: 29px;
    }
    
    .h4{
        font-size: 29px;
    }
    .design h3{
        align-self: start;
    }
    .code h3{
        margin-bottom: 7px;
    }
}
@media (min-width:1024px) and (max-width:1360px){
    .circle{
        width: 86px;
        height: 86px;
    }
}
.btnfin{
    margin-block: 20px;
    display: flex;
    justify-content: center;
    margin-inline: 50px;
    gap: 20px;
}
.btnend{
    padding: 14px 60px 14px 60px;
    margin-bottom: 20px;
    box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);
    transition: 0.2s ease;
    color: black;
    border-radius: 20px;
}
.btnend:hover{
    background-color: black;
    color: white;
}
.headersomme__txt{
    margin-inline: 15%;
}

.beyondtellerandbtn{
    color: black;
    text-decoration: underline;
    text-decoration-color: #000000;
    text-underline-offset: 16%;
    transition: ease 0.2s;
}
.beyondtellerandbtn:hover{
    opacity: 0.6;
}