:root{
    --Body-background-color: #181818;
    --Background-Color: #1F1F1F;
    --Gui-color: #242424;
    --Gui-border-color: #2E2E2E;
    --Gui-text-color: #FFFFFF;
    --H3: #25AEF3;
    --Class: #D7BA7D;
    --attribut: #9CDCFE;
    --Text: #CE9178;
    --Number: #B5CEA8;
    --Link: #fa0f85;
    --html-color: #E44D26;
    --css-color: #1572B6;
    --js-color: #F7DF1E;
    --php-color: #777BB4;
    --csharp-color: #68217A;
    --sql-color: #00758F;
    --python-color: #d1e32b;
    --Background-Text: #008000;
}
[data-theme="light"]{
    --Body-background-color: #F0F0F0;
    --Background-Color: #E8E8E8;
    --Gui-color: #DEDEDE;
    --Gui-border-color: #C8C8C8;
    --Gui-text-color: #1A1A1A;
    --H3: #0A6FA8;
    --Class: #7A5C1A;
    --attribut: #0A5A8A;
    --Text: #7A2A10;
    --Number: #3A6A28;
    --Link: #c0006a;
    --Background-Text: #000000;
}
.attribut{
    color: var(--attribut);
}
*{
    box-sizing: border-box;
}
html{
    overflow-x: hidden;
}
body{
    margin: 0;
    background-color: var(--Body-background-color);
    font-family: Consolas, 'Courier New', monospace;
    margin: 0;
    overflow-x: hidden;
}
header{
    display: flex;
    position: fixed;
    align-items: center;
    width: 100vw;
    border: solid 2px;
    border-top: none;
    border-left: none;
    border-right: none;
    background-color: var(--Background-Color);
    border-color: var(--Gui-border-color);
    justify-content: space-between;
    padding: 20px 30px 20px 30px;
    color: var(--Gui-text-color);
    z-index: 1;
}
header div{
    display: flex;
    align-items: center;
    justify-content: center;
}
.button{
    background: none;
    border: none;
    padding: 0;
}
.button span{
    transform: scale(1.6);
    color: var(--Gui-text-color);
}
.button span:hover{
    cursor: pointer;
}
nav{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}
nav a{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    color: var(--Gui-text-color);
    transform: scale(1.8);
}
nav a p{
    display: none;
}
a{
    cursor: pointer;
    text-decoration: none;
}
form{
    margin: 0;
}
main{
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
    gap: 40px;
    padding-top: 70px;
}
h1{
    color: var(--Class);
}
h2{
    color: var(--attribut);
    margin: 0;
}
h3{
    color: var(--H3);
}
h4{
    font-size: 16px;
    color: var(--Gui-text-color);
    margin: 0;
}
.number{
    color: var(--Number);
}
#Me{
    width: 80vw;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
}
#Me div{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
#Me div div{
    display: flex;
    flex-direction: column;
}
#Me div div{
    max-width: 600px;
}
#Me div img{
    width: 250px;
    border-radius: 80px;
}
p{
    color: var(--Text);
}
.hyper-button{
    display: flex;
    width: fit-content;
    padding: 10px;
    border: solid 2px;
    border-radius: 15px;
    border-color: var(--Gui-border-color);
    background-color: var(--Body-background-color);
    color: var(--Link);
    align-items: center;
    justify-content: center;
    gap: 10px;
}
#Skills{
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--Background-Color);
    gap: 40px;
}
#Skills>div{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    align-items: center;
}
#Skills div div{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 10px 0 10px;
    border: solid 2px;
    border-color: var(--Gui-border-color);
    background-color: var(--Body-background-color);
    border-radius: 15px;
}
#Skills img{
    width: 80px;
}
.skills{
    max-height: 80px;
}
.skills:hover{
    animation: rotate 2s linear infinite;
}
@keyframes rotate{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
#Project{
    width: 80vw;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    justify-content: center;
    align-items: center;
}
#Project>div{
    display: flex;
    flex-direction: column;
    gap: 40px;
}
#Project div div{
    width: 300px;
    border-radius: 15px;
    background-color: var(--Background-Color);
    display: flex;
    flex-direction: column;
    align-items: center;
}
#Project>div>div:hover{
    transform: scale(1.05);
}
#Project div div img{
    border-radius: 15px 15px 0 0;
    width: 300px;
    max-height: 130px;
}
#Project>div>div>div{
    padding: 0 15px 15px 15px;
}
#Project>div>div>div>p{
    height: 80px;
}
#Project div div div div{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 15px;
}
#Project div div div div p{
    display: flex;
    padding: 4px;
    color: white;
    border-radius: 5px;
}
.html{
    background-color: #E44D26;
}
.css{
    background-color: #1572B6;   
}
.js{
    background-color: #F7DF1E;
}
.php{
    background-color: #777BB4;
}
.c_sharp{
   background-color: #68217A; 
}
.sql{
    background-color: #00758F;
}
.python{
    background-color: #d1e32b;
}
footer{
    width: 100vw;
    display: flex;
    flex-direction: column;
    background-color: var(--Background-Color);
    border: solid 2px;
    border-bottom: none;
    border-left: none;
    border-right: none;
    border-color: var(--Gui-border-color);
    padding: 20px;
    font-size: 14px;
    justify-content: space-evenly;
}
footer div div{
    display: flex;
    flex-direction: column;
}
footer div div a{
    display: flex;
    align-items: center;
    font-weight: bold;
    color: var(--H3);
}
footer img{
    width: 20px;
}
#Background{
    width: 100%;
    display: flex;
    position: absolute;
    z-index: -2;
    opacity: 0.6;
    animation: roll 5s forwards;
    overflow-y: hidden;
    color: var(--Background-Text);
    font-family: monospace;
    overflow-y: hidden;
    overflow-x: hidden;
}
@keyframes roll{
    from{
        height: 0vh;
    }
    to{
        height: 180vh;
    }
}
@media screen and (min-width: 650px){
    #Project>div{
        flex-direction: row;
    }
    #Me{
        width: 80vw;
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: center;
        margin-top: 40px;
    }
    #Me div{
        flex-direction: row;
    }
    nav{
        gap: 20px;
    }
    nav a{
        transform: scale(1);
    }
    .button span{
        transform: scale(1.2);
    }
    nav a p{
        display: flex;
        color: var(--Gui-text-color);
    }
    header{
        padding: 10px 30px 10px 30px;
    }
    footer{
        flex-direction: row;
    }
    footer div{
        max-width: 360px;
    }
}