header
{
    position: fixed;
    margin: 0; z-index: 2;
    padding: 0;
}

header h1
{
    width: auto; padding : 0; font-family: Quadranta; font-size: 2em; font-weight: bold;
    text-align: left;
    white-space: nowrap;
}

header ul
{
    padding: 0;
    list-style: none;
}

header ul li
{
    display: inline-block;
    margin: 0;
    padding: 0.2rem 0.4rem;
    color: #E5E5E5;
    transition: color 0.3s ease;
    white-space: nowrap;
}

header ul li a
{
    color: #A532ED;
    text-decoration: none;
    transition: color 0.3s ease;
}

header ul li a:hover
{
    color: #8B2BC7;
    text-decoration: underline;
}


header.folded
{
    top: 0; left: 0;
    width: 100%; height: 7em;
    background-color: rgba(225, 225, 225, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
    box-sizing: border-box;
    gap: 3rem;
    /*border: solid 1px #000;*/
}

header.folded h1
{
    position: static; margin: 0;
    color: #A532ED;
    flex-shrink: 0;
}

header.folded h1 a
{
    color: #A532ED;
    text-decoration: none;
}

header.folded ul
{
    position: static; margin: 0;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: nowrap;
    justify-content: center;
}

header.folded button
{
    position: absolute; top: 0px; right: calc(0px + 5%); margin: 1.5em 2em 0 0;
}

header.unfolded
{
    /*position: absolute;*/
    top: 5%; left: 5%;
    width: 90%; /*height: 90%;*/

    /*
    background-image: url("/resources/img/px000.png"), url("/resources/img/px000.png"), url("/resources/img/px000.png"), url("/resources/img/px000.png"), url("/resources/img/px000.png");
    */

    background-position: top left, calc(7.6em + 20em)/*24em*/ 0px, top left, bottom left, top right;
    background-size: 9em 1px, 100% 1px, 1px, 1px, 1px;
    background-repeat: no-repeat, no-repeat, repeat-y, repeat-x, repeat-y;
    /*font-size: 1em;*/
}

header.unfolded h1
{
    position: absolute; top: calc(.75em - 5%); left: 5em; margin: 0;
    color: #A532ED;
}

header.unfolded h1 a
{
    color: #A532ED;
    text-decoration: none;
}

header.unfolded ul
{
    position: inherit; margin: 2em 0 0 30em;
}

header.unfolded ul li a {text-decoration: none;}

header.unfolded button
{
    position: absolute; top: 0px; right: 0px; margin: 1.5em 2em 0 0;
}

/* Responsive Design */
@media (max-width: 1024px) {
    header.folded {
        padding: 0 0.5rem;
        gap: 2.5rem;
    }
    
    header.folded ul {
        gap: 0.2rem;
    }
    
    header ul li {
        padding: 0.15rem 0.3rem;
        font-size: 0.9em;
    }
}

@media (max-width: 768px) {
    header.folded {
        padding: 0 0.5rem;
        height: 5em;
        gap: 1.5rem;
    }
    
    header.folded h1 {
        font-size: 1.5em;
    }
    
    header.folded ul {
        gap: 0.15rem;
    }
    
    header ul li {
        padding: 0.15rem 0.25rem;
        font-size: 0.8em;
    }
}

@media (max-width: 600px) {
    header.folded {
        flex-direction: column;
        height: auto;
        padding: 0.5rem 1rem;
        gap: 0.5rem;
    }
    
    header.folded h1 {
        margin: 0;
        font-size: 1.3em;
    }
    
    header.folded ul {
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.3rem;
    }
    
    header ul li {
        padding: 0.2rem 0.4rem;
        font-size: 0.8em;
    }
}