/* ~~~ General ~~~ */
:root {
    --prim-nblu: #404040;
    --prim-purp: #333333;
    --secn-gren: #8cff66;
    --secn-yelw: #33aff3;
}

* {
    height: inherit;
}

html, body {
    /* Taken from https://stackoverflow.com/questions/5657964/css-why-doesn-t-percentage-height-work
    *  This sets the height of the body and page to max so that the CSS can only be done with percentages
    */
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #333333;
}

#wrapper {
    width: 100%;
    height: 100%;
}

.center-child { display: flex; }
.center-child span { margin: auto; height: auto; }

/* ~~~ Icons ~~~ */
.fa-white { color: white; }
.fa-black { color: black; }
.fa-yellow { color: var(--secn-yelw); }


/* ~~~ Header ~~~ */

header {
    position: fixed;
    z-index: 99;
    top: 0;

    width: 100%;
    height: 10%;
    background-color: #333333;

    display: grid;
    grid-template-columns: 2.5% 12.5% 70% 12.5% 2.5%;
    grid-template-rows: 15% 70% 15%;
}

header * {
    height: 100%;
}

header a {
    grid-row: 2 / 3;
    border-radius: 50%;
    background-color: var(--prim-purp);
}

header #profile {
    grid-column: 2 / 3;
}

header #stats {
    grid-column: 4 / 5;
}


/* ~~~ Main ~~~ */

main {
    position: fixed;
    top: 8%;
    bottom: 8%;
    padding: 0 0 0 0;
    right: 0;
    left: 0;
    overflow: scroll;
}

#title {
    width: 100%;
    height: 15%;
    font-size: 2em;
    text-align: center;
}


/* ~~~ Footer ~~~ */

footer {
    position: fixed;
    z-index: 99;
    bottom: 0;

    width: 100%;
    height: 10%;
    background: linear-gradient(0deg, var(--prim-purp) 10%, #00000000 100%);

    display: grid;
    grid-template-columns: 1% 32% 1% 32% 1% 32% 1%;
    grid-template-rows: 100%;
}

footer a {
    grid-row: 1 / end;
    width: 100%;
    height: 100%;

    background: linear-gradient(180deg, var(--prim-purp) 0%, var(--prim-purp) 40%, var(--prim-nblu) 100%);
}

#home { grid-column: 2 / 3; }
#pots { grid-column: 4 / 5; }
#share { grid-column: 6 / 7; }