:root{
    font-family: 'Raleway', sans-serif;
    --color-1: #1d2133;
    --color-2: #21295b;
    --color-3: #7a9fd3;
    --color-4: #febc12;
    --color-5: #f2deb6;
}

main {
    margin-left: 12rem;
    padding: 1rem;
}

/* Navigation bar*/
nav{
    background: var(--color-2);
    position: fixed;
    height: 100vh;
    width:12rem;
    background:white;
    font-family: 'Raleway', sans-serif;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    display: flex;
    align-items: center;
    z-index:10;
}

.logo{
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo img{
    width:100%;
    padding:1rem 0.8rem;
}


/* Navigation links*/
.nav-links{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 110%;
    width:12rem;
}

.nav-link{
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--color-1);
}

.nav-link:hover{
    animation: shake 0.7s;
}

@keyframes shake{
    0%{
        transform: translateX(0)
    }
    25%{
        transform: translateX(5px);
    }
        
    50%{
        transform: translateX(-5px);
      }
    75%{
        transform: translateX(5px);
    }
    100%{
        transform: translateX(0px);
      }
}

.nav-link img{
    height:2.1rem;
}

.nav-link span a, .nav-link span a:hover{
    text-decoration: none;
    color:var(--color-2);
    font-weight: 600;
    font-size: 0.8rem;
}

/* Nav-icons */
.nav-link .nav-icons{
    margin-top:auto;
    display: flex;
    text-align: center;
}

.nav-icons:hover{
    animation:none;
}

.nav-link .icon-trees{
    height:35%;
    width:100%;
}

.icon-icons{
    border-top:0.2rem solid var(--color-2);
    background: var(--color-2);
    padding-top:1.4rem;
    text-align:center;
    width:12rem;
    padding-bottom: clamp(200px, 250px, 300px);
    height:100%;
}

.icon-icons img{ height:1.4rem;}

.icon-icons img:not(:last-child){
    margin-right: 0.7rem;
}

.toggle{
    position: absolute;
    background:white;
    top:0.5rem;
    right:0.5rem;
    height:2rem;
    cursor: pointer;
    display: none;
}
.toggle:focus{
    outline:none;
}
.toggle i{
    color:var(--color-2);
    background:white;
}

@media only screen and (max-width: 768px){
    nav{
        width:2rem;
    }
    .nav-links{
        display: none;
    }
    .logo{
        display: none;
    }
    .toggle{
        display: block;
    }
}

.langWrap{
    display: flex;
    align-content: center;
    justify-content: center;
}

.nav-link .langWrap:hover{
    animation: none;
}

.langWrap a img{
    height:1.4rem;
    padding: 0 5px;
}