div {
    padding: 20px;

}

/* Cette partie est consacrée à l'effet "typing" des titres sur ma page */

@-webkit-keyframes typing {
    from {
        width: 0;
    }
}

@-webkit-keyframes blink-caret {
    50% {
        border-color: transparent;
    }
}

/* ici j'ai donc défini la taille, largeur, vitesse du typing qui est attribué à mes titres, j'ai dû faire en sorte
que le typing n'aille pas trop loin, pour certains mots plus courts, mais qu'il ne s'arrête pas avant la fin des mots
plus longs */
h4 {
    font: bold 130% sans-serif;
    border-right: .1em black;
    width: 20.5em;
    width: 20ch;
    white-space: nowrap;
    overflow: hidden;
    -webkit-animation: typing 4s steps(29, end),
        blink-caret .5s step-end infinite alternate;
}



div:nth-of-type(2) {
    max-width: 950px;
}

body {
    background-color: white;
    max-width: 900px;
    padding: 20px;
    font-family: sans-serif;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}

img {
    width: 100px;
    align-content: left;
}

/* par ici on trouve mon titre qui se trouve dans la box bleue */

.jumbotron {
    text-align: center;
    float: left;
    background-color: cadetblue;
    margin-left: 20px;
    margin-right: 20px;
    font-family: monospace;

}

/* là c'est le code pour la liste se trouvant dans le navigateur. "List-group" a été tiré de bootstrap. pour comprendre le
fonctionnement: https://www.w3schools.com/bootstrap/bootstrap_list_groups.asp */


.list-group {
    border-color: aquamarine;
    color: black;
    float: right;
    padding-left: 10px;
    margin-left: 5px;


}



footer {
    border-color: cadetblue;
}


/* pour la barre de navigation, le menu avec l'effet apparaît/disparaît */
a {
    text-decoration: none;
    color: grey;

    transition: color 0.3s ease;
}

a:hover {
    color: cadetblue;
}

#menuToggle {
    display: block;
    position: relative;
    /* permet de définir où on pose la barre quand on a pas encore cliqué dessus, j'ai fait en sorte qu'elle n'apparaisse
pas */
    top: 160px;
    left: 25px;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
}

#menuToggle input {
    display: block;
    width: 60px;
    height: 32px;
    position: absolute;
    top: -6;
    left: -10px;
    font-family: monospace;
    cursor: pointer;
    opacity: 0;
    /* cache ça */
    z-index: 2;


    -webkit-touch-callout: none;
}


#menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: pink;
    border-radius: 3px;

    z-index: 1;

    transform-origin: 4px 0px;

    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        opacity 0.55s ease;
}

#menuToggle span:first-child {
    transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

/* 
 pour se transformer en croix
 */
#menuToggle input:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
}


#menuToggle input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}


#menuToggle input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
}


#menu {
    position: absolute;
    width: 300px;
    margin: -100px 0 0 -50px;
    padding: 50px;
    padding-top: 125px;

    background-color: cadeblue;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;


    transform-origin: 0% 0%;
    transform: translate(-100%, 0);

    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

#menu li {
    padding: 10px 0;
    font-size: 22px;
}

#menuToggle input:checked ~ ul {
    transform: none;
}

/* si on veut que texte clignote */
@-webkit-keyframes blinker {
    from {
        opacity: 1.0;
    }

    to {
        opacity: 0.0;
    }
}

/* pour l'effet clignotant du texte sous l'ascenseur, on peut définir sa vitesse */
.blink {
        text-decoration: blink;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.9s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate;
}