:root{
    --bodyColor: #E0E0C0;
    --headerColor: #E0D0A0;
    --socialsBannerColor: #140206;
    --controlsBannerColor: #140206;
    
    --headerBannerColor: #650410;
    --headerBannerColorDark: #250410;

    --navigationButtonColor: #5a1b212d;
    
    --bgColor: #350810;
}

h1
{
    color: var(--headerColor);
    font: 60px Georgia, Serif;
    margin-top: 0px;
    margin-bottom: 0px;
}

h2
{
    color: var(--headerColor);
    font: 45px Garamond, Serif;
    margin-top: 0px;
    margin-bottom: 0px;
    background-image: linear-gradient(90deg, var(--headerBannerColorDark), var(--headerBannerColor), var(--headerBannerColorDark));
}

h3
{
    color: var(--headerColor);
    font: 30px Garamond, Serif;
    margin-top: 0px;
    margin-bottom: 0px;
}

section > hr
{
    border-style: dotted none none none;
    border-color: #FFB050;
    border-width: 3px;
    max-width: 20%;
}

h3 + hr
{
    border-style: dotted none none none;
    border-color: #FFB050;
    border-width: 3px;
    max-width: 10%;
}


body
{		
    color: var(--bodyColor);
    background-image: linear-gradient(var(--bgColor), black);
    height: 100%;
    width: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    text-align: center;
    font: 20px Verdana, Sans-Serif;
}

.wrapper
{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    display: grid;
    grid-template-rows: 20px auto 20px;
    grid-template-columns: 5% auto auto 5%;
    grid-template-areas: 
        "header header header header"
        "leftSpace main main rightSpace"
        "footer footer footer footer";
}

.wrapper > .main
{
    padding-top:15px;
    grid-area: main;
    background-color:  rgba(80, 20, 30, 0.35);
    border-radius: 25px
}

.wrapper > .header
{
    grid-area: header;
}

.wrapper > .leftSpace
{
    grid-area: leftSpace;
}

.wrapper > .rightSpace
{
    grid-area: rightSpace;
}

.wrapper > .footer
{
    grid-area: footer;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.controlsBanner
{
    background-image: linear-gradient(90deg, var(--controlsBannerColor), black, var(--controlsBannerColor));
    text-align: left;
}

.controlsBanner > a > img {
    border-radius: 25%;
    max-height:48px;
    height:64px;
    width:auto;
    padding:10px;
}

.logoIcon
{
    image-rendering: pixelated;
    height:256px;
    width:auto;
    border-radius: 50%;
    padding: 15px;
}

.socialsButtonBanner
{
    background-image: linear-gradient(90deg, var(--socialsBannerColor), black, var(--socialsBannerColor));
}

.socialsButtonBanner > a > img {
    border-radius: 50%;
    max-height:64px;
    height:64px;
    width:auto;
    padding:10px;
}

a {
    color: #D80;
}

.main > .profile {
    display: inline-flex;
    flex-direction: row;
}

.profile > section {
    align-content: center;
}

.navigation
{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    padding-left: 128px;
}

.navigation > a 
{
    display: flex;
    width: 35%;
    padding: 1% 128px 1% 0;
}

.navigation > a > img {
    image-rendering: pixelated;
    max-height:128px;
    max-width:128px;
    height:128px;
    width:auto;
    padding: 0 5% 0 0;
}

.navigation > a > span {
    color: #D80;
    text-decoration: none;
    font-size: 1.5em;
    font-family: Lucida Console, Lucida Sans Typewriter, monospace;
    text-align: left;
    align-content: center;
}

.navigation > a > span:hover
{
    color: #FA2;
}

a:hover
{
    color: #FA2;
}

a:link 
{
    text-decoration: none;
}

a:visited 
{
  text-decoration: none;
}

@media screen and (max-width: 700px)
{
    h1 
    {
        font: 30px Georgia, Serif;
    }
    
    h2 
    {
        font: 25px Garamond, Serif;
    }
    
    h3
    {
        font: 20px Garamond, Serif;
    }
    
    .socialsButtonBanner > a > img
    {
        height: 48px;
        padding:5px;
    }
    
    .logoIcon
    {
        height: 128px;
        padding: 5px;
    }
    
    .navigation
    {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 5%;
    }
    
    .navigation > a
    {
        justify-content: left;
        padding: 1% 0 1% 0;
    }
    
    .navigation > a > img 
    {
        image-rendering: pixelated;
        max-height:64px;
        height:64px;
        width:auto;
    }
    
    .navigation > a > span
    {
        max-width:10%;
    }
    
    .main
    {
        font: 15px Verdana, Sans-Serif;
    }

    .controlsBanner > a > img
    {
        height: 48px;
        padding:5px;
    }

    .main > .profile {
        display: inline;
    }
    
    p > br {
        margin-bottom: 1em;
    }
}