@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Karla&family=Lobster&family=Merriweather+Sans:wght@300&display=swap');

/****************************************
                GENERAL
****************************************/

body {
    background-color: #CCC;
}

h1 {
    padding-top: 2rem;
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 4rem;
}

h2 {
    font-family: 'Merriweather Sans', sans-serif;
}

p,
li,
a {
    font-family: 'Karla', sans-serif;
}

section {
    padding: 2rem;
}

li {
    list-style: none;
}

.underline {
    text-decoration: underline;
}

.border {
    border-color: black;
    border-width: 1rem;
    border-style: none double;
}

.border_bot {
    border-color: black;
    border-width: 1rem;
    border-style: none double double double;
}

.border_top {
    border-color: black;
    border-width: 0.3rem;
    border-style: solid solid none solid;
}


/****************************************
                MAIN
****************************************/

#Left {
    width: 75%;
}

#Titre>img {
    border-radius: 50%;
    height: 20rem;
}

#Titre h1 {
    font-family: 'Lobster', cursive;
    font-size: 5rem;
}

#Titre h1,
#Titre h2 {
    padding-left: 23rem;
}

#Diplomes>h2,
#Diplomes>li {
    padding-left: 13rem;
}

.flex {
    display: flex;
    flex-direction: row;
}

#Experiences>.flex>.carte {
    margin: 2rem auto;
}

.carte>h2 {
    margin: 0;
    background-color: #C00000;
}

.carte>h2,
.carte>li {
    padding: 1rem 3rem;
}

#Competences>p>i {
    font-size: 6rem;
}

#Right {
    position: fixed;
    float: right;
    border-width: 1rem;
    border-color: grey;
    border-style: inset outset;
    background-color: #C00000;
}

#Right a {
    color: black;
    text-decoration: underline;
    font-style: italic;
}

@media (min-width: 1490.98px) {
    #Right {
        top: 2rem;
        right: 2rem;
    }
}

@media (max-width: 1491px) {
    * {
        margin: auto;
    }
    section {
        padding: 0;
    }
    #Diplomes>h2,
    #Diplomes>li {
        padding-left: 0rem;
    }
    #Diplomes>h2,
    #Competences>h2 {
        margin-top: 2rem;
    }
    .left,
    #Left {
        float: none;
    }
    #Titre>* {
        display: block;
        float: none;
        margin: auto;
        text-align: center;
    }
    #Titre>h1,
    #Titre>h2 {
        padding: 0%;
        margin: auto;
        text-align: center;
        float: left;
    }
    .flex {
        flex-direction: column;
    }
    #Competences>h2 {
        padding-bottom: 1rem;
    }
    #Competences>p>i {
        font-size: 3rem;
    }
    #Right {
        position: relative;
        margin: 2rem 5rem auto;
        float: none;
    }
    #Infos>p,
    #Interets>h1,
    #Interets>p {
        padding: 0 3rem 0 3rem;
    }
    #Infos>p {
        padding-top: 3rem;
    }
    #Interets>p {
        padding-bottom: 3rem;
    }
}