@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap');

:root
{
    --backgroundCol: rgb(0,0,0);
    --textAreaCol: hsl(303, 30%, 30%);
    --subTextAreaCol: hsl(303, 20%, 20%);
    --accentCol: hsl(303, 50%, 50%);
    --hyperAccent: hsl(303, 100%, 50%);
    --edgeCol: white;
}

html
{
    background-color: black;
    color: white;

    height: 100%;
}

#header
{
    position: relative;
}

h1
{
    position: absolute;
    width: 100%;
    bottom: 0px;

    font-family: 'consolas';
    font-size: 64px;
}

#headergrad
{
    width: 100%;
    height: 350px;

    object-fit: contain;

    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0),  rgba(255, 255, 255,0), rgb(0, 0, 0)), url("images/self/horizontalphoto.jpg");
    background-size: 100%;
}

nav
{
    height: 50px;
}

nav li
{
    display: inline;
}

nav ul a, .infobutton
{
    color: white;
    text-decoration: none;

    padding: 5px;
    margin: 5px;

    background-color: var(--accentCol);

    border: 2px solid var(--edgeCol);
}
nav ul a:hover, .infobutton:hover, .screenshotButton:hover, .trailerButton:hover
{
    background-color: var(--textAreaCol);
}

.infobutton
{
    margin: auto;
    width: 150px;
}


#selected
{
    background-color: var(--textAreaCol);
}

section a
{
    color: white;
}
section a:hover
{
    color: var(--hyperAccent);
}

.infotext
{
    background-color: var(--subTextAreaCol);

    margin-left: 2em;
    margin-right: 2em;
    margin-bottom: 1em;
    padding-top: 1em;
    padding-bottom: 1em;
}

h1 a
{
    color: white;
    text-decoration: none;
}

h2
{
    margin-top: 0px;
    font-size: 34px;
}


body
{
    margin: auto;
    width: 90%;
    max-width: 1280px;
    text-align: center;

    height: calc(100% - 450px);

    font-family: 'Geist Mono';
    font-size: 16px;
}

#content
{
    background-color: var(--textAreaCol);

    min-height: 100%;
    padding-bottom: 30%;
}

#contact
{
    background-color: var(--textAreaCol);

    padding-top: 2%;
    padding-bottom: 2%;
}

section
{
    padding-top: 2em;
    padding-bottom: 2em;
    border-bottom: dashed white 2px;
}

#contact section
{
    border: none;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left: 8px;
    padding-right: 8px;
}

section p
{
    text-align: left;
    padding-left: 2em;
    padding-right: 2em;
}

section ul
{
    text-align: left;
    padding-left: 4em;
    padding-right: 2em;
}

#screens
{
    display:grid;
}

img
{
    width: 100%;
}

#fullwidthvid
{
    position: relative;
    width: 100%;
    height: 600px;
    left: -2px;
    top: -4px;
    color: transparent;
}
iframe
{
    
    width: 100%;
    height: 100%;
}

#imagesubtitle
{
    text-align: center;
    font-style: italic;
}

.switcher
{
    text-align: center;
    padding-left: 0px;
    padding-right: 0px;
}
.switcher li
{
    display: inline-block;
    text-align: center;

    width: 150px;

    color: white;
    text-decoration: none;

    padding: 5px;
    margin: 5px;

    background-color: var(--accentCol);

    border: 2px solid var(--edgeCol);
}
.screenshotButton:active
{
    background-color: var(--subTextAreaCol);
}
.trailerButton:active
{
    background-color: var(--subTextAreaCol);
}