@import url('style.css');

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100px;
    border: 3px solid var(--text-color-light);
    background-color: var(--nav-bg-color-light);
    padding: 25px;

    nav { width: 45%; }
}

nav .menu-icon { display: none; }
nav .menu-icon::before{ cursor: pointer; }

nav ul {
    display: flex;
    justify-content: space-between;
    align-items: center;

    li {
        list-style: none;
        font-weight: 700;
        font-size: 1.4vmin;
        cursor: pointer;
    }
    
    .icon { font-size: 1.6em; }

    li:nth-child(1), li:nth-child(2) { color: var(--home-text-color); }
}

@media screen and (max-width : 1700px) {
    header {
        height: 6vmax;
        padding: 10px;
        h1 { font-size: 2vmax; }
    }
    
    nav ul{
        display: none;
        flex-direction: column;
        position: absolute;
        height: calc(100vh - 6vmax);
        background-color: rgba(252, 250, 254, 0.95);
        width: 100vw;
        transform: translate(-54.8%, .3%);
        justify-content: space-around;

        li{ 
            font-size: 2.5vmax;
            i, span { font-size: 3.5vmax; } 
        }
    }

    nav .menu-icon {
        display: block;
        font-size: 3.5vmax;
        text-align: end;
    }
}