@import url('https://fonts.googleapis.com/css?family=Rubik&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Allura&family=Cookie&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

* {
    margin: 0;
    padding: 0;
}

body{
    background-color: rgb(106, 106, 132);
}


header {
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    align-items: center;
    background-color: rgb(106, 106, 132);
    height: 100px;

}

header div {
    width: 70px;
}

header div img {
    width: 100%;
    display: block;

}

nav {
    width: 90%;
    display: flex;
    padding: 5px;
    height: 80px;
    text-align: center;
    align-items: center;
    justify-content: center;
    color: rgb(120, 95, 112);
}

nav a {
    padding-right: 10px;
    padding-left: 10px;
    font-size: 16px;
    color: rgb(198, 182, 193);
    text-decoration: none;
}

#skate {
    display: flex;
    background: url(../images/patin.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100px;
    width: 100px;
    flex-direction: row;

}

#etymologie {
    background-color: rgb(32, 32, 75);
    color: white;
    font-family: 'Cookie', cursive;
    font-size: 20px;
}

#etymologie-texte {
    color: white;
    background-color: rgb(71, 71, 115);
    font-size: 10px;
}

#introduction h1 {
    text-align: left;
    width: 10px;
    color: white;
    margin-right: 80px;
    background-color: rgb(54, 50, 79);
}

#introduction {
    display: flex;
    background-color: rgb(54, 50, 79);
    height: 100px;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
    font-family: 'Allura', cursive;
    font-size: 20px;
}

#biellmannsection {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#article {
    height: 300px;
    width: 20%;
}

h2 {
    background-color: rgba(0, 0, 0, 0.5);
    font-size: 1.2rem;
    padding: 10px;
    margin: 0px;
    color: white;
}

#biellmann1 {
    background-color: rgb(106, 106, 132);
    width: 100%;
    height: 546px;
    flex-direction: column;
    text-align: center;
}

#biellmann-titre {
    height: 100%;
    width: 100%;
    background: url(../images/OIP.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    font-family: 'Allura', cursive;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#biellmann-explication p {
    color: white;
    font-size: 20px;
    width: 100%;
    background-color: rgb(106, 106, 132);
    font-family: 'Open Sans', sans-serif;
    display: block;
    flex-direction: column;
}

#biellmann {
    background: url('../images/R.jpg') center no-repeat;
    background-size: cover;
    background-repeat: no-repeat;
    height: 60vh;
    width: 100%;
}

#lavion {
    background: url('../images/carolina-kostner.jpg') center no-repeat;
    background-size: cover;
    height: 60vh;
    width: 100%;
}

#ley {
    background: url('../images/eecbbd5e14d16944467a3f3f2b6649f9.jpg') center no-repeat;
    background-size: cover;
    height: 60vh;
    width: 100%;
}

#lafenetre {
    background: url('../images/f6ef124c8fef35598b5dfe443e5bee64.jpg') center no-repeat;
    background-size: cover;
    height: 60vh;
    width: 100%;
}

#laigle {
    background: url('../images/R\ \(1\).jpg') center no-repeat;
    background-size: cover;
    height: 60vh;
    width: 100%;
}

h6 {
    background-color: white;
    font-size: 1.2rem;
    padding: 10px;
    margin: 0px;
    color: rgb(55, 55, 99);
}

p {
    background-color: rgb(75, 72, 74);
    opacity: 0.8;
    font-family: 'Open Sans', sans-serif;
}

p {
    color: rgb(194, 194, 194);
}

.asd {
    color: white;
}

h3 {
    background-color: rgb(29, 29, 53);
    color: white;
}

#raison-titre {
    color: white;
    flex-direction: column;
    justify-content: flex-start;
    display: flex;
    height: 374px;
    width: 36%;
}

#raison {
    background-color: rgb(27, 35, 62);
    height: 311px;
    width: 100%;
    font-size: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    color: white;
}

#rt {
    height: 200px;
    width: 50%;
    padding: 10px;
}

#pourquoi {
    background-color: rgb(47, 47, 67);
    color: white;
    flex-direction: column;
    justify-content: flex-start;
    display: flex;
    height: 300px;
    flex-wrap: wrap;
    align-items: stretch;
    margin-top: 400px;
    margin-bottom: 79px;
}

#pourquoi-liste {
    color: white;
    flex-wrap: wrap;
    width: 64%;
    font-size: 16px;
    background-color: rgb(47, 47, 67);
    font-family: 'Open Sans', sans-serif;
}

a {
    color: white;
}

@media screen and (min-width:640px) {

    body{
        background-color: rgb(59, 59, 86);
    }
    #etymologie-texte{font-size: 20px;}

    #etymologie-texte:hover {
        font-size: 26px;
        font-family: 'Open Sans', sans-serif;
    }

    #biellmann:hover {
        font-size: 25px;
    }

    #lavion:hover {
        font-size: 25px;
    }

    #ley:hover {
        font-size: 25px;
    }

    #lafenetre:hover {
        font-size: 25px;
    }

    #laigle:hover {
        font-size: 25px;
    }
    #biellmannselection{display: flex;
    flex-direction: row;
    width: 100%;
flex-wrap: nowrap;}

    nav a{font-size: 20px;}
    #biellmann, #lavion, #ley, #lafenetre,#laigle{background-size: contain;}

    #biellmann-titre{margin-left: 300px;}
#etymologie{font-size: 30px;}
   
}