@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color: #000000;
}
.animate__animated.animate__fadeIn {
    --animate-duration: 2s;
}
:root {
    --animate-duration: 800ms;
    --animate-delay: 0.9s;
}
.container{
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
}


header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 70px;
    color: white;
    z-index: 2;
}
header a{
    font-size: 20px;
    color: #000000;
    font-family: "Major Mono Display", serif;
    transition: 0.6s all ease-in-out;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    background-color: #ffffff;
    border-radius: 10px;

}
header a:hover{
    font-size: 25px;
    background-color: #000000;
    color: #ffffff;
}

.titre h1{
    font-size: 6em;
    color: #ffffff;
    font-family: "Major Mono Display", serif;
    transition: 0.6s all ease-in-out;
    padding: 10px 20px 10px 20px;
}
.columns{
    display: flex;
    align-items: center;
    justify-content: center;

}
.column{
    font-size: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;

}
.row{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}
.left {
    width: 40%;

}
.photo img{
    width: 100%;
    height: 600px;
    border-radius: 1000px;


    animation-duration: 3s;
    animation-name: apparition;
    animation-iteration-count: 1;
    transition: none;
}

.right {
    width: 60%;
    font-family: "Arvo", serif;
    padding: 40px;
}
.right p{
    font-size: 2em;
    color: #ffffff;
}
 span.red{
     color: #e4d700;
    animation-duration: 5s;
    animation-name: changement-couleur;
    animation-iteration-count: infinite;
    transition: none;
}
 span.france{
     color: red;
    animation-duration: 5s;
    animation-name: changement-couleur;
    animation-iteration-count: infinite;
    transition: none;
}



@keyframes changement-couleur {
    10% {
        color: #4c09f1;
    }
    20% {
        color: #4e4edd;
    }
    30% {
        color: #5091ca;
    }
    40% {
        color: #52d4b6;
    }
    50% {
        color: #54ff9f;
    }
    60% {
        color: #78f569;
    }
    70% {
        color: #9ceb32;
    }
    80% {
        color: #c0e10a;
    }
    90% {
        color: #e4d700;
    }
    100% {
        color: #ffd000;
    }


}



@keyframes apparition {
    10% {
       opacity: 0;
    }
    20% {
        opacity: 0;
    }
    30% {
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

.Police a{
    color: White;
    font-family: "Major Mono Display", serif;
    text-decoration: none;
    border-bottom: 2px solid white;
}


@media (max-width: 1024px) {
    .left{
        display: none;
       }
}

/* Mobiles */
@media (max-width: 768px) {
   .titre h1{
    font-size: 3rem;
   }
   .row{
    flex-direction: column;
   }
   .left{
    display: none;
   }
}