*
{
    padding: 0;
    margin: 0;
}
@media (max-aspect-ratio: 1/1)
{:root{--size: 10vw;}}
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 5/4)
{:root{--size: 12vw;}}
@media (min-aspect-ratio: 5/4) and (max-aspect-ratio: 4/3)
{:root{--size: 12vw;}}
@media (min-aspect-ratio: 4/3) and (max-aspect-ratio: 3/2)
{:root{--size: 10vw;}}
@media (min-aspect-ratio: 3/2) and (max-aspect-ratio: 8/5)
{:root{--size: 9vw;}}
@media (min-aspect-ratio: 8/5)
{:root{--size: 8vw;}}




:root
{
    --size-d2: calc(var(--size)/2);
    --size-x0-8: calc(var(--size)*0.8);
    --size-x0-6: calc(var(--size)*0.6);
    --size-x0-35: calc(var(--size)*0.35);
    --size-x0-3: calc(var(--size)*0.3);
    --size-x0-2: calc(var(--size)*0.2);
    --size-x0-1: calc(var(--size)*0.1);
    --size-x0-03: calc(var(--size)*0.03);
}
/*
 _    _                   _              
| |  | |                 | |             
| |__| |  ___   __ _   __| |  ___  _ __  
|  __  | / _ \ / _` | / _` | / _ \| '__| 
| |  | ||  __/| (_| || (_| ||  __/| |    
|_|  |_| \___| \__,_| \__,_| \___||_|    
*/                                    
                                     
header
{  
    top: 0; 
    position: fixed;
    background-color: rgb(15, 15, 15);
    opacity: 0.85;
    width: 100%;
    height: var(--size);
    z-index: 2;
}
.Naviguation
{
    display: grid;
    justify-items: center;
    align-items: center;
    height: var(--size);
}
.one 
{
    grid-column: 1 / 2;
    grid-row: 1;
}
.two 
{
    grid-column: 2 / 9;
    grid-row: 1;
    padding-right: var(--size-d2);
}
.three 
{
    grid-column: 9 / 10;
    grid-row: 1;
}
#logo
{
    height: var(--size-x0-6);
    width: var(--size-x0-6);
    border-radius: 100%;
    box-shadow: 0em 0em 0em 0em #000;
    transform: rotate(0turn);
    transition: box-shadow 300ms, transform 500ms  300ms;
}
#logo:hover
{
    box-shadow: 0em 0em 0em .5em #000;
    transform: rotate(-1turn);
}
.bouton
{
    margin-left: var(--size-d2);
    font-size: var(--size-x0-35);
    text-decoration: none;
    color:white;
    background-color: inherit;
    font-family: 'Sulphur Point', sans-serif;
    font-weight: bold;
    position: relative;
}
#a::before, #b::before, #c::before
{
 content: "";
 position: absolute;
 left: 0;
 bottom: calc(-1 * var(--size-x0-1));
 width: 100%;
 height: var(--size-x0-03);
 background-color: rgb(255, 255, 255);

 transform: scaleX(0);
 transform-origin: right;
 transition: transform 300ms cubic-bezier(.55,.06,.68,.19);
}
#a:hover::before, #b:hover::before, #c:hover::before
{
    transform: scaleX(1);
    transform-origin: left;
}
#current::before
{
    content: "";
    position: absolute;
    left: 0;
    bottom: calc(-1 * var(--size-x0-1));
    width: 100%;
    height: var(--size-x0-03);
    background-color: rgb(255, 255, 255);
}
#ChangeTheme
{
    border: none;
    background-color: inherit;
}
#NightMod
{
    width: var(--size-x0-8);
    height: var(--size-x0-3);
}

/*
  __  __       _                         _             _   
 |  \/  |     (_)                       | |           | |  
 | \  / | __ _ _ _ __     ___ ___  _ __ | |_ ___ _ __ | |_ 
 | |\/| |/ _` | | '_ \   / __/ _ \| '_ \| __/ _ | '_ \| __|
 | |  | | (_| | | | | | | (_| (_) | | | | ||  __| | | | |_ 
 |_|  |_|\__,_|_|_| |_|  \___\___/|_| |_|\__\___|_| |_|\__|
*/
#MainContent
{
    margin-top: var(--size);
    min-height: calc(100vh - calc(var(--size) * 2));
    position: relative;
    width: 100%;
}
/*                                 _  _ 
     /\                           (_)| |
    /  \    ___  ___  _   _   ___  _ | |
   / /\ \  / __|/ __|| | | | / _ \| || |
  / ____ \| (__| (__ | |_| ||  __/| || |
 /_/    \_\\___|\___| \__,_| \___||_||_|                                      
 */
section
{
    padding-top: 2em;
    padding-bottom: 2em;
    min-height: 40rem;
    width: 100%;
    z-index: 1;
}
h1
{
    margin-left: 15%; 
    font-size: 300%;
    font-family: 'Sulphur Point', sans-serif;
    margin-bottom: 1em;
}
#Decor
{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 60em;
}
#FirstParagraph
{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%; 
}
#Photo
{
    float: right;
    margin-left: 2em;
    width: 4em; 
    height: 4.4em; 
}
p
{
    margin-top: 2em;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    font-size: 160%;
    font-family: 'Merriweather', serif;
}
/*
   _____ __      __
  / ____|\ \    / /
 | |      \ \  / / 
 | |       \ \/ /  
 | |____    \  /   
  \_____|    \/    
                   
                   
*/
#Pdf
{
    top: 0;
    position:relative;
    width:100%;
    height: 70vw;
}
#CVImage
{
    position: absolute;
    width: 0;
    height: 0;
}
#DownloadCV
{
    padding: 0;
    margin: 0;
    height: 0;
    width: 0;
    font-size: 0;
}
/*
  _____              _        _        
 |  __ \            (_)      | |       
 | |__) |_ __  ___   _   ___ | |_  ___ 
 |  ___/| '__|/ _ \ | | / _ \| __|/ __|
 | |    | |  | (_) || ||  __/| |_ \__ \
 |_|    |_|   \___/ | | \___| \__||___/
                   _/ |                
                  |__/                 
*/
#SecondNav
{
    position: fixed;
    top: 20em;
    margin-left: -22em;
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    padding: 1em;
    z-index: 6;
}
#SecondNav:hover, #SecondNav:focus
{
    transition: 1s;
    margin-left: 3em;
}
#OlSecondNav
{
    margin-left: -4em;
    height: 25em;
    width: 25em;
    background-color: lightgrey;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: space-around;
}
#ImgNav
{
    margin-top: -0.17em;
    height: 25.2em;
    margin-left: -0.5em;
}
.lienNav
{
    text-decoration: none;
    color: black;
    font-size: 240%;
}
.ImgsNav
{
    height: 3em;
    width: 3em;
}
.h1title
{
    margin-top: 5em;
}
#T-RexLink
{
    text-decoration: none;
    color: #00BFFF;
}
#VideoT-Rex
{
    margin-top: 3em;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 45em;
    height: 30em;
}
#VideoPacman
{
    margin-top: 3em;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40em;
    height: 26.7em;
}
.olProject
{
    margin-top: 4em;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    list-style: none;
}

.liGitHub
{
    display: flex;
    align-items: center;
    gap: 1em;
    margin-left: -2em;
    background-color: rgb(26, 177, 136);
    width: fit-content;
    padding: 0.3em 0.8em;
    height: 4em;
    border-radius: 1em; 
    transition: 500ms;  
}
.liGitHub:hover, .liGitHub:focus
{ 
    background-color: rgb(13, 124, 95);
    transform: scale(1.1);
}
.liDownload
{
    display: flex;
    align-items: center;
    gap: 1em;
    margin-left: 2em;
    background-color: rgb(0,255,0);
    width: fit-content;
    padding: 0.3em 0.8em;
    height: 4em;
    border-radius: 1em;
    transition: 500ms;
}
.liDownload:hover, .liDownload:focus
{
    background-color: rgb(9, 145, 9);
    transform: scale(1.1);
}
.linkProject
{
    text-decoration: none;
    color: white;
    font-size: 200%;
}
.GitHubLogo
{
    margin-top: .1em;
    width: 3em;
    height: 3em;
}
.DownloadLogo
{
    width: 2em;
    height: 2em;
}
#ImgWhatsApp
{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40em;
    height: 8em;
    padding-bottom: 8em;
}

/*
  __  __                            _                _              
 |  \/  |                          | |              | |             
 | \  / |  ___    ___  ___   _ __  | |_  __ _   ___ | |_  ___  _ __ 
 | |\/| | / _ \  / __|/ _ \ | '_ \ | __|/ _` | / __|| __|/ _ \| '__|
 | |  | ||  __/ | (__| (_) || | | || |_| (_| || (__ | |_|  __/| |   
 |_|  |_| \___|  \___|\___/ |_| |_| \__|\__,_| \___| \__|\___||_|   
*/

#error-msg 
{
    animation: erroremail 4s;
    position: fixed;
    font-size: large;
    color: #ff0808;
    background-color: #fff;
    text-align: center;
    width: 15em;
    padding: 3em;
    right: -25%;
    bottom: 5%;
    border-radius: 30px;
    z-index: 10;
    font-weight: bold;
    box-shadow: 0px 0px 6px #2b2828;
}

@keyframes erroremail {
    0% { transform: translateX(0%);}
    10% { transform: translateX(-120%);}
    90% { transform: translateX(-120%);}
    100% { transform: translateX(0%);}
}



form
{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3em;
    width: 75%;
    height: auto;
    background-color: rgb(36, 51, 61);
    padding-top: 2em;
    padding-bottom: 2em;
    border-radius: 1em;  
}
#FormTitle
{
    text-align: center;
    color:#8cfffb;
    font-family: 'Quicksand', sans-serif;
    font-size: 220%;
    margin: 0;
    padding-bottom: 1em;
}
input, textarea
{  
    margin-bottom: 0.5em;    
    margin-left: 15%;
    background-color: rgb(36, 51, 61);
}
input
{
    font-family: 'Merriweather', serif;
    font-size: 140%;
    width: 30%;
    border: none;
    border-bottom: solid 0.075em #8cfffb;
    padding-bottom: 0.2em;
    color: white;
}
input:focus, textarea:focus
{
    outline:  none;
}
#Prenom
{
    margin-left: 9.5%;
}
#email
{
    margin-top: 1em;
    width: 70%;
}
textarea
{
    margin-top: 1.5em;
    font-family: 'Merriweather', serif;
    font-size: 120%;
    color: white;
    height: 15em;
    width: 70%;
    border: solid 0.1em #8cfffb;
}
.button
{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    width: 35%;
    height: 1.5em;
    font-size: 300%;
    background-color: inherit;
    font-family: 'Sulphur Point', serif;
    border: solid 0.05em #8cfffb;
    outline: .05em solid #8cfffb;
    outline-offset: -0.05em;
    transition: outline-offset 300ms cubic-bezier(.18,.89,.32,1.28);
    color: #8cfffb;
}
.button:hover
{
    outline-offset: 0.2em;
}
/*
  ______             _               
 |  ____|           | |              
 | |__  ___    ___  | |_  ___  _ __  
 |  __|/ _ \  / _ \ | __|/ _ \| '__| 
 | |  | (_) || (_) || |_|  __/| |    
 |_|   \___/  \___/  \__|\___||_|    
                                     
*/                            
                             
footer
{
    position: relative;
    background-color: rgb(15, 15, 15);
    opacity: 0.85;
    width: 100%;
    height: var(--size);
}
.FooterLinks
{
    height: var(--size);
    list-style-type: none;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-around;
}
.LiFooter
{
    display: flex;
    flex-wrap: nowrap;
}
.link
{
    margin-top: calc(var(--size-x0-1)*0.8);
    font-size: var(--size-x0-3);
    text-decoration: none;
    color: white;
}
#GitHubLogo
{
    width: var(--size-d2);
    height: var(--size-d2);
    padding-right: var(--size-x0-1);
}
#LinkedinLogo
{
    width: var(--size-d2);
    height: var(--size-d2);
    padding-right: var(--size-x0-1);
}

/*
  __  __            _  _           ____                            _            
 |  \/  |          | |(_)         / __ \                          (_)           
 | \  / |  ___   __| | _   __ _  | |  | | _   _   ___  _ __  _ __  _   ___  ___ 
 | |\/| | / _ \ / _` || | / _` | | |  | || | | | / _ \| '__|| '__|| | / _ \/ __|
 | |  | ||  __/| (_| || || (_| | | |__| || |_| ||  __/| |   | |   | ||  __/\__ \
 |_|  |_| \___| \__,_||_| \__,_|  \___\_\ \__,_| \___||_|   |_|   |_| \___||___/
*/
@media screen  and (max-width: 1000px)
{
    h1
    {
        margin-left: 5%;
    }
    p
    {
        width: 80%;
    }
    #FirstParagraph
    {
        width: 70%;
    }
    #Photo
    {
        width: 5em;
        height: 7.13em;
    }
    #Pdf
    {
        width: 0;
        height: 0;
    }
    #CVImage
    {
        position:relative;
        width:100vw;
        height: 141vw;
        padding-bottom: 2em;
    }
    #DownloadCV
    {
        position: relative;
        display: block;
        width: 10em;
        height: 1.3em;
        margin-right: auto;
        margin-left: auto;
        background-color: rgb(26, 177, 136);
        text-align: center;
        border-radius: 0.5em;
        text-decoration: none;
        color: white;
        font-size: 200%;
        z-index: 5;
    }
    #DownloadCV:hover, #DownloadCV:focus
    {
        transition: 1s;
        background-color: rgb(4, 107, 80);
    }
    form
    {
        width: 85%;
    }
    
}