html, body {
    margin: 0;
    padding: 0;
    position: relative;
    font-family: Lato, sans-serif;
}

body {
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(172deg, #460079, #0f2f4f);
    color: #fff;
}

main {
    max-width: 1200px;
    margin: 20px auto;
}

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
}
#soyons-clairs {
    margin: 50px auto;
}
#soyons-clairs h1 {
    font-size: 6em;
    text-align: center;
    text-shadow: 5px 0px 25px #000;
}
#soyons-clairs h1 .pron {
    font-size: .5em;
    font-weight: 400;
    position: relative;
    bottom: 20px;
    color: #ffffff82;
}
/*#soyons-clairs::before {
    content: "";
    position: absolute;
    top: -85px;
    left: 200px;
    width: 500px;
    height: 500px;
    background-image: url("../_imgs/un_reel.png");
    background-repeat: no-repeat;
    opacity: 0.6;
    z-index: -1;
}*/


.oui {
    color: #81ff81;
    font-weight: 900;
}
.souligne {
    position: relative;
    display: inline-block;
}
.souligne::after { 
    content: ""; 
    position: absolute; 
    left: 5px; 
    top: 97%; 
    height: 10px; 
    width: 0; 
    background: green;
    animation: souligne 4s infinite; 
}

@keyframes souligne { 0% { width: 0; } 20% { width: 160px; } 80% { width: 160px; } 100% { width: 0; } }
.non {
    color: #ff6b6b;
    font-weight: 900;
}
.barre {
    position: relative;
    display: inline-block;
}
.barre::after { 
    content: ""; 
    position: absolute; 
    left: -15px; 
    top: 58%; 
    height: 10px; 
    width: 0; 
    background: red;
    animation: barre 4s infinite; 
}

@keyframes barre { 0% { width: 0; } 20% { width: 200px; } 80% { width: 200px; } 100% { width: 0; } }

.flexouille {
    display: flex;
    align-items: center;
}

#explication {
    margin: 64px auto;
}
#explication h2 {
    line-height: 1.5em;
    letter-spacing: 0.025em;
    font-weight: 900;
    text-shadow: 2px 2px 2px #000;
}
#explication img {
    width: 540px;
}
.m-rl-32 {
    margin: 0 32px;
}
.image-wrapper {
  position: relative;
  display: inline-block;
}

.image-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  filter: blur(20px);
  transform: translate(10px, 10px) scale(0.95);
  z-index: -1;
  border-radius: 40% 65% 50% 70%;
}

#science {
    line-height: 1.4em;
    letter-spacing: 0.02em;
    font-weight: 300;
}


.small-text {
    font-size: 0.75em;
}

footer {
    padding: 10px 0;
    width: 100%;
    text-align: center;
}

footer p {
    font-size: 0.8em;
    margin: 5px;
    color: #ffffff80;
}
footer a {
    color: #fff;
}


@media all and (max-width: 1250px) {
    .sm-flex {
        flex-direction: column-reverse;
    }
    #soyons-clairs h1 {
        margin: auto auto 0 auto;
    }
    #soyons-clairs img {
        width: 200px;
    }
}

@media all and (max-width: 960px) {
    .flexouille {
        flex-direction: column;
    }
}

@media all and (max-width: 540px) {
    #soyons-clairs h1 {
        font-size: 5em;
    }
    #explication img {
        width: 100%;
    }

    @keyframes souligne { 0% { width: 0; } 20% { width: 135px; } 80% { width: 135px; } 100% { width: 0; } }

    @keyframes barre { 0% { width: 0; } 20% { width: 165px; } 80% { width: 165px; } 100% { width: 0; } }
}