body {
    margin:0;
    width:100vw;
    height:100vh;
    display: grid;
    grid-template-rows: 0.1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr;
}

h1 {
    grid-column: 1 / 3;
    text-align: center;
}

section {
    display: grid;
    grid-template-rows: 0.1fr 1fr;
}

section h2 {
    text-align: center;
}

section {
    border-top: 1px solid black;
}

section:first-of-type, section:nth-of-type(3) {
    border-right: 1px solid black;
}

figure {
    max-width:30%;
    max-height:30%;
}


/* EXERCICE 1 */

#glass-body {
    animation: 2s fill_glass forwards;
    animation-delay: 1s;
}

@keyframes fill_glass {
    from {
        fill: rgba(255, 0, 0, 0);
    }

    to {
        fill: rgba(157, 17, 17, 1);
    }
}






/* EXERCICE 2 */

.tiny-bubble {
    animation: 4s bubble_up_tiny forwards;
    animation-delay: 1s;
}

.small-bubble {
    animation: 4s bubble_up_small forwards;
    animation-delay: 1s;
}

.middle-bubble {
    animation: 4s bubble_up_middle forwards;
    animation-delay: 1s;
}

.big-bubble {
    animation: 4s bubble_up_big forwards;
    animation-delay: 1s;
}

@keyframes bubble_up_tiny {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-50vh);
    }
}

@keyframes bubble_up_small {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-40vh);
    }
}

@keyframes bubble_up_middle {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-30vh);
    }
}

@keyframes bubble_up_big {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-20vh);
    }
}


/* EXERCICE 3 */

/*
    niveau 1 #7400b8:
    niveau 2 #5e60ce:
    niveau 3 #4ea8de:
    niveau 4 #56cfe1:
    niveau 5 #72efdd:
*/

#eq1-1, #eq2-1, #eq3-1, #eq4-1 {
    animation: 2s level_1 forwards;
    animation-delay: 0.25s;
}

#eq1-2, #eq2-2, #eq3-2, #eq4-2 {
    animation: 2s level_2 forwards;
    animation-delay: 0.5s;
}

#eq1-3, #eq2-3, #eq3-3 {
    animation: 2s level_3 forwards;
    animation-delay: 0.75s;
}

#eq2-4, #eq3-4 {
    animation: 2s level_4 forwards;
    animation-delay: 1s;
}

#eq2-5 {
    animation: 2s level_5 forwards;
    animation-delay: 1.25s;
}

@keyframes level_1 {
    from {
        fill: rgba(0, 0, 0, 0);
        stroke: rgba(0, 0, 0, 0);
    }

    to {
        fill: #7400b8;
        stroke: #7400b8;
    }
}

@keyframes level_2 {
    from {
        fill: rgba(0, 0, 0, 0);
        stroke: rgba(0, 0, 0, 0);
    }

    to {
        fill:#5e60ce;
        stroke:#5e60ce;
    }
}

@keyframes level_3 {
    from {
        fill: rgba(0, 0, 0, 0);
        stroke: rgba(0, 0, 0, 0);
    }

    to {
        fill:#4ea8de;
        stroke:#4ea8de;
    }
}

@keyframes level_4 {
    from {
        fill: rgba(0, 0, 0, 0);
        stroke: rgba(0, 0, 0, 0);
    }

    to {
        fill:#56cfe1;
        stroke:#56cfe1;
    }
}

@keyframes level_5 {
    from {
        fill: rgba(0, 0, 0, 0);
        stroke: rgba(0, 0, 0, 0);
    }

    to {
        fill:#72efdd;
        stroke:#72efdd;
    }
}


/* EXERCICE 4 */

#armor path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw 5s linear forwards;
    animation-delay: 2s;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}