@charset "utf-8";

@font-face
{
    font-family: IBMnormal;
    src: url(IBM_Plex_Mono/IBMPlexMono-Light.ttf);
}

@font-face
{
    font-family: IBMh1;
    src: url(IBM_Plex_Mono/IBMPlexMono-ExtraLight.ttf);
}

@font-face
{
    font-family: IBMh2;
    src: url(IBM_Plex_Mono/IBMPlexMono-Thin.ttf);
}

@keyframes autoplay
{
    0% {visibility: visible; opacity: 0; height: auto;}
    12% {visibility: visible; opacity: 1; height: auto;}
    38% {visibility: visible; opacity: 1; height: auto;}
    49% {visibility: hidden; opacity: 0; height: auto;}
    50% {visibility: hidden; opacity: 0; height: 0px;}
}

:root
{
    --background: #0D3B66; /* Regal Navy */
    --text: #FAF0CA; /* Cornsilk */
    --accent: #F4D35E; /* Royal Gold */
    --accent-two: #FCCA46; /* Golden Pollen */
    --accent-three: #808080; /* Grey */
}

*
{
    margin: 0;
    padding: 0;
	border: none;
}

html, body
{
    width: 100%;
    height: 100%;
}

    body
    {
        background: var(--background);
        min-height: 100%;
    }
    
        h1
        {
            font-family: IBMh1;
            color: var(--accent);
            font-size: 3.5rem;
        }
    
        h2
        {
            font-family: IBMh2;
            color: var(--accent-two);
            font-size: 1.7rem;
            padding-bottom: 80px;
        }
    
        h3
        {
            font-family: IBMh2;
            color: var(--accent-two);
            font-size: 1.2rem;
            padding-top: 40px;
            padding-bottom: 40px;
        }
    
        p
        {
            font-family: IBMnormal;
            color: var(--text);
            font-size: 1.3rem;
        }

        pre
        {
            font-family: IBMnormal;
            color: var(--text);
            font-size: 1rem;
        }
    
        span
        {
            color: var(--accent);
        }
    
        span.grey
        {
            color: var(--accent-three);
        }
    
        main
        {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-items: stretch;
            align-items: center;
        }
    
            header, footer
            {
                flex-shrink: 0;
                width: 80%;
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
            }

            header
            {
                height: 20vh;
            }

            footer
            {
                height: 10vh;
            }

            div.container
            {
                width: 80%;
                flex-shrink: 1;
            }
            
            section
            {
                width: 100%;
                overflow: hidden;
            }