/*----------------------------------------------------------*/
/*----------------------------------------------------------*/
/* MAIN */

:root {
    --main-color: rgb(52, 52, 52);
    --main-border-color: rgb(209, 196, 196);
    --main-bcg-light-color: rgb(255, 255, 255);
    --main-bcg-medium-color: rgb(240, 240, 240);

    --text-color: rgb(43, 43, 43);
    --fill-color: rgb(255, 255, 255);

    --border-button-color: rgb(43, 43, 40);

    --special-font: 'Times New Roman', Times, serif;
    --text-font: 'Share Tech Mono', 'Courier New', Courier, monospace;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
}

main {
    background: var(--main-bcg-medium-color);
}


/*----------------------------------------------------------*/
/*----------------------------------------------------------*/
/* BUTTON */

.button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 10px 8px 10px;
    font-family: var(--text-font);
    color: var(--text-color);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.button:hover {
    transform: translateY(5px);
    text-decoration: underline;
}


/*----------------------------------------------------------*/
/*----------------------------------------------------------*/
/* SECTION HEADER */

.section__header {
    position: relative;
    width: 100%;
    height: 10vw;
    font-family: var(--text-font);
    font-variant: small-caps;
    font-size: 2.1em;
    letter-spacing: 12px;
    color: var(--main-color);
    text-align: center;
}

.section__header > h2 {
    padding: 0;
    margin: 0;
}


/*----------------------------------------------------------*/
/*----------------------------------------------------------*/
/* FOOTER */

.footer__wrapper {
    min-height: 10%;
    background: var(--main-bcg-medium-color);
    text-align: center;
    padding: 20px 0;
}

.footer__copyright {
    font-family: var(--text-font);
    color: var(--text-color);
    margin: 0;
}

@media screen and (max-width: 650px) {
    .footer__copyright {
        font-size: .8em;
    }
}


/*----------------------------------------------------------*/
/*----------------------------------------------------------*/
/* NAVIGATION BAR */

.nav-bar {
    position: absolute;
    width: 100%;
    font-size: 1.2em;
    z-index: 2;
}

.nav-bar__list {
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    padding: 0;
    margin: 20px;
    list-style: none;
}

.nav-bar__element {
    flex: 0 1 150px;
    padding: 0;
    margin: 10px;
    border: 1.5px var(--border-button-color) dashed;
    text-align: center;
}

.nav-bar__element:hover {
    border: 1.5px var(--border-button-color) solid;
}

.nav-bar__link {
    width: 100%;
    padding: 8px 10px 8px 10px;
    color: inherit;
    text-decoration: none;
}


/*----------------------------------------------------------*/
/*----------------------------------------------------------*/
/* ASIDE-SOCIALS */

.aside-socials {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 2;
}

.socials__wrapper {
    width: 100%;
    background: var(--fill-color);
    border: 1.5px black dashed;

    transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

.socials__wrapper:hover {
    padding-right: 10px;
    border: 1.5px black solid;

    transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

#icon-github:hover {
    background: black;
    color: white;
    transition: all 0.2s ease-in-out;
}

#icon-linkedin:hover {
    background: #007bb6;
    color: white;
    transition: all 0.2s ease-in-out;
}

#icon-cv:hover {
    background: #bd081c;
    color: white;
    transition: all 0.2s ease-in-out;
}

.socials__link {
    display: block;
    color: black;
    padding: 15px;
    transition: all 0.5s ease-in-out;
}


/*----------------------------------------------------------*/
/*----------------------------------------------------------*/
/* MEDIAS */

@media screen and (max-width: 416px) {
    .nav-bar__element {
        flex: 0 1 100px;
    }
    .socials__link {
        padding: 12px;
    }
}

@media screen and (max-width: 276px) {
    .socials__link {
        padding: 10px;
    }
}


/*----------------------------------------------------------*/
/*----------------------------------------------------------*/
/* ANIMATIONS */

@-webkit-keyframes slideTopDown { from { top:-10vh;  opacity:0; } to { top: 0;  opacity:1; } }
@-moz-keyframes slideTopDown { from { top:-10vh;  opacity:0; } to { top: 0;  opacity:1; } }
@keyframes slideTopDown { from { top:-10vh;  opacity:0; } to { top: 0;  opacity:1; } }

.slide-top-down {
    top: -10vh;
    opacity: 0;

    -webkit-animation: slideTopDown ease-in-out  1;
    -moz-animation: slideTopDown ease-in-out  1;
    animation: slideTopDown ease-in-out  1;

    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
}