@charset "UTF-8";
@import url("index.css");

header{
    display: flex;
    flex-direction: row;
    position: sticky;
    align-items: center;
    justify-content: center;
    letter-spacing: var(--letter-spacing);
    padding: var(--padding1);
}
nav{
    background-color: var(--black);
    padding: var(--padding1);
    position: fixed;
    width: 100%;
}
nav > a{
    text-decoration: none;
    color: white;
    font: var(--nav);
    padding: var(--padding-nav);
    border-bottom: var(--line) var(--lilac);
    transition: var(--timer);
}
nav > a:hover{
    color: var(--lilac);
}
a.current{
    color: var(--lilac);
}
.button{ 
    background-color: var(--black);
    border-radius: var(--round);
    padding: var(--padding);
    text-align: center;
    align-content: center;
    display: inline-block;
    margin: var(--margin-menu);
    transition-duration: var(--timer);
    cursor: pointer;
}
.button-socials{
    border: none;
    border-radius: var(--round);
    transition: var(--timer);
}
.button-socials:hover{
    background-color: var(--lilac);
}
#socials{
    padding: var(--padding);
    width: 100%;
    position: absolute;
    bottom: 0;
}
h4{
    align-self: center;
    font: var(--nav);
    margin: var(--margin-menu);
    letter-spacing: var(--letter-spacing);
}

@media (max-width: 768px){
    header{
        margin: var(--margin3);
    }
    nav{
        top: 0;
        font: var(--nav-responsive);
    }
    h4{
        font: 1em var(--title)
    }
}