/*nofouc*/
body>* { visibility:initial }

:root 
{

    --color-bg: #1c1e1f; 
    --color-banner: #151617;
    --color-border:#726a5d;
    --color-border-dark:#0f1011;
    --color-text: #e8e6e3;
    --color-text-secondary: #606060;
  
    --color-link: #67b5fe;
    --color-link-visited:#3a90df;

    --color-line:#007bff;

    --color-card:#242729;
    --color-card-2: #1d1f20;

    --violet-rose: #5d3d8b;
    --gold:#ffc677;
    --orange:#ee864e;
    --orange2:#fd7e14;
    --deep-blue:#003cc7;

    --fine-red:#df4655;
    --fine-green:#61d97c;

    --gap:0.7em;

}

*
{
    box-sizing: border-box;
    margin: 0;
    border-color: var(--color-border);
}

body
{
    height: 100vh;
    overflow: auto;
    background-color: var(--color-bg);
    color: var(--color-text);
} 

header, footer
{
    background-color: var(--color-banner);
}

header
{
    h1
    {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

footer
{
    text-align: right;
    font-size: 0.8em;
}

nav
{
    display: grid;
    grid-template-columns: max-content;
    grid-auto-flow: row;
    grid-auto-rows: min-content;
    padding: 2em;

    gap: 1em;
    overflow-y: auto;

    a
    {
        color: var(--color-link);
        border: 1px solid;
        border-color: var(--color-border);
        padding: 0.5em 1em;
        text-decoration: none;
        transition: transform 0.5s ;
        &:active
        {
            text-decoration: underline;
        }
        &:hover 
        {
            color: var(--color-link-visited);
            transform: scale(1.05);
        }   
    }
}

main
{
    display: grid;
    grid-template-rows: max-content 1fr ;
    padding: var(--gap);
    gap: var(--gap);
}

footer
{
    background-color: var(--color-banner);
    text-align: right;
    padding-right: 0.3em;
    font-size: 0.8em;
    box-shadow: 0px -1px 6px 0px rgba(0, 0, 0, 0.6);
}

section {
    background-color: var(--color-card);
    width: 100%;
    margin: 0 auto;
    padding: 1em;
}

html
{
    font-size: clamp(0.8rem, 2vmin, 2rem);
}
/*
@media screen and (min-resolution: 100dpi) {
  html {
    font-size: 1.5rem;
  }
}*/



/*


@media screen and (max-resolution: 99dpi) {
  html {
    font-size: 1em;
  }
}*/