:root {
    --bg-color: #E0E2E8;
    --lightgrey-color: #B0C0D4;
    --bg2-color: #5DA5B3;
    --grey-color: #394054;
    --black-color: #1C1C1F;
    --section-width: 1200px;

}
@font-face {
    font-family: 'play-bold';
    src: url("fonts/Play/Play-Bold.ttf") format("truetype");
}
@font-face {
    font-family: 'play' ;
    src: url("fonts/Play/Play-Regular.ttf") format("truetype");
}


body{
    background-color: var(--bg-color);
    margin: 0;
    padding: 0;
}
p {
    font-family:'play';
    font-size: 18px;
    
}
h1, h2{
    font-family: 'play-bold';
    font-size: 50px;
}

hr {
    height: 2px;
    border: none;
    background-color: var(--black-color);
    max-width: 400px;
    margin-top: 20px;
    margin-bottom: 20px;
}

a {
    text-decoration: none;
}



.section{
    display: flex;
    justify-content: center;
    
}


/* header */




#header{
    display: flex;
    justify-content: center;
    background-color: var(--bg2-color);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
#header-div{
    width: 100%;
    max-width: var(--section-width);
    display: flex;
    padding: 5px;
    justify-content: space-between;
    align-content: center;
}

#logo{
    max-height: 70px;
}

#social{
    display: inline-flex;
    gap: 10px;
    align-items: center;
}
.social{
    max-width: 35px;
}





/* hero */





#hero-section{
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0px 0px;
    min-height: 830px;
}
#hero{
    width: 100%;
    max-width: var(--section-width);
    align-items: center;
    justify-content: space-between;
    display: flex;
}
#pp{
    max-width: 200px;
    border-radius: 120px;
}




/* mes projets */



.boxes-section{
    background-color: var(--lightgrey-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    width: 100%;
}
#projets-title{
    text-align: left;
    width: 100%;
    max-width: var(--section-width);
    margin: 20px 0px;
}

/* mes outils */
#outils-title{
    text-align: left;
    width: 100%;
    max-width: var(--section-width);
}

/*  boxes */
.boxes{
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
    margin: 20px 0px;
    max-width: var(--section-width);
    width: 100%;

}
.box{
    text-align: left;
    background-color: var(--bg-color);
    color: var(--black-color);
    border-color: var(--bg2-color);
    border: 50px;
    padding:10px 20px ;
    border-radius: 20px;
    min-height: 150px;
    max-width: 600px;
    width: 100%;
}
.nameTitle{
    font-family: "play-bold";
    color: var(--grey-color);
}

.hr-section{
    background-color: var(--lightgrey-color);
    padding: 1px; /*permet la continuité entre mes projets et mes outils*/

}






/* footer */





.footer{
    margin: 0px;
}
#footer{
    background-color: var(--bg2-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    padding: 50px 0px;
    }
#footer-start{
    text-transform: uppercase;
    color: #bebcf0;
    font-size: 14px;
}
#footer-tarification{
    color: white;
    font-size: 40px;
    font-family: 'play';
}
#footer-title{
    color: #ffc166;
    font-family: 'play-bold' !important;
    letter-spacing: 2px;
    font-size: 70px;
    text-align: center;
}
#footer-text{
    color: white;
    font-family: 'play';
    max-width: 600px;
}
.white-button{
    background-color: var(--bg-color);
    padding: 1px 0px;
    border-radius: 45px;
    min-width: 225px;
    border-width: 2px;
    border-style:solid;
    border-color: var(--bg2-color);
    color: var(--bg2-color);
    transition-duration: 200ms;
    
}
.white-button:hover{
    background-color: var(--bg2-color);
    border-color: white;
    color: white;
}