body{
    padding-left: 40px;
    padding-top: 53px;
    margin-bottom: 0;
    margin-right: 0;
    background-color: var(--bgcolor);
}

.light-theme{
    --textcolor: black;
    --bgcolor: #e4e4e4;
    --element-bg: var(--gray);
    --img-color: rgb(70, 70, 70);
}

main{
    padding-left: 8vw;
    padding-right: 8vw;
    padding-top: 50px;
    padding-bottom: 50px;
    position: relative;
    z-index: 20;
}

article{
    margin-bottom: 50px;
}

.content{
    opacity: 0;
    animation: fade-in 1.5s ease-out 1 forwards;
    animation-delay: .2s;
    transform: translate(0, 4vw);
}

h1{
    color: var(--blue);
    margin-bottom: 1.3em;
    opacity: 0;
    transform: translate(0, -1.5vw);
    animation: fade-in 1s ease-out 1 forwards;
}

@keyframes fade-in{
    100%{
        opacity: 1;
        transform: none;
    }
}


h2{
    font-size: 1.167em;
}

h3{
    font-weight: 500;
}

figcaption{
    color: var(--img-color);
}

img{
    border: 2px solid var(--img-color);
    border-radius: 2px;
}

.list{
    margin-bottom: 0;
    margin-top: 0;
}

header{
    position: fixed;
    background-color: var(--element-bg);
    right: 0;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    border-bottom: rgb(22, 22, 22) 1px solid;
}

header .logo{
    margin-left: 20px;
}

.logo{
    color: white;
    font-weight: bold;
    font-size: 27px;
    padding: 13px;
    transition: 0.3s;
}

.first-name{
    color: var(--blue);
    transition: 0.3s;
}

.logo:hover{   
    background: linear-gradient(
    270deg,
    white,
    LightSteelBlue,
    white,
    LightSteelBlue
    );
    background-size: 300% 300%;
    cursor: pointer;
}

.logo:hover .first-name{
    background: linear-gradient(
    270deg,
    white,
    var(--blue),
    white,
    var(--blue)
    );
    background-size: 300% 300%;   
}

.logo:hover, .logo:hover .first-name{
    background-clip: text;
    color: transparent;
    animation: logo-gradient 2s linear infinite;
}

@keyframes logo-gradient{
    0% {
    background-position: 100% 100%;
  }
 
  100% {
    background-position: 0% 50%;
  }
}

nav{
    position: fixed;
    display: flex;
    top: 60px;
    bottom: 0;
    left: 0;
    z-index: 0;
    transition: z-index 0.3s;
}

.nav-active{
    transition: none;
    z-index: 50;
}

.sidebar{
    display: flex;
    background-color: var(--element-bg);
    justify-content: center;
    padding: 0.5vw;
}

.sidebar-hidden{
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

.sidebar-hidden, .sidebar-shown{
    position: relative;
    display: flex;
    top: 0;
    bottom: 0;
    background-color: var(--element-bg);
    justify-content: center;
    transition: opacity 0.3s;
    padding: 4vw 2vw 4vw 1vw;
    overflow-y: scroll;
}

.nav-link{
    padding: 1.5vw 0px 1.5vw 0px;
    font-size: clamp(15px, 2vw, 27px);
    flex-grow: 0.09;
}

.caret, .caret-clicked{
    width: clamp(15px, 3vw, 20px);
    fill: white;
    padding: 10px;
    transition: 0.3s;
}

.caret-clicked{
    rotate: 180deg;
    fill: var(--blue);
}

.caret:hover {
    cursor: pointer;
}

.caret-hover{
    fill: var(--blue);
}

@media (hover:hover){    
    .sidebar:hover + .sidebar-hidden,
    .sidebar-hidden:hover
    {   opacity: 1;
        pointer-events: all;                         
    }
    .sidebar:hover .caret{
        fill: var(--blue);
    }
    nav:hover{
    transition: none;
    z-index: 50;
    }
}

.sidebar-shown{
    opacity: 1;
    pointer-events: all;
}

.nav-link-container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; 
    width: 100%;
    flex-grow: 0;
}

 .footer{
    position: absolute;
    background-color: var(--element-bg);
    left: 0;
    right: 0;
    bottom: -1;
    display: flex;
    z-index: 100;
    justify-content: space-between;
    align-items: center;
}

.info-container{
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;    
}

.contact-icon{
    width: 25px;
    fill: none;
    stroke-width: 20px;
    stroke: white;
}

.moon{
    /*Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.*/
    mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"/></svg>');
    width: 28px;
    height: 28px;
}

.sun { 
    /* Icon by https://icons8.com */
    mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"><path d="M36 23c7.18 0 13 5.82 13 13s-5.82 13-13 13-13-5.82-13-13S28.82 23 36 23zM40 11c0 .732 0 3.268 0 4 0 2.209-1.791 4-4 4s-4-1.791-4-4c0-.732 0-3.268 0-4 0-2.209 1.791-4 4-4S40 8.791 40 11zM56.506 21.151c-.518.518-2.311 2.311-2.828 2.828-1.562 1.562-4.095 1.562-5.657 0s-1.562-4.095 0-5.657c.518-.518 2.311-2.311 2.828-2.828 1.562-1.562 4.095-1.562 5.657 0S58.068 19.589 56.506 21.151zM61 40c-.732 0-3.268 0-4 0-2.209 0-4-1.791-4-4s1.791-4 4-4c.732 0 3.268 0 4 0 2.209 0 4 1.791 4 4S63.209 40 61 40zM50.849 56.506c-.518-.518-2.311-2.311-2.828-2.828-1.562-1.562-1.562-4.095 0-5.657s4.095-1.562 5.657 0c.518.518 2.311 2.311 2.828 2.828 1.562 1.562 1.562 4.095 0 5.657S52.411 58.068 50.849 56.506zM32 61c0-.732 0-3.268 0-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 .732 0 3.268 0 4 0 2.209-1.791 4-4 4S32 63.209 32 61zM15.494 50.849c.518-.518 2.311-2.311 2.828-2.828 1.562-1.562 4.095-1.562 5.657 0s1.562 4.095 0 5.657c-.518.518-2.311 2.311-2.828 2.828-1.562 1.562-4.095 1.562-5.657 0S13.932 52.411 15.494 50.849zM11 32c.732 0 3.268 0 4 0 2.209 0 4 1.791 4 4s-1.791 4-4 4c-.732 0-3.268 0-4 0-2.209 0-4-1.791-4-4S8.791 32 11 32zM21.151 15.494c.518.518 2.311 2.311 2.828 2.828 1.562 1.562 1.562 4.095 0 5.657s-4.095 1.562-5.657 0c-.518-.518-2.311-2.311-2.828-2.828-1.562-1.562-1.562-4.095 0-5.657S19.589 13.932 21.151 15.494z"></path></svg>');
    width: 35px;
    height: 35px;
}

.theme-icon{
    position: fixed;
    left: 15px;
    mask-repeat: no-repeat;
    background-color: white;
    transition: background-color 0.3s;
}

.theme-icon:hover{
    background-color: var(--blue);
    cursor: pointer;
}

.status{
    margin-right: 25px;
    color: white;
}

@media (max-width: 650px) {
    .footer {
        flex-direction: column;
    }
    .status{
        margin-right: 0;
    }
}