header > div
{
    display:flex;
    justify-content:center;
    width:100%;
    height:300px;
    background-image:url("../img/header-background.png");
    background-position:center;
    background-size:cover;
    user-select:none;
}
header > div:not(#mainhead)
{
    height:90px;
}
header > div > div
{
    color:white;
    height:300px;
    width:280px;
    display:flex;
    justify-content:center;
}
header > div > div p
{
    color:var(--whiteice);
    letter-spacing:1px;
    font-size:12px;
}
header img
{
    height:100%;
    aspect-ratio:1/1;
}
header > div:not(#mainhead) img
{
    cursor:pointer;
}
header > nav
{
    height:40px;
    width:fit-content;
    display:flex;
    position:fixed;
    z-index:3;
    top:25px;
    right:25px;
    left:25px;
    border-radius:10px;
    font-family:var(--manrope);
    font-weight:bold;
    background:linear-gradient(135deg, var(--petroleum) 20%, var(--bluebase) 80%);
    box-shadow:0 10px 12px 1px rgba(0, 0, 0, 0.5);
}
header > nav a, header > nav > div
{
    color:var(--whiteice);
    font-size:14px;
    padding:0 20px 0 20px;
    display:flex;
    align-items:center;
    cursor:pointer;
    letter-spacing:1px;
}
header > nav a.active
{
    background:var(--whiteice);
    color:#777777;
}
header > nav a:not(.active):hover, header > nav > div:hover
{
    background-color:var(--bluelake);
}
header > nav > a:first-child,
header > nav > div:first-child
{
    border-radius:10px 0 0 10px;
}
header > nav > a:last-child,
header > nav > div:last-child
{
    border-radius:0 10px 10px 0;
}
header > nav > div
{
    position:relative;
    transition:0.3s;
}
header > nav .subnav
{
    position:absolute;
    top:40px;
    left:0;
    width:max-content;
    opacity:0;
    visibility:hidden;
    box-shadow:0 10px 15px 1px rgba(0, 0, 0, 0.25);
    z-index:3;
    transition:0.3s;
}
header > nav .subnav a
{
    background-color:var(--bluebase);
    padding:5px 10px 8px 10px;
}
header > nav > div:hover .subnav
{
    visibility:visible;
    opacity:1;
}