/* defaults */


html, body {
    height: 100%;
    background-color: black;
    /* background-color: black; */
}

body {
    font-family: Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
    text-rendering: optimizeLegibility;
}

::selection {
    background-color: rgba(0, 0, 0, 0.25);
    color: white;
}

::-moz-selection {
    background-color: rgba(0, 0, 0, 0.25);
    color: white;
}

ol, ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: black;
}

a :hover {
    z-index: 10000000;
}

.hidden {
    display: none;
}

h1 {
    color: white;
    font-size: 1800%;
    text-align: center;
    margin-top: 10%;
    font-weight: bold;
    font-style: italic;
}
.intro1 {
    position: absolute;
    font-size: 50px;
    border-radius: 40px;
    padding: 15px;
    padding-left: 2%;
    padding-right: 2%;
    text-align: left;
    background-color: mediumpurple;
    top: 40%;
    left: 5%;
}
.intro2 {
    position: absolute;
    font-size: 50px;
    border-radius: 40px;
    padding: 15px;
    padding-left: 2%;
    padding-right: 2%;
    text-align: left;
    background-color: yellowgreen;
    top: 30%;
    left: 30%;
}
.intro3 {
    position: absolute;
    font-size: 50px;
    border-radius: 40px;
    padding: 15px;
    padding-left: 2%;
    padding-right: 2%;
    text-align: left;
    background-color: yellowgreen;
    top: 77%;
    left: 20%;
}
.intro4 {
    position: absolute;
    position: absolute;
    font-size: 50px;
    border-radius: 40px;
    padding: 15px;
    padding-left: 2%;
    padding-right: 2%;
    text-align: left;
    background-color: mediumpurple;
    top: 50%;
    left: 60%;
}

.intro5 {
    color: black;
    position: absolute;
    position: absolute;
    font-size: 50px;
    border-radius: 40px;
    padding: 15px;
    padding-left: 2%;
    padding-right: 2%;
    text-align: left;
    background-color: white;
    top: 12%;
    left: 2%;
}
.intro6 {
    color: black;
    position: absolute;
    position: absolute;
    font-size: 50px;
    border-radius: 40px;
    padding: 15px;
    padding-left: 2%;
    padding-right: 2%;
    text-align: left;
    background-color: white;
    top: 83%;
    left: 70%;
}

.intro7 {
    color: black;
    position: absolute;
    position: absolute;
    font-size: 50px;
    border-radius: 40px;
    padding: 15px;
    padding-left: 2%;
    padding-right: 2%;
    text-align: left;
    background-color: white;
    top: 9%;
    left: 70%;
}

.intro8 {
    position: absolute;
    font-size: 50px;
    border-radius: 40px;
    padding: 15px;
    padding-left: 2%;
    padding-right: 2%;
    text-align: left;
    background-color: mediumpurple;
    top: 4%;
    left: 25%;
}

h2 {
    color: white;
}


.titre1 {
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
   /* border: 6px solid white;*/
    margin-left: 3.9%;
    margin-top: 57%;
    position: absolute;
}

h3 {
    color: rgb(0, 0, 0);
    font-size: 50px;
}
b {
    font-style: oblique;
    color: mediumpurple;
}

i {
    font-style: oblique;
    color: lightgreen;
}
.texte2 {
    background-color: white;
    padding: 3%;
    z-index: 1;
    border-radius: 40px;
    font-size: 30px;
}

.titre2 {
    color: white;
    border: 6px solid white;
    padding: 13px;
    padding-left: 4%;
    padding-right: 2%;
}

.titre3 {
    color: white;
    border: 6px solid white;
    margin-left: 44%;
    margin-top: 5%;
    padding: 13px;
    padding-left: 4%;
    padding-right: 2%;
    background-size: 50px;
    cursor: grab;
    font-size: 50px;
    border-radius: 40px;
    padding: 15px;
    text-align: center;
}

.clic1 {
    margin-top: 4%;
    margin-left: 4%;
    margin-right: 50%;
}

.clic2 {
    margin-top: 4%;
    margin-left: 60%;
    margin-right: 10%;

}

.cache6 {
    margin-top: 4%;
    margin-left: 30%;
    margin-right: 50%;

}

.clic3 {
    margin-top: 4%;
    margin-left: 10%;
    margin-right: 50%;

}

.cache7 {
    margin-top: 4%;
    margin-left: 70%;
    margin-right: 5%;

}

.cache8 {
    margin-top: 4%;
    margin-left: 50%;
    margin-right: 5%;
}
.clic4 {
    margin-top: 4%;
    margin-left: 20%;
    margin-right: 30%;
}

.clic5 {
    margin-top: 4%;
    margin-left: 14%;
    margin-right: 50%;

}

.clic6 {
    margin-top: 4%;
    margin-left: 14%;
    margin-right: 50%;
}

.cache9 {
    margin-top: 4%;
    margin-left: 70%;
    margin-right: 5%;
}

.clic7 {
    margin-top: 4%;
    margin-left: 40%;
    margin-right: 20%;
}
.cache10 {
    margin-top: 4%;
    margin-left: 10%;
    margin-right: 50%;
}
.cache11 {
    margin-top: 4%;
    margin-left: 50%;
    margin-right: 5%;
    margin-bottom: 10%;
}
.cache12 {
    margin-top: 4%;
    margin-left: 20%;
    margin-right: 40%;
}

.img1 {
    mix-blend-mode: luminosity;
    width : 150px; height : 150px;
    border: none;
    -moz-border-radius : 75px;
    -webkit-border-radius : 75px;
    border-radius : 75px;
}



h4 {
    background-color: rgb(255, 255, 255);
    color: mediumpurple;
    font-size: 75px;
    margin-top: 11%;
    padding-left: 16%;
    padding-top: 1%;
    padding-bottom: 1%;
    font-weight: bold;
    font-style: italic;
    border: 6px yellowgreen;
}

h5 {
    position: absolute;
    color: yellowgreen;
    font-size: 180px;
    font-weight: bold;
    margin-left: 1%;
}

.titre3:hover {
    border: 6px solid mediumpurple;
    color: rgb(255, 255, 255);
    background-color:mediumpurple;
    cursor: pointer;
}
.clic-button {
    cursor: grab;
    font-size: 50px;
    border-radius: 40px;
    padding: 15px;
    padding-left: 2%;
    padding-right: 2%;
    text-align: center;
    }

.clic-button:hover {
    border: 6px solid yellowgreen;
    color: rgb(255, 255, 255);
    background-color: yellowgreen;
    cursor: pointer;
}
    
.clic-content {
    display: none;
    transform: scale(0);
    transition: transform 1s ease;
    }

.clic.switch-on .clic-content {
    display: block;
    transform: scale(1);
}