@font-face
{
    font-family: KodeMonoRegular;
    src: url(../font/KodeMono-Regular.ttf);
}

@font-face
{
    font-family: ScotchDisplaySemiBold;
    src: url(../font/ScotchDisplay-SemiBold.ttf);
}

:root
{
    --xsmallFontSize: clamp(0.75rem, 0.75vw, 0.75rem);
    --smallFontSize: clamp(1rem, 2vw, 2rem);
    --middleFontSize: clamp(2rem, 6vw, 6rem);
    --bigFontSize: clamp(2rem, 7vw, 7rem);
    
    --lightgrey: rgb(200, 200, 200);
    --grey: rgb(100, 100, 100);
    --black: #000;
    --white: #fff;
    --pistachio: #ccff00;
    --mono: KodeMonoRegular, sans-serif;
    --display: ScotchDisplaySemiBold, sans-serif;
}

::-webkit-scrollbar
{
    width: 14px;
}

::-webkit-scrollbar-track
{
    background: var(--lightgrey); 
}

::-webkit-scrollbar-thumb
{
    background: var(--grey); 
}

::-webkit-scrollbar-thumb:hover
{
    background: var(--black); 
}

::selection
{
    color: var(--black);
    background: var(--pistachio);
}

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

body
{
    background-color: var(--white);
    overflow-x: hidden;
}

h1
{
    font-family: var(--display);
    font-size: var(--middleFontSize);
    color: var(--black);
    font-weight: normal;
    padding: 1rem;
}

a
{
    text-decoration: none;
    color: var(--black);
}


@media only screen and (orientation: portrait)
{
    :root
    {
        --smallFontSize: clamp(1.5rem, 3vw, 3rem);
        --bigFontSize: clamp(2rem, 13.5vw, 13rem);
    }    
}