@media (max-width: 750px) {
    header{
        width: 100%;
        position: fixed;
        z-index: 999;
        background-color: transparent;
        padding: 25px 40px;
    }
    
    header.scroll{
        background-color: var(--sub);
        padding: 10px 35px;
        box-shadow: 0 0 10px var(--shd);
    }
    
    header nav{
        display: none;
    }

    header .btn-sider{
        display: block;
        width: 40px;
        height: 40px;
        background-color: var(--sub);
        border-radius: 7px;
        position: relative;
        z-index: 999;
        cursor: pointer;
    }

    header .btn-sider::before{
        content: '';
        position: absolute;
        width: 34px;
        height: 4px;
        background-color: var(--main);
        border-radius: 5px;
        top: 8px;
        left: 3px;
        transition: all 0.3s;
    }
    header .btn-sider::after{
        content: '';
        position: absolute;
        width: 34px;
        height: 4px;
        background-color: var(--main);
        border-radius: 5px;
        bottom: 8px;
        left: 3px;
        transition: all 0.3s;
    }

    header .btn-sider.click::before{
        transform: rotate(225deg);
        top: 17px;
    }
    
    header .btn-sider.click::after{
        transform: rotate(-225deg);
        top: 17px;
    }

    header nav a{
        color: var(--main);
        text-decoration: none;
        font-size: 18px;
        padding: 7px;
        margin: 5px;
        display: inline-block;
        position: relative;
    }
    
    header nav a::before{
        content: '';
        width: 0;
        height: 3px;
        background-color: var(--main);
        border-radius: 3px;
        position: absolute;
        top: 0;
        right: 0;
        transition: all 0.3s;
    }
    
    header nav a::after{
        content: '';
        width: 0;
        height: 2.7px;
        background-color: var(--main);
        border-radius: 3px;
        position: absolute;
        bottom: 0;
        left: 0;
        transition: all 0.3s;
    }
    
    header nav a:hover::before,
    header nav a:hover::after,
    #active::before,
    #active::after{
        width: 100%;
    }
    
    .links a{
        color: var(--sub);
        font-size: 24px;
    }
    
    header.scroll .links a{
        color: var(--w);
    }

    aside {
        width: 100%;
        background-color: var(--shd);
        backdrop-filter: blur(3px);
        position: fixed;
        height: 100vh;
        z-index: 998;
        top: 0;
        right: -100%;
    }
    aside.show{
        right: 0;
        scrollbar-gutter: stable both-edges;
    }
    aside nav{
        width: 100%;
    }
    aside nav a{
        text-align: center;
        padding: 7px;
        color: var(--w);
        text-decoration: none;
        background-color: var(--main);
        color: var(--sub);
        font-size: 18px;
        font-weight: 600;
        border-radius: 10px;
    }
    aside nav a:hover{
        background-color: var(--sub);
        color: var(--main);
    }
    aside.show nav a{
        animation: come var(--i) ease-out 1;
    }

    @keyframes come {
        from{
            transform: translateX(300px);
        }
        to{
            transform: translateX(0);
        }
    }
}


@media (min-width: 750px) {
header{
    width: 100%;
    position: fixed;
    z-index: 999;
    background-color: transparent;
    padding: 25px 70px;
}

header.scroll{
    background-color: var(--sub);
    padding: 10px 35px;
    box-shadow: 0 0 10px var(--shd);
}

header nav a{
    color: var(--main);
    text-decoration: none;
    font-size: 18px;
    padding: 7px;
    margin: 5px;
    display: inline-block;
    position: relative;
}

header nav a::before{
    content: '';
    width: 0;
    height: 3px;
    background-color: var(--main);
    border-radius: 3px;
    position: absolute;
    top: 0;
    right: 0;
    transition: all 0.3s;
}

header nav a::after{
    content: '';
    width: 0;
    height: 2.7px;
    background-color: var(--main);
    border-radius: 3px;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all 0.3s;
}

header nav a:hover::before,
header nav a:hover::after,
#active::before,
#active::after{
    width: 100%;
}

.links a{
    color: var(--sub);
    font-size: 24px;
}

header.scroll .links a{
    color: var(--w);
}

aside, .btn-sider{
    display: none !important;
}
}

footer {
    background-image: url(../images/footer_back.jpg);
    background-position: center;
    background-size: cover;    
    min-height: 50vh;
}

.footer{
    background-color: var(--shd);
    color: var(--w);
}

footer a{
    font-size: 22px;
    color: var(--w);
    text-decoration: none;
}

footer .links a{
    color: var(--w) !important;
    margin: 0 12px;
    font-size: 30px;
}