@import url('https://fonts.googleapis.com/css?family=Fredericka+the+Great');

.containery {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 120vh;
    padding: 10px 3rem;
    background-color: rgb(73, 38, 107);
}

.containery h1,
h2 {
    font-weight: 200;
    margin: 0.2rem;
}

/*DEBUT TEXTE BILINGUA*/

:root {
    --background: #f3a683;
    --base: #303952;
    --accent: #786fa6;
    --shadow: #e77f67;
}

.cool span {
    margin: 20px;
}

.cool {
    font: bold 2rem/1.8 sans-serif;
    max-width: 200rem;
    margin-top: 25vh;
    display: flex;
    justify-content: space-between;
    

    span {
        color: var(--shadow);
        display: inline-block;
        position: relative;
    
        @for $i from 1 through 10 {
            &:nth-child(#{$i}) {

                &::before,
                &::after {
                    animation-delay: #{$i / 10}s;
                }
            }
        }

        @media (prefers-reduced-motion) {
            color: var(--base);
        }

        &::before {
            animation: max-height .4s cubic-bezier(0.61, 1, 0.88, 1) 1 normal both;
            color: var(--accent);
        }

        &::after {
            animation: max-width .7s cubic-bezier(0.61, 1, 0.88, 1) 1 normal both;
            color: var(--base);
        }

        &::before,
        &::after {
            content: attr(data-text);
            left: 0;
            overflow: hidden;
            position: absolute;
            // Set the speak property to none, because we don't want screen readers to read every word in the paragraph twice. "Hello, hello"? No!
            speak: none;

                {
                animation: none;
                content: "";
            }
        }
    }
}

@keyframes max-width {
    from {
        max-width: 0;
    }

    to {
        max-width: 100%;
    }
}

@keyframes max-height {
    from {
        max-height: 0;
    }

    to {
        max-height: 100%;
    }
}

/*FIN TEXT BILINGUAL*/
h1 {
    font-size: 3.5rem;
}

h2 {
    font-size: 2rem;
    color: rgb(174, 140, 140);
}

.author {
    color: rgb(180, 0, 75);
    text-decoration: none;
}

a:hover {
    color: rgb(23, 77, 32);
}

.fas {
    color: rgb(0, 0, 0);
    font-size: 3rem;
    /*  background-color: green; conditional */
    margin: 0px;
    padding: 0px;
    /*****
    animation-name: erasing;    
    animation-duration: 3s;
    ***/
}

/**** this is the Pencil Erasing animation****/
.erasing-animation {
    animation-name: erasing;
    animation-duration: 1.8s;
}

@keyframes erasing {
    0% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(180deg);
    }

    60% {
        transform: rotate(180deg);
    }

    70% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/***this is the pencil writing animation*****/
.writing-animation {
    animation-name: writting;
    animation-duration: 4s;
}

@keyframes writting {
    0% {
        transform: translate(0px, 0px);
    }

    2% {
        transform: translate(30px, -40px);
    }

    4% {
        transform: translate(0px, 0px);
    }

    6% {
        transform: translate(30px, -40px);
    }

    8% {
        transform: translate(0px, 0px);
    }

    10% {
        transform: translate(30px, -40px);
    }

    12% {
        transform: translate(0px, 0px);
    }

    14% {
        transform: translate(30px, -40px);
    }

    16% {
        transform: translate(0px, 0px);
    }

    18% {
        transform: translate(30px, -40px);
    }

    20% {
        transform: translate(0px, 0px);
    }

    22% {
        transform: translate(30px, -40px);
    }

    24% {
        transform: translate(0px, 0px);
    }

    26% {
        transform: translate(30px, -40px);
    }

    28% {
        transform: translate(0px, 0px);
    }

    30% {
        transform: translate(30px, -40px);
    }

    32% {
        transform: translate(0px, 0px);
    }

    34% {
        transform: translate(30px, -40px);
    }

    36% {
        transform: translate(0px, 0px);
    }

    38% {
        transform: translate(30px, -40px);
    }

    40% {
        transform: translate(0px, 0px);
    }

    42% {
        transform: translate(30px, -40px);
    }

    44% {
        transform: translate(0px, 0px);
    }

    46% {
        transform: translate(30px, -40px);
    }

    48% {
        transform: translate(0px, 0px);
    }

    50% {
        transform: translate(30px, -40px);
    }

    52% {
        transform: translate(0px, 0px);
    }

    54% {
        transform: translate(30px, -40px);
    }

    56% {
        transform: translate(0px, 0px);
    }

    58% {
        transform: translate(30px, -40px);
    }

    60% {
        transform: translate(0px, 0px);
    }

    62% {
        transform: translate(30px, -40px);
    }

    64% {
        transform: translate(0px, 0px);
    }

    66% {
        transform: translate(30px, -40px);
    }

    68% {
        transform: translate(0px, 0px);
    }

    70% {
        transform: translate(30px, -40px);
    }

    72% {
        transform: translate(0px, 0px);
    }

    74% {
        transform: translate(30px, -40px);
    }

    76% {
        transform: translate(0px, 0px);
    }

    78% {
        transform: translate(30px, -40px);
    }

    80% {
        transform: translate(0px, 0px);
    }

    82% {
        transform: translate(30px, -40px);
    }

    84% {
        transform: translate(0px, 0px);
    }

    86% {
        transform: translate(30px, -40px);
    }

    88% {
        transform: translate(0px, 0px);
    }

    90% {
        transform: translate(30px, -40px);
    }

    92% {
        transform: translate(0px, 0px);
    }

    94% {
        transform: translate(30px, -40px);
    }

    96% {
        transform: translate(0px, 0px);
    }

    98% {
        transform: translate(30px, -40px);
    }

    100% {
        transform: translate(0px, 0px);
    }


}

@media(min-width: 1200px) {
    h1 {
        font-size: 5rem;
    }

    .fas {
        font-size: 5rem;
    }
}

@media(max-width: 800px) {
    .container {
        padding: 0 1rem;
    }

    h1 {
        font-size: 3rem;
    }
}

@media(max-width: 500px) {
    h1 {
        font-size: 2.5 rem;
    }