:root {
    scroll-behavior: smooth;
    --bg-color: #ccccc7;
    --txt-color: #8f8f7c;
    --drk-txt-color: #53585f;
    --ttl-txt-color: #a9a500;
    --prim-head-color: #b06c71;
    --secnd-head-color: #a5000c;
    --lnk-std-color: #213b6b;
    --lnk-hvr-color: #898500;
    --lnk-vstd-color: #af6c72;
}

* { padding: 0; margin: 0; }

body {
    font-family: 'Varela Round', sans-serif;
    font-weight: 300;
    box-sizing: border-box;
    background: var(--bg-color)
}
/* Language BUTTONS */
button.fr-btn, button.en-btn {
    width: 2rem;
    border: none;
    margin: 0.25rem;
    padding: 0;
    background: none;
    cursor: pointer;
    float: right;
    z-index: 99;
    top: 1rem; 
    right: 1rem;
    position: fixed; 
}
.btn-img {
    max-width: auto;
}
/* TITLE NAV AND SOCIAL SECTION */

.nav {
    margin: 1rem auto;
    list-style: none;
    text-align: center; 
    display: -webkit-flex;
    display: flex;
    align-content: space-around;
}

a {
    text-decoration: none;
    width: 20rem;
    font-size: 1.25rem;
}
a:link { color: var(--lnk-std-color); }
a:hover { color: var(--lnk-hvr-color); }
a:visited { color: var(--lnk-vstd-color); }

.social {
    margin: 0 auto;
    text-align: center;
}
#title {
    padding: 2rem 8rem 7rem;
    background: linear-gradient(to top, var(--prim-head-color) 0%, var(--secnd-head-color) 100%);
    color: var(--bg-color);
    height: 60vh; 
    transform: skew(0deg, -2deg) translateY(-2rem);
    margin-bottom: 20%;
}
.title {
    margin: 0 auto 7rem auto;
    width: 100%;
    transform: skew(0deg, 2deg);
    font-size: 1.5rem;
}
h1 {
    font-family: 'Montserrat', sans-serif;
    margin-top: 7rem;
    padding: 1rem 0;
    font-size: 2rem;
    transform: skew(0deg, 2deg);
}
.title h2 {
    font-family: 'Montserrat', sans-serif;
    color: var(--ttl-txt-color);
    margin: 0;
    padding: 1rem 0;
    font-size: 1.5rem;
}

/* INTRO SKILLS WORK SCHOOL & CONTACT SECTIONS */
#fr-intro, #fr-skills, #fr-work, #fr-school, #fr-contact, #en-intro, #en-skills, #en-work, #en-school, #en-contact {
    padding: 0 8rem;
    color: var(--txt-color); 
    min-height: 100vh; 
    position: relative;
}
.intro, .skills, .work, .school, .contact {
    min-width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}
.contact {
    margin: 0 0 0 auto;
}
#fr-intro h2, #fr-work h2, #fr-contact h2, #en-intro h2, #en-work h2, #en-contact h2 {
    font-family: 'Montserrat', sans-serif;
    color: var(--ttl-txt-color);
    padding-bottom: 1rem;
    font-size: 2.5rem;
    text-align: right;
}
#fr-skills h2, #fr-school h2, #en-skills h2, #en-school h2 {
    font-family: 'Montserrat', sans-serif;
    color: var(--ttl-txt-color);
    padding-bottom: 1rem;
    font-size: 2.5rem;
}
#fr-intro p, #fr-skills p, #fr-work p, #fr-school p, #fr-contact p ,#en-intro p, #en-skills p, #en-work p, #en-school p, #en-contact p {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    text-align: justify;
    text-justify: inter-word;
}

/* SPECIAL TEXT */
.certificates {
    text-align: center !important;
}
.catchphrase {
    text-align: center !important;
    text-transform: uppercase;
    color: var(--ttl-txt-color);
}
#fr-quote {
    quotes: "\00AB" "\00BB";
}
#en-quote {
    quotes: """ """;
}
.colored-text {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    color: var(--prim-head-color);
}

/* FOOTER */
footer {
    text-transform: uppercase;
    height:8rem;
    background: var(--prim-head-color);
    background: linear-gradient(to bottom, var(--prim-head-color) 0%, var(--secnd-head-color) 100%);
    color: var(--ttl-txt-color);
    text-align: center;
    position: relative;
}
footer h3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* GO TO TOP BUTTON */
#GoToTopBtn { display: none; position: fixed; z-index: 99; 
    border: var(--txt-color) 1px solid; outline: none; background-color: var(--bg-color); color: var(--lnk-std-color) ; cursor: pointer; font-size: 1rem; bottom: 1rem; right: 2rem; padding: 0.3rem 1rem;}
#GoToTopBtn:hover { background-color: var(--prim-head-color) ; color: var(--bg-color); border-color: var(--txt-color); transition: background-color 2s ease-out; }

/* MEDIA QUERIES */
@media screen and (max-width: 1920px) {
    :root {
        font-size: 24px;       
    }
}
@media screen and (max-width: 1366px) {
    :root {
        font-size: 20px;       
    }
}

@media screen and (max-width: 1280px) {
    :root {
        font-size: 16px;       
    }
}

@media screen and (max-width: 1170px) {
    :root {
        font-size: 16px;       
    }
}

@media screen and (max-width: 768px) {
    :root {
        font-size: 14px;       
    }
    .title {
        margin: 0 auto 11rem auto;
    }
    .nav {
        -webkit-flex-direction: column; 
        flex-direction: column; 
        -webkit-align-items: center;
        align-items: center;
    }
}

@media screen and (max-width: 500px) {
    :root {
        font-size: 12px;       
    }
    #title {
        margin-bottom: 12rem;
    }
    .title {
        margin: 0 auto 10rem auto;
    }
    .nav {
        -webkit-flex-direction: column; 
        flex-direction: column; 
        -webkit-align-items: center;
        align-items: center;
    }
}

@media screen and (max-width: 375px) {
    :root {
        font-size: 9px;        
    }
    #title {
        margin-bottom: 12rem;
    }
    .title {
        margin: 0 auto 9rem auto;
    }
    .nav {
        -webkit-flex-direction: column; 
        flex-direction: column; 
        -webkit-align-items: center;
        align-items: center;
    }
    #intro, #skills, #work, #school, #contact {
        padding: 0 4rem;
    }
}

@media screen and (max-width: 320px) {
    :root {
        font-size: 8px;        
    }
    #title {
        margin-bottom: 16rem;
    }
    .title {
        margin: 0 auto 9rem auto;
    }
    .nav {
        -webkit-flex-direction: column; 
        flex-direction: column; 
        -webkit-align-items: center;
        align-items: center;
    }
    #intro, #skills, #work, #school, #contact {
        padding: 0 4rem;
    }
}

/* @media screen and (max-height: 768px) {
    :root {
        font-size: 16px;        
    }
    .title {
        margin: 9rem auto;
    }
    .nav {
        -webkit-flex-direction: row; 
        flex-direction: row; 
        -webkit-align-items: center;
        align-items: center;
    }
} */
/* Prise en compte des petits écrans horizontaux */
@media screen and (max-height: 500px) {
    :root {
        font-size: 10px;        
    }
    .title {
        margin: 0 auto 9rem auto;
    }
    .nav {
        -webkit-flex-direction: row; 
        flex-direction: row; 
        -webkit-align-items: center;
        align-items: center;
    }
}

@media screen and (max-height: 360px) {
    :root {
        font-size: 7px;        
    }
    .title {
        margin: 0 auto 9rem auto;
    }
    .nav {
        -webkit-flex-direction: row; 
        flex-direction: row; 
        -webkit-align-items: center;
        align-items: center;
    }
}