:root {
    /* couleurs */
    --white: #ffffff;
    --black: #000;

    --highlight-bg: #1c1c1c;
    --highlight-text: #ffffffee;

    /* fontes */
    --serif: 'Suisse Works Book', Times, serif;
    --sans-serif: "Suisse Intl", Arial, Helvetica, sans-serif;

    /* marges */
    --small-marge-y: 32px;
    --small-marge: 35px;
    /* marges mobile */
    --small-marge-y-mb: 13px;
    --small-marge-mb: 15px;

    --width-minus-marge: calc(100vw - (calc(var(--small-marge)) * 2));
    --width-minus-marge-mb: calc(100vw - (calc(var(--small-marge-mb)) * 2));

}

* {
    transition: all ease-in-out 0.25s;
}

body {
    background-color: var(--white);
    color: var(--black);

    text-rendering: optimizelegibility;
    font-family: var(--sans-serif);

    line-height: 1.15;

    padding: var(--small-marge);

    font-size: 12pt;
}

::-moz-selection {
    background-color: var(--highlight-bg);
    color: var(--highlight-text);
}

::selection {
    background-color: var(--highlight-bg);
    color: var(--highlight-text);
}

em,
i {
    font-family: 'Suisse Works Book', serif;
    font-style: italic;
}


a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    opacity: 0.7;
}

/* img {
    width: 200px;
    height: auto;
} */

/* 
*
HEADER
*
*/

header {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;

    padding: var(--small-marge-y) var(--small-marge) 0 var(--small-marge);

    width: var(--width-minus-marge);
    justify-content: space-between;

    font-size: 1.2em;

    z-index: 10;
}

header h2 {
    text-align: right;
}


/* 
*
home FOOTER
*
*/

.home-footer {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;

    padding: 0 var(--small-marge) var(--small-marge-y) var(--small-marge);

    width: var(--width-minus-marge);
    justify-content: space-between;

    font-size: 0.85em;

    z-index: 10;
}

.home-footer__credits {
    text-align: right;
}



/* 
*
home CONTENT
*
*/

.hero-media-wrapper {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    height: 85vh;
    height: 85svh;

    max-width: 500px;
}

.hero-media-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;

    user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

#hero-img {
    cursor: pointer;
}

.hero-caption {
    position: fixed;
    top: calc(100vh - 10em);
    top: calc(100svh - 10em);

    left: calc(100vw - 10em);

    text-align: center;

    transform: translate(-100%, -100%) rotate(-45deg);

    width: 12.5em;
}



/* CV */

.page-content {
    position: fixed;

    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;
    height: 100svh;


    overflow-y: scroll;

    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;

    /* pointer-events: none; */
    cursor: pointer;
}

#cv-content {
    display: none;
    transition: none;
}


.cv-content {
    margin-bottom: var(--small-marge);
    font-family: var(--serif);

    pointer-events: auto;

    font-size: 1.2em;
}

.cv-content h3 {
    font-family: var(--sans-serif);
    margin-bottom: 0.4em;
    font-size: 105%;
}

.cv-content h3:nth-of-type(n+2) {
    margin-top: 1.2em;
}





/* 
*
---------------------
*
MOBILE VERSION
*
---------------------
*
*/

@media screen and (max-width: 700px) {
    body {
        font-size: 10pt;
    }

    header {
        padding: var(--small-marge-y-mb) var(--small-marge-mb) 0 var(--small-marge-mb);
        width: var(--width-minus-marge-mb);
    }

    .home-footer {
        padding: 0 var(--small-marge-mb) var(--small-marge-y-mb) var(--small-marge-mb);
        width: var(--width-minus-marge-mb);
    }


    .hero-media-wrapper {

        top: 15vh;
        top: 15svh;

        transform: translateX(-50%);

        height: 45vh;
        height: 45svh;

        max-width: 50vw;
    }

    .hero-caption {
        top: calc(100vh - 11em);
        top: calc(100svh - 11em);

        left: calc(100vw - 4em);

        font-size: 0.75em;
    }

    .cv-content {
        font-size: 1em;
    }
}