body {
    display: grid;
    font-family: 'Lato', sans-serif;
    margin: 0px;
    background: linear-gradient(90deg, rgba(138, 37, 177, 1) 10%, rgba(76, 0, 255, 1) 100%);
    min-height: 100%;
}

header {
    padding: 10px;
    color: white;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid black;
    background-color: rgba(0, 0, 0, 0.5);
}

/*Bouton menu déroulant*/

.contenuMenu {
    text-align: left;
    display: none;
    position: absolute;
    background-color: white;
    border: 3px solid black;
    width: 250px;
    padding: 12px 16px;
    margin-left: -220px;
    margin-top: -75px;
    animation-name: deroulant;
    animation-duration: 1s;
}

.boutonDeroulant:hover .contenuMenu {
    display: block;
}

.boutonDeroulant:hover {
    cursor: pointer;
}

/*Bouton de menu déroulant*/

.menu {
    width: 4em;
}

/*Liens du menu déroulant*/

.lienDeroulant {
    display: block;
    color: black;
    font-size: 20pt;
}

/* Animation de l'apparition du menu déroulant*/

@keyframes deroulant {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

h2{
    font-weight: bold;
    font-size: 20pt;
    color: white;
}

h3{
    font-weight: bold;
    font-size: 15.5pt;
}

#lol {
    margin-top: 35px;
	width: 100%;
	background-color: white;
	clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%);
    min-width: 975px;
    min-height: 800px;
}
#lolinverse {
    margin-top: 35px;
	width: 100%;
	background-color: white;
	clip-path: polygon(0% 5%, 100% 0%, 100% 95%, 0% 100%);
    min-width: 975px;
    min-height: 800px;
}

.texteDansPolygone {
    padding: 30px;
    padding-top: 50px;
    padding-left: 100px;
    padding-right: 100px;
}
#droite {
    text-align: right;
}

button {
    display:inline-block;
    padding:0.35em 1.2em;
    border:0.1em solid #000000;
    margin:0 0.3em 0.3em 0;
    border-radius:0.12em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'Roboto',sans-serif;
    font-weight:300;
    color:#000000;
    text-align:center;
    transition: all 0.2s;
    width: 200px;
    height:50px;
}
button:hover {
    color:#FFFFFF;
    background-color:grey;
}

.lienBouton {
    text-decoration: none;
    color: rgb(138, 37, 177);
}

footer {
    display: flex;
    background-color: black;
    color: white;
    justify-content: space-evenly;
    margin-top: 250px;
 }

a {
    color: grey;
}

a:hover{
    animation-name: liens;
    animation-duration: 1s;
}

@keyframes liens{
    0% {opacity: 1}
    50% {opacity: 0.5;}
    100% {opacity: 1;}
}

.images {
    padding-bottom: 10px;
    width: 60px;
}
#langages{
    max-width: 145px;
    display: flex;
    flex-wrap: wrap;
}