/* Blocs Principaux */
header{
    padding: 8vh 0;
}
button{
    display: inline-block;
    background-color: white;
    color: red;
    border: red solid 3pt;
    border-radius: 1.4rem;
    padding: 1rem;
    margin-top: 20px;
}
button:hover{
    cursor: pointer;
    border-color: #4f0cbb;
    color: white;
    background-color: rgba(169, 112, 255, 0.8);
}
ul{
    list-style: none;
    padding: 0;
}
section{
    width: 70vw;
    margin: auto;
    padding-top: 2rem;
}
svg{
    fill: white;
}
img{
    width: 100%;
    height: auto;
}
/* IDs */
#home-body{
    padding-top: 0;
}
#section-header{
    padding: 60px;
}
#home-nav li{
    width: 50%;
    font-weight: bold;
}
#home-nav a{
    color: white;
    width: 100%;
    height: auto;
}
#home-nav a:hover, #home-nav a:hover svg{
    text-decoration: none;
    color: #12131c;
    fill: #12131c;
    transition: all .5s;
}
#home-nav a img, #home-nav a svg{
    height: 10vh;
    width: auto;
}
#bg-custom{
    background: url('/images/headers/home-keyboard.webp') center no-repeat;
    background-size: cover;
}
/* Classes */
.blur{
    background: rgba(255, 255, 255, 0.3); /* Make sure this color has an opacity of less than 1*/
    backdrop-filter: blur(15px); /* This be the blur */
}
.no-repeat{
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.w-600{
    width: 600px;
}
.bg-dark{
    background-color: #12131c;
}
.bg-grey{
    background-color: #d1d1d1;
}
.socials{
    width: 40%;
    margin: auto;
    padding-top: 1.5rem;
}
.socials a{
    display: inline-block;
    width: 100%;
    padding: 0 1rem;
    margin-bottom: 20px;
    color: white;
}
.socials a:hover{
    color: #4f0cbb;
    transition: all .5s;
}
.socials a i{
    font-size: 1.5rem;
}
.child-30{
    width: auto;
    margin-bottom: 20px;
}
.child-40 img{
    margin: 40px 0;
}
/* Textes */
h2[class="white"]{
    margin: 0;
    text-align: left;
}

/* MEDIAS QUERIES */
@media screen and (min-width: 700px ){
    img{
        width: 50%;
    }
    #home-nav li{
        width: 33%;
    }
    #accomp h2{
        font-size: 3rem;
    }
    #accomp ul{
        position: relative;
        right: 0;
        top: 0;
        width: 25%;
    }
    .child-30{
        width: 30%;
    }
    .child-30 img, .child-40 img{
        width: 80%;
    }
    .child-40{
        width: 40%;
    }
}
@media screen and (max-width: 899px){
    button{
        display: block;
        margin: auto;
        margin-top: 20px;
    }
    .socials{
        width: 60%;
    }
}