:root 
 {
    /*Colors*/
    --main-txt-color: rgb(255 165 29);

    /*Header and Footer*/
    --header-height: calc(.115729167 * var(--display-height));
    --footer-height: calc(.115729167 * var(--display-height));
    /*Padding to offset fixed header and footer*/
    --main-padding-top: calc(.63636 * (var(--header-height)));
    --main-padding-bottom: calc(.7619 * (var(--footer-height)));

    /*Main Display*/
    --display-width: 100vw;
    --display-height: 100vh;
    --main-width: 100vw;
    --main-height: calc(100vh - var(--main-padding-top) - var(--main-padding-bottom));

    /*Socials in Footer*/
    --socials-width: calc(.12201 * var(--main-width));
    --socials-height: calc(.32381 * var(--footer-height));

    --socials-icons-width: calc(.2 * var(--socials-width));
    --socials-icons-height: calc(.8 * var(--socials-height));

    --socials-icon-button-width: calc(.1901 * var(--socials-icons-width));
    --socials-icon-button-height: calc(.32381 * var(--socials-icons-height));
    }
    
    body,
    html {
        background-color: var(--main-bg-color);
        display: inline-flex;
        width: var(--display-width);
        height: var(--display-height);
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: space-between;
    }

    body,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-weight: 700;
    }

    main
    {
        padding-top: var(--main-padding-top);
        padding-bottom: var(--main-padding-bottom);

        width: var(--main-width);
        height: var(--main-height);

        display: inline-flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: flex-start;
    }

    header, footer{
        z-index: 1;
        position: fixed;
        background-repeat: no-repeat;
        background-position-x: center;
    }

    header{
        top: 0;
        background-image: var(--header-bg-image);
        background-repeat: no-repeat;
        background-size: var(--main-width) var(--header-height);
        width: var(--main-width);
        height: var(--header-height);
    }

    footer{
        bottom: 0;
        background-image: var(--footer-bg-image);
        background-size: var(--main-width) var(--footer-height);
        background-repeat: no-repeat;
        width: var(--main-width);
        height: var(--footer-height);
    }

    .intro-header {
        padding-bottom: calc(.14 * (var(--header-height)));
        display: inline-flex;
        width: var(--main-width);
        height: var(--header-height);
        text-align: center;
        color: #ffa14e;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-start;
        align-self: center;
        align-content: center;
        align-items: center;
    }

    .intro-message {
        height: calc(.9 * (var(--header-height)));
        width: calc(.9 * (var(--main-width)));
        align-self: center;
        padding-top: 1%;
        padding-bottom: 1%;
    }

    .return-button
    {
        width: calc(.5 * var(--header-height));
        
        height: calc(.5 * var(--header-height));
            
        position: relative;
            
        z-index: 2;
            
        transform-origin: left top;
            
        -webkit-transform-origin-x: left;
            
        -webkit-transform-origin-y: top;
    }

    #title-image
    {
        width: calc(.10417 * var(--main-width));
        height: calc(1.14583 * var(--header-height));
        object-fit: contain;
    }

    #title
    {
        z-index: 3;
        justify-self: center;
        position: fixed;
        width: var(--title-width);
        height: var(--title-height);
        top: var(--title-offset-y);
        left: calc(.5 * 100vw - calc(.5 * var(--title-width)));
    }

    .intro-message > h1 {
        height: 100%;
        width: 100%;
        margin: 2px;
        text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.87);
        -webkit-text-stroke: 2px;
        font-family: cursive;
    }

    .intro-message > h3 {
        text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
    }

    .main-hub-container{
        width: var(--main-width);
        height: var(--main-height);
        align-content: center;
        justify-content: center;
    }

    .footer {
        width: var(--main-width);
        height: var(--footer-height);
        text-align: center;
        padding: 20px 0;
        align-self: flex-end;
    }

    .socials{
        width: var(--socials-width);
        height: var(--socials-height);

        transform-origin: center;
        transform: calc(.5 * (var(--main-width))) calc(.94347 * (var(--main-height)));

        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        justify-items: center;

        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        bottom: 0;

        padding: 2px;
        margin: 2px;
    }

    .list-social-icons{
        margin: 0;
        padding:0;

        width: var(--socials-width);
        height: var(--socials-height);

        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: space-evenly;
        align-items: stretch;
        justify-items: center;

        list-style-type: square;

    }

    .list-social-icons li {
        margin: 0;
        padding:0;


        display: inline-flex;
        align-content: center;
        justify-content: center;
        align-items: center;
        justify-items: center;

        width: var(--socials-icons-width);
        height: var(--socials-icons-height);
    }

    .list-social-icons li a {
        display: inline-flex;
        width: 100%;
        height: 100%;

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