body {
    height: 100vh;
    background:url('../img/bg_header.jpg') no-repeat center/cover;
}
.header {
    max-width:90%;
    margin:0 auto;
    padding-top:50px;
}
.main-nav {
    display:flex;
    justify-content:flex-end;
    font-family: 'Quicksand', sans-serif;
}
.main-nav__link {
    text-decoration: none;
    font-size: 25px;
    margin-left:25px;
    color:white;
}
.main-nav__link:hover {
    color:skyblue;
}
@media screen and (max-width:1024px) {
    .main-nav {
        position: fixed;
        width: 100%;
        height: 100%;
        top:0;
        left:-100vw;
        background:rgba(135,206,235,.85);
        flex-direction:column;
        justify-content:center;
        align-items:center;
        transition:.3s all ease-in-out;
    }
    .main-nav.active {
        left:0;
    }
    .main-nav__link {
        color:darkslategray;
        margin:10px 0;
    }
    .main-nav__link:hover {
        color:white;
    }
    .burger-menu {
        position: fixed;
        top:30px;
        right:30px;
        border-radius:7px;
        border:3px solid #fff;
        width: 40px;
        height: 40px;
        cursor:pointer;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        transition:.5s all cubic-bezier(0.68, -0.55, 0.265, 1.55);
        z-index:1;
    }
    .burger-menu span {
        width: 70%;
        height: 3px;
        border-radius:3px;
        background:#fff;
        margin:2px 0;
        transition:.3s all cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
    .burger-menu.active {
        border-color:skyblue;
        transform:rotate(180deg);
    }
    .burger-menu.active span:nth-of-type(1) {
        width: 30%;
    }
    .burger-menu.active span:nth-of-type(2) {
        width: 60%;
    }
    .burger-menu.active span:nth-of-type(3) {
        width: 15%;
    }
}