/********** General **********/
:root {
    --darker: #26292B;
    --dark: #2E3239;
    --darker-blue: #5F7ADB;
    --blue: #A2B2EE;
    --white: #F5F5F5;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Gruppo', sans-serif;
}

body {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--darker);
    overflow: hidden;
}

main {
    margin: max(2vw, 15px);
    padding: 3vw;
    height: calc(100vh - 2vw - 2vw - 2px);
    width: calc(100vw - max(2vw, 15px) - max(2vw, 15px) - 2px);
    position: fixed;
    
    border: solid rgba(254, 254, 254, 0.2) 0.1em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1003%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(46%2c 50%2c 57%2c 1)'%3e%3c/rect%3e%3cpath d='M -241.6396809958651%2c349 C -145.64%2c297.2 46.36%2c101.2 238.3603190041349%2c90 C 430.36%2c78.8 526.36%2c283 718.3603190041349%2c293 C 910.36%2c303 1006.36%2c113.2 1198.360319004135%2c140 C 1390.36%2c166.8 1630.03%2c429.8 1678.360319004135%2c427 C 1726.69%2c424.2 1487.67%2c186.2 1440%2c126' stroke='rgba(38%2c 41%2c 43%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -840.5822402825881%2c142 C -744.58%2c179.6 -552.58%2c316.8 -360.5822402825882%2c330 C -168.58%2c343.2 -72.58%2c197.8 119.4177597174118%2c208 C 311.42%2c218.2 407.42%2c374.2 599.4177597174119%2c381 C 791.42%2c387.8 911.3%2c261.2 1079.4177597174119%2c242 C 1247.53%2c222.8 1367.88%2c276.4 1440%2c285' stroke='rgba(38%2c 41%2c 43%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -213.4167868061836%2c188 C -117.42%2c233.2 74.58%2c409.4 266.5832131938164%2c414 C 458.58%2c418.6 554.58%2c205.2 746.5832131938164%2c211 C 938.58%2c216.8 1034.58%2c452.6 1226.5832131938164%2c443 C 1418.58%2c433.4 1663.9%2c161.4 1706.5832131938164%2c163 C 1749.27%2c164.6 1493.32%2c393.4 1440%2c451' stroke='rgba(38%2c 41%2c 43%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -940.863261138115%2c237 C -844.86%2c256.4 -652.86%2c364 -460.86326113811504%2c334 C -268.86%2c304 -172.86%2c90.4 19.136738861884965%2c87 C 211.14%2c83.6 307.14%2c290.6 499.13673886188496%2c317 C 691.14%2c343.4 790.96%2c212 979.136738861885%2c219 C 1167.31%2c226 1347.83%2c325.4 1440%2c352' stroke='rgba(38%2c 41%2c 43%2c 1)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1003'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: cover;
}

/********** Shared **********/
.hide {
    display: none !important;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--white);
}

a:hover {
    color: var(--blue);
}

/********** Name & Title **********/
#name {
    color: var(--white);
    font-size: min(4.4em, 10vw);
}

#title {
    color: var(--white);
    font-size: min(x-large, 5vw);
    margin-bottom: 1em;
}

/********** Navigation **********/
header ul {
    list-style: none;
}

header ul li {
    margin: 1em 0;
    height: 24px;
    display: flex;
    align-items: center;
}

header ul li a {
    font-size: large;
    position: relative;
    animation: fadeInTop 2s forwards;
}

/********** Animations **********/
@keyframes fadeInTop {
    from {
        color: var(--darker);
        opacity: 0;
        top: -2vw;
    }
    to {
        color: var(--white);
        opacity: 100;
        top: 0em;
    }
}

/********** Scrollbar **********/
::-webkit-scrollbar {
    width: 2px;
}
  
::-webkit-scrollbar-track {
    box-shadow: none; 
}
   
::-webkit-scrollbar-thumb {
    background: #26292B; 
}
  
::-webkit-scrollbar-thumb:hover {
    background: var(--white); 
}

/********** Langages **********/
aside {
    position: absolute;
    transform: rotate(-90deg);
    bottom: calc(3vw + 65px);
    left: calc(-110.512px / 2);
}

@media only screen and (min-width: 920px) {
    aside {
        left: calc(-110.512px / 2 + 0.5vw);
    }
}

aside ul {
    display: flex;
    gap: 1vw;
}

aside ul li {
    color: var(--white);
}