@import url('reset.css');
@import url('properties.css');
@import url('plugins.css');
@import url('functional.css');

/* ====================================================================================
    General
   ==================================================================================== */
html
{
    font-size: 100%;
    min-height: 100%;
}

body
{
    margin: 0;

    background-color: var(--bg);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    min-height: 100%;
}

main
{
    min-height: 100%;
}

a
{
    text-decoration: none;
}

a:hover
{
    transition: color 0.15s ease-in-out;
    color: var(--text-primary-hover);
}

ul
{
    list-style-type: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p
{
    margin-top: 0;
}

/* ====================================================================================
    Header
   ==================================================================================== */
   
#HeaderTarget,
.SiteHeader
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    background-color: var(--bg-panel);
    box-shadow: var(--header-shadow);
    
    position: fixed;
    top: 0;
    z-index: 1000;
    width: 100%;
}

#HeaderTarget
{
    height: 82px;
}

/* --- Nameplate --- */

.Nameplate
{
    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    & > h1
    {
        font-size: 1.5rem;
        font-weight: 700;
    }

    & > h2
    {
        font-size: 1.2rem;
        font-weight: 400;
    }
}

.Nameplate,
.Contacts
{
    flex: 0 1 25%;
}

/* --- Navigation --- */

#Navigation
{
    flex: 0 1 50%;
}

nav ul
{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 0;
    
    margin: 0;
    height: 100%;
}

nav a 
{
    color: var(--text-primary);
}

.NavItem
{
    width: 100%;
    font-size: 1.6rem;
}

.NavItem:hover,
.active
{
    text-decoration: underline;
    text-decoration-thickness: 0.09rem;
    text-underline-offset: 0.2rem;

    color: var(--text-primary);
}

/* --- Contacts --- */

.Contacts ul
{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    max-width: 250px;
}

.ContactItem
{
    text-decoration: none;
    text-align: center;
    font-size: 1.4rem;

    width: var(--contact-radius);
    height: auto;

    transition: transform 0.1s linear;

    &:hover
    {
        transform: scale(1.15);
        text-decoration: none;
    }
}

#CV
{
    width: var(--contact-radius);
    height: var(--contact-radius);

    border: var(--contact-outline-width) solid var(--contact-icon);
    border-radius: 50%;
    vertical-align: middle;
    display: table-cell;
    text-align: center;

    & > h1
    {
        color: var(--contact-icon);

        font-weight: 500;
        font-size: 1.7rem;
        line-height: normal;
    }
}

/* ====================================================================================
    Footer
   ==================================================================================== */
footer
{
    display: block; 

    background-color: var(--bg-panel);
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: center;

    & > p
    {
        font-size: 1rem;
    }
}

/* ====================================================================================
    Content
   ==================================================================================== */

.IntroCard
{
    display: block;
    width: fit-content;
    margin: auto;

    position: relative;

    background-color: var(--bg-card);
    text-align: center;

    padding: min(4rem, 10%);
    margin-top: 8rem;
    
    box-shadow: var(--card-shadow);

    & > h1
    {
        font-size: 2.5rem;
    }

    & > p
    {
        margin-top: 1rem;
        font-weight: 500;
    }

    & > img
    {
        width: 15vw;
        min-width: 200px;
        height: auto;

        position: absolute;
        top: 5%;
        right: -20%;

        transform: rotate(20deg);
    }
}

.Primer
{
    text-align: center;
    font-weight: 500;

    padding-top: 3rem;
}

/* --- Fields --- */

.Fields
{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;

    margin: auto;
    padding-top: 1rem;

    max-width: 1200px;
    width: 100%;

    padding-left: 1rem;
    padding-right: 1rem;
    
    & > li a
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        width: 300px;
        height: 300px;

        background-color: var(--bg-panel);
        box-shadow: var(--card-shadow);
        border-radius: 20px;

        & > img
        {
            margin-top: 2rem;
            width: auto;
            height: 50%;
        }

        & > h1
        {
            font-size: 2.5rem;
        }

        transition: transform 0.1s ease-in;

        &:active,
        &:hover
        {
            transform: scale(1.025);
        }
    }
}

/* --- Game Showcase --- */

.GameShowcase
{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;

    margin: auto;
    padding: 0;
    margin-bottom: 3rem;

    max-width: 80%;
}

.Game
{
    width: 30rem;
    height: auto;

    margin: 3rem;
    margin-bottom: 5rem;

    position: relative;

    & > li
    {
        width:fit-content;
    }
}

.GameCard
{
    display: block;
    width: 80%;
    background-color: var(--bg-card);
    text-align: left;

    margin: auto;
    position: absolute;

    padding: 0.5rem;
    padding-bottom: 2rem;

    bottom: -75px;
    left: 10%;

    & > h1
    {
        font-weight: 600;
        font-size: 1.5rem;
        text-align: center;
    }

    & > p
    {
        padding: 0.5rem;
    }

    &:before 
    {
        width: inherit;
        height: inherit;

        transform: scale(2);

        background-color: var(--card-shadow-alt);
        z-index: -1;
    }
}

.GameEngine
{
    position: absolute;

    right: 5px;
    bottom: 5px;

    width: 50px;
    height: auto;
}

.OnSteam
{
    position: absolute;    
    top: -30px;
    left: -30px;
    width: 35%;

    background: linear-gradient(var(--steam-card), var(--steam-card)) padding-box,
              linear-gradient(to right,rgba(19, 131, 182, 1) 0%, rgba(16, 124, 172, 1) 10%, rgba(15, 37, 87, 1) 75%, rgba(11, 26, 48, 1) 95%, rgba(16, 25, 48, 1) 100%) border-box;
    border-radius: 10px;
    border: 4px solid transparent;

    padding: 0.4rem;

    transition: transform 0.15s ease-in;

    &:active,
    &:hover
    {
        transform: scale(1.075);
    }

    & > a
    {
        width: 100%;

        display: flex;
        flex-direction: row;
        justify-content: space-between;

        & > h1
        {
            font-size: 1.4rem;
            font-weight: 600;
            line-height: 1.5;
            
            color: var(--bg); 
        }

        & > img
        {
            width: 35px;
            height: 35px;

            margin-top: auto;
            margin-bottom: auto;
        }     
    }
}

.GameMedia
{
    position: relative;
    
    & > video
    {
        opacity: 0;
        transition: opacity 0.25s ease-in-out;
        
        position: absolute;
        top: 0;
        left: 0;

        width: 0;
        height: 0;

        background-color: black;
    }
}

.ShowGameVideo
{
    opacity: 1 !important;
}

/* ====================================================================================
    About Me
   ==================================================================================== */
.AboutMePage
{
    background-color: var(--bg-card);
}

.AboutMeBanner
{
    margin-top: 4rem;

    width: 100%;
    padding: 4rem;
    padding-top: 5rem;

    background-image: url(../Content/sky.jpg);
}

.AboutMeCard
{
    display: flex;
    flex-direction: row;

    margin: auto;

    width: max(900px, 50%);
}

.AboutMeCard img
{
    width: 400px;
    height: auto;
}

.AboutMeBanner h1
{
    font-size: 1.5rem;
    font-weight: 800;
    text-align: center;
}

.AboutMeBanner h2
{
    margin-top: 1rem;
    margin-bottom: 3rem;

    font-size: 1rem;
    font-weight: 600;
    text-align: center;
}

.AboutMeIndent
{
    width: 100%;
    max-width: 1100px;
    margin: auto;
}

.AboutMeIndent h1
{
    font-size: 2.5rem;
    font-weight: 800;
}

.AboutMeContent
{
    background-color: var(--bg-card);

    width: 100%;
    padding: 4rem;
}

.AboutMeContent p
{
    margin-bottom: 1rem;
}

.AboutMeDescription
{
    padding: 2rem;
    padding-top: 3rem;
}

.AboutMeDescription h1
{
    margin-bottom: 1rem;
}

.AboutMeDescription h2
{
    font-size: 2rem;
}

.AboutMeDescription p
{
    font-size: 1.3rem;
    font-weight: 400;
}

.Qualifications
{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.Qualifications h1
{
    text-align: center;
}

.Qualifications > *
{
    flex: 0 1 50%;
}

.Skills ul
{
    list-style: circle;
    font-size: 1.3rem;
}

.Software ul
{   
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;

    padding: 0;
    width: 70%;

    margin: auto;
}

.Software img
{
    width: 100px;
    height: 100px;
    padding: 1rem;
}

.Education
{
    padding: 0 2rem;
    padding-bottom: 2rem;
    font-size: 1.2rem;
}

.Education h1
{
    text-align: center;
    margin-bottom: 2rem;
}

.EducationContent
{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;

    margin-bottom: 1.5rem;
}

.EducationContent > *
{
    flex: 0 1 50%;
}

.EducationLabel h2
{
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.EducationLabel h3
{
    font-size: 1.0rem;
    margin-bottom: 0.5rem;
}

/* ====================================================================================
    Content
   ==================================================================================== */
.FieldContent
{
    width: 60%;
    margin: auto;
    margin-top: 8rem;
    margin-bottom: 2rem;

    background-color: var(--bg-card);
    border-radius: 30px;
    padding: 1rem 8rem;

    position: relative;

    z-index: 1;

    scroll-margin-top: 8rem;
}

.FieldContent h1
{
    text-align: center;
}

.FieldContent h2, 
.FieldContent h3
{
    text-align: left;
}

.FieldContent h1
{
    font-size: 3.5rem;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}

.FieldContent h2
{
    font-size: 2rem;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

.FieldContent h3
{
    margin-top: 2rem;
    font-size: 1.5rem;
}

.FieldContent p
{
    font-size: 1.2rem;
}

.FieldContent a
{
    text-decoration: underline;
}

.FieldContent a
{
    text-underline-offset: 2px;
}

.StandaloneImage,
.StandaloneVideo
{
    max-width: 95%;

    width: 600px;
    height: fit-content; 

    display: block;
    margin: auto;

    border: 5px solid var(--content-switcher-outline);
    box-shadow: var(--content-switcher-shadow);

    border-radius: 10px;
}

.ContentMarginTop
{
    margin-top: 2rem;
}

.ContentMarginBottom
{
    margin-bottom: 2rem;
}

.ContentMarginTopSmall
{
    margin-top: 1rem;
}

.ContentMarginBottomSmall
{
    margin-bottom: 1rem;
}

/* ====================================================================================
    Game Display
   ==================================================================================== */

.GameDisplayCard
{
    width: 95%;
    max-width: 600px;

    display: block;
    margin: auto;

    position: relative;

    background-color: var(--bg-card);

    margin-top: 2rem;
    margin-bottom: 3rem;
    padding: 1.0rem 2.5rem;

    & > h1
    {
        text-align: center;
        font-size: 3rem;

        margin-bottom: 1rem;
    }

    & > .OnSteam
    {
        top: -35px;
    }
}

/* This damn long name keeps being an issue*/
.KraxDisplayCard
{
    height: 370px;
}

.GameDisplayCard ul
{
    display: flex;
    width: 100%;
    flex-wrap: wrap;

    margin-top: 2rem;

    font-size: 1.1rem;
    list-style-type: circle;
}

.GameDisplayCard li
{
    flex: 1 0 50%;
}

.GameAttachments
{
    display: flex;
    flex-direction: row;
    width: 95%;

    justify-content: center;
}

.GameAttachments *
{
    margin: 1rem;
}

.AccessAcquired,
.KraxCacaw
{
    padding-top: 2rem;
    padding-bottom: 2rem;

    margin: 0;

    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;

    width: 100%;
}

.AccessAcquired
{
    background-image: url("../Content/AAIconLarge.png");
}

.KraxCacaw
{
    background-image: url("../Content/KraxIconLarge.png");
}

.GameTransition
{
    height: 50px;
    background-color: var(--bg-panel);
}

.Team
{
    text-align: left;

    font-size: 1.2rem;
}

table tr
{
    margin-bottom: 0.5rem;
}

table th
{
    font-weight: 500;
    width: 250px;
}

.Subtitle
{
    font-style: italic;
}

.CenteredText
{
    text-align: center !important; 
}

.GameSpacer
{
    margin-top: 8rem;
}

.TextIndent
{
    white-space: pre;
}

.TextList
{
    list-style-type: circle;
    font-size: 1.2rem;

    & > li
    {
        padding-bottom: 0.5rem;
    }

    & > li:last-child
    {
        margin-bottom: 0;
    }
}

.Takeaways
{
    list-style-type: disc;

    font-size: 1.2rem;
}

.DisplayContent
{
    width: 800px;
}