@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap');


/* SMALL SCREENS */



:root
{

    --header-content-size: 3em;



    --hover-color-01: #ffffff08;
    --hover-color-02: #ffffff28;
    --default-color-grey-01: #606060;
    --default-color-grey-02: #60606060;
    --default-color-red-01: #f00000;
    --default-color-red-02: #f0000080;

    --color-darkest-black-01: #000000;
    --color-darkest-black-02: #000000f0;
    --color-darkest-black-03: #000000c0;
    --color-dark-black-01: #050505;
    --color-dark-black-02: #05050580;
    --color-lighter-white-01: #ffffff;
    --color-lighter-white-02: #ffffffd0;
    --color-light-grey-01: #b0b0b0;
    --color-light-grey-02: #b0b0b080;
    --color-medium-black-01: #161616;
    --color-medium-black-02: #16161680;
    --color-dark-grey-01: #2f2f2f;
    --color-dark-grey-02: #2f2f2f80;

    --study-color-02: #00ffee80;
    --study-color-01: #00ffee;
    --study-color-03: #00ffee22;



    --fonte-animatic: 'Amatic SC', cursive;
    --font-apple: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --font-angel: "Angel", sans-serif;
    --font-notes: 'Indie Flower', cursive;

}






/* DEFAULT CSS __________________________________________________________________________________*/

    *
    {
        padding: 0em; margin: 0em;
        font-family: Arial, Helvetica, sans-serif;
        text-decoration: none;
        list-style: none;
    }

    body , html
    {
        margin: auto;
        width: 100vw; height: 100vh;
        perspective: 10px;
        overflow-x: hidden;
        background-color: var(--color-dark-black-01);
    }

    body
    {
        position: relative;
    }

    body *
    {
        color: var(--color-lighter-white-02);
    }

    a:hover
    {
        text-decoration: underline;
    }











/* SCROLL _____________________________________________________________________________________________________________________*/

    .scroll::-webkit-scrollbar
    {
        width: 0.5em;
        background-color: var(--color-darkest-black-01);
    }


/* background scroll */

    .scroll::-webkit-scrollbar-track
    {
        margin: 0.75em 0em;
        border: 2px solid var(--color-darkest-black-01);
        border-radius: 0.25em;
    }

    .scroll::-webkit-scrollbar-track:hover
    {
        background: var(--color-medium-black-01);
    }


/* thumb scroll */

    .scroll::-webkit-scrollbar-thumb
    {
        border: 1px solid var(--color-darkest-black-01);
        border-radius: 0.25em;
        background-color: var(--study-color-03);
    }

    .scroll::-webkit-scrollbar-thumb:hover
    {
        background: var(--study-color-02);
    }











/* HEADER _____________________________________________________________________________________________________________________*/

    header
    {
        display: flex;
        justify-content: space-between;
        padding: 0.75em 1em;
        background-color: var(--color-medium-black-02);
    }

    header *
    {
        color: var(--study-color-01);
        font-family: var(--font-apple);
        font-weight: lighter;
    }

    header > div > div , header > div
    {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1em;
    }

    header > div > div , div#related-links
    {
        border: 2px solid var(--color-medium-black-01);
        height: var(--header-content-size);
    }


/* title & link */

    header > div > div:nth-last-of-type(1)
    {
        box-sizing: border-box;
        padding: 0em 1em;
        border-radius: 0.5em;
    }


/* Icons */

    div.icon
    {
        box-sizing: border-box;
        width: var(--header-content-size);
        border-radius: 50%;
    }

    div.icon *
    {
        width: 100%; height: 100%;
        border-radius: 50%;
        transition-duration: 0.15s;
        display: flex;
        justify-content: center;
        align-items: center;
    }


/* Icons Hover */

    div.icon:hover > div , div.icon:hover > a
    {
        width: 90%; height: 90%;
    }

    div.icon:hover
    {
        background: var(--hover-color-01);
        box-shadow: 0em 0em 0.25em var(--hover-color-01);
    }


/* Icone Menu Burger */

    div#container-burge > div > div
    {
        width: 65%; height: 65%;
        flex-direction: column;
        justify-content: space-around;
    }

    div#container-burge > div > div > div
    {
        width: 90%; height: 0.1em;
        background-color: var(--study-color-01);
        border-radius: 05% / 50%;
    }


/* Study Title */

    div#container-title h1
    {
        display: flex;
        align-items: center;
        gap: 0.25em;
        transition-duration: 0.35s;
        font-size: 1.8em;
    }

    div#container-title h1 > span
    {
        color: var(--color-light-grey-01);
        line-height: 1em;
        font-size: 0.5em;
        font-weight: 400;
        display: none;
    }


/* Study Title Hover */

    div#container-waifu:hover ~ div#container-title
    {
        box-shadow: inset 0em 0em 2em var(--color-medium-black-01);
        background-color: var(--color-darkest-black-02);
    }

    div#container-waifu:hover ~ div#container-title *
    {
        color: var(--color-lighter-white-02);
        display: flex;
    }


    div#container-links , div#container-links *
    {
        transition-duration: 0.35s;
    }

    div#container-links > h2 , div#container-links > a
    {
        font-size: 1em;
        font-weight: 400;
    }

    div#container-links > h2 { display: none; }

    div#container-burge { display: flex; }
    div#container-links { display: none; }










/* MAIN _______________________________________________________________________________________________________________________*/

    main
    {
        padding: 0em 1em;
    }

    main > *
    {
        max-width: 70em;
        margin: 1.5em auto;
    }

    main a
    {
        text-align: center;
    }

    div.section-title *
    {
        font-size: 2em;
        text-indent: 0.5em; 
        font-weight: 100;
        border-left: 2px solid var(--color-light-grey-01);
    }

    div.access-content
    {
        margin: 2em auto;
        text-align: center;
    }

    div.access-content > a
    {
        border: 1px solid var(--color-dark-grey-01);
        border-radius: 0.5em;
        padding: 0.5em 2em;
        background-color: var(--color-medium-black-02);
    }


/* PRESENTATION */

    section#apres
    {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-radius: 1em;
        box-shadow: inset 0em 0em 1em var(--color-darkest-black-02);
    }

    section#apres > div
    {
        overflow: hidden;
    }

    section#apres > div:nth-of-type(1) > h2 { display: block; }
    section#apres > div:nth-of-type(2) > h2 { display: none; }


/* Presentation Img */

    section#apres > div:nth-of-type(1)
    {
        max-height: 10em;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1.5px solid var(--color-light-grey-02);
    }

    section#apres > div:nth-of-type(1) > img
    {
        width: 100%; height: 100%;
        object-fit: cover;
        overflow: hidden;
    }

    section#apres > div:nth-of-type(1) > h2
    {
        position: absolute;
        font-size: 1.8em;
    }


/* Presentation Txt */

    section#apres > div > h2 , main p
    {
        padding: 1.5em 1.5em;
        font-family: var(--font-apple);
        color: var(--color-lighter-white-02);
    }

    section#apres > div > p
    {
        text-indent: 1em;
    }


/* Other Styles */

    .container-study
    {
        background-color: var(--color-medium-black-02);
        box-shadow: inset 0em 0em 2em var(--color-darkest-black-02);
        border-radius: 0.75em;
        padding: 0em;
        overflow: hidden;
    }

    .container-study > p
    {
        margin-bottom: 2.5em;
    }

    h2.study
    {
        background-color: var(--study-color-03);
        padding: 0.25em 0.5em;
        font-family: var(--font-apple);
        font-weight: normal;
    }

    div.container-content td , div.container-content th
    {
        padding: 0.5em 0.25em;
        text-align: center;
    }

    div.code *
    {
        text-wrap: balance;
        text-align: center;
        margin: auto;
        margin-bottom: 4em;
        max-width: 80%;
        display: block;
        font-family: 'Courier New', Courier, monospace, Times, monospace;
        color: var(--color-lighter-white-02);
    }

    div#personal-projects-area > * , div#personal-projects-menu > *
    {
        margin: 2em auto;
    }

    div#personal-projects-menu > div#personal-menu
    {
        background-color: var(--color-dark-grey-02);
    }








/* Footer _____________________________________________________________________________________________________________________*/

    footer
    {
        min-height: 8em;
        padding: 1em;
        background-color: var(--color-medium-black-02);
    }

    footer *
    {
        color: var(--color-lighter-white-02);
        font-family: var(--font-notes);
    }