header{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: var(--header-height);
    padding: var(--page-spacing);
    background: var(--primary);
    background: linear-gradient(90deg, var(--primary) 5%, var(--secondary) 30%, var(--primary) 95%);
} 
header div.logo{
    width: 40rem;
    margin-right: 10rem;
}
header div.logo a{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 30rem;
}
header div.logo a img{
    height: 8rem;
    background: white;
    border-radius: 50%;
    padding: 2px;
    transition: .3s;
}
header div.logo a div.title{
    display: flex;
    flex-direction:column;
    justify-content: space-between;
    align-items: center;
    width: 25rem;
    transition: .3s;
}
header div.logo a div.title h2{
    margin: 0;
    padding: 0;
    color: white;
    transition: .3s;
}
header div.logo a div.title h2.name{
    font-size: 2.5rem;
    font-weight: 100;
    transition: .3s;
}
header div.logo a div.title h2.name b{
    font-family: 'Simonetta-Black', sans-serif;
    font-weight: 900;
}
header div.logo a div.title h2.degree{
    font-size: 1.9rem;
    font-weight: 100;
    transition: .3s;
}
header nav{
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    align-items: center;
    margin:0;
    padding:0;
    max-width: 49rem;
}
header nav a{
    font-family: 'Simonetta-Regular', sans-serif;
    font-weight: 100;   
    color:white;
    text-decoration: none;
    font-size: 1rem;
    transition: .3s;
}
header nav a.selected,
header nav a:hover{
    text-shadow: 0 0 10px white;
    transform: scale(1.2);
}
/** small fixed header **/
header.scrolled{position: fixed;top: 0;height: 5rem;z-index: 998;}
header.scrolled div.logo a{display: flex;flex-direction: row;}
header.scrolled div.logo a img{height: 3rem;margin-right: 3rem;}
header.scrolled div.logo a div.title{align-items: flex-start;width: 100%;}
header.scrolled div.logo a div.title h2.name{font-size: 1rem;}
header.scrolled div.logo a div.title h2.degree{font-size: .9rem;}

/** ONLY FOR MOBILE **/
header div#open-main-menu,
header div#close-main-menu{
    display: none;
}

@media only screen and (max-width: 768px) {
    header{
        flex-direction: column;
        height: auto;
    }
    header div.logo{
        width: 100%;
        margin: 0;
    }
    header div.logo a{
        width: 100%;
        flex-direction: column;
        transition: .3s;
    }
    header nav{
        flex-direction: column;
    }
    header nav a{
        margin: 2rem 0;
    }

    /** COLLAPSIBLE MENU **/
    header nav{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 0;
        z-index: 999;
        justify-content: space-evenly;
        transition: .3s;
        overflow: hidden;
        background: var(--primary);
        background: linear-gradient(90deg, var(--primary) 5%, var(--secondary) 30%, var(--primary) 95%);
    }
    header nav a{
        font-size: 2.5rem;
    }
    header nav.open{
        width: 100%;
        height: 100%;
    }
    header div#open-main-menu,
    header div#close-main-menu{
        position: absolute;
        top: 10px;
        right: 10px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 3rem;
        height: 3rem;
        border: solid 1px #FFFFFF;
    }
}