/* Positioning */
.header
{
    position: fixed;
    z-index: 8;

    height: 100%;
    width: 22.5%;

    top: 0;
    left: 0;

    font-family: "PatrickHand", sans-serif;

    background-color: rgb(75, 44, 142);
    background-image: url("../img/bar-hori.png");
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
}

.header .links
{
    position: fixed;

    top: 50%;
    transform: translateY(-50%);

    padding: 3em;
}

.header .nav a
{
    position: relative;
    display: block;
    margin-top: 0.5em;
}

.header .logo
{
    background-image: url("../img/logo-verti.png");
    background-size: cover;
    background-repeat: no-repeat;
    height:3.5em;
    width:120%;
    transform:translateX(-10%);
}

.header .socials
{
    padding-top:1.5em;
}

.header .socials img
{
    max-height:0.9em;
    padding-right:0.25em;
    opacity: 0.7;
    transition: opacity ease 0.5s;
}

.header .socials img:hover
{
    opacity: 1;
}


.Site
{
    position: relative;
    width: 77.5%;
    left: 22.5%;
}


/* Text */
.header a
{
    font-size: 1.6em;
    font-weight: bold;
    font-style: normal;
    text-decoration-line: none;
    color: rgb(235, 235, 235);
}

.header .nav a::before 
{
    content: '';

    position: absolute;

    width: 100%;
    height: 4px;

    left: 0%;
    bottom: 0%;
    border-radius: 4px;

    background-color: rgb(235, 235, 235);

    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
}
  
.header .nav a:hover::before 
{
    transform-origin: left;
    transform: scaleX(1);
}


/* Resize event */
@media all and (max-width: 1200px)
{
    .header
    {
        width: 25%;
    }

    .Site
    {
        left: 25%;
        width: 75%;
    }    
}

@media all and (max-width: 990px)
{
    .header
    {
        width: 27.5%;
    }

    .Site
    {
        left: 27.5%;
        width: 72.5%;
    }    
}

@media all and (max-width: 835px)
{
    .header
    {
        width: 30%;
    }

    .Site
    {
        left: 30%;
        width: 70%;
    }    
}

@media all and (max-width: 800px)
{
    .header
    {
        width: 35%;
    }

    .Site
    {
        left: 35%;
        width: 65%;
    }    
}

@media all and (max-width: 700px)
{
    .header
    {
        height: 9.5em;
        width: 100%;
    }

    .header .links
    {
        position: relative;

        top: 0;
        transform: translateY(0%);
        padding: 1.25em;

        text-align: center;
    }
    
    .header .logo
    {
        background-image: url("../img/logo-hori.png");
        background-size: contain;
        background-position: center;
        height:2em;
        width:100%;
        transform: translateX(0);
    }

    .header a
    {
        font-size: 1.4em;
    }

    .header .nav a
    {
        display: inline;
        margin: 0.25em;
    }


    .header .socials
    {
        padding-top:0.3em;
    }

    .header .socials img
    {
        max-height:0.8em;
    }


    .Site
    {
        left: 0%;
        width: 100%;
    }   

}