@import url('fonts.css');
body {
    background-color: #06c;
    background: linear-gradient(to bottom right,  #06c 0%, #3c9 100%);
    background-attachment: fixed;
    font-family: "U001 Regular", sans-serif;
    font-style: normal;
    color: #fff;
    margin: 0;
    align-items: center;
    overflow-x: hidden;
    letter-spacing: -0.5px;
}
.plain {
    font-family: sans-serif;
}
h1 {
    font-family: "U001Con Bold", sans-serif;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
}
h2 {
    font-family: "U001Con Bold", sans-serif;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
}
#content p {
    font-size: 100%;
    padding: 0 25px 5px 25px;
    margin: 0;
}
#content h1 {
    font-size: 225%;
    padding: 0 5px;
}
#content h2 {
    font-size: 150%;
    padding: 5px 5px 5px 25px;
}
#sidebar p {
    padding: 0 10px;
    margin: 0;
}
#sidebar ul {
    padding: 0;
    margin: 0;
}
#sidebar li {
    padding: 0 20px;
    margin: 0;
    list-style: none;
    font-size: 110%;
}
#sidebar h1 {
    font-family: "U001Con Regular";
    font-size: 125%;
    padding: 10px 5px 0 5px;
    margin: 0;
    text-transform: uppercase;
}
a, a:visited {
    color: #fc0;
    text-decoration: none;
}
a:active {
    color: #fff;
    text-decoration: none;
}
#content a, #content a:visited {
    color: #333;
    text-decoration: underline;
}
#content a:active {
    color: #fc0;
    text-decoration: underline;
}
div#grid {
    display: grid;
    grid-template-columns: 1fr 800px 200px 1fr;
    grid-template-rows: 100px min-content min-content min-content;
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
}
div#header {
    grid-column: 1 / 5;
    grid-row: 1;
    text-align: center;
    background-color: rgba(0,0,0,0.5);
}
div#social {
    grid-column: 1 / 5;
    grid-row: 2;
    background-color: rgba(0,0,0,0.67);
}
div#content {
    grid-column: 2;
    grid-row: 3;
    background-color: rgba(255,255,255,0.8);
    margin: 10px 0;
    padding: 10px 0;
    border-radius: 10px;
    color: #000;
}
div#sidebar {
    grid-column: 3;
    grid-row: 3;
    padding: 0;
    margin: 0;
}
div#footer {
    grid-column: 2 / 4;
    grid-row: 4;
    text-align: center;
    margin: 0;
    padding: 0 0 5px 0;
    color: #333;
}
#header img {
    height: 100px;
}
div#socialbox {
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: min-content;
    max-width: 750px;
    padding: 0;
    margin: 0 auto;
}
div#social1 {
    grid-column: 1;
    grid-row: 1;
}
div#social2 {
    grid-column: 2;
    grid-row: 1;
}
div#social3 {
    grid-column: 3;
    grid-row: 1;
}
div.sociallink {
    padding: 5px;
    font-size: 110%;
    line-height: 130%;
}
#social img {
    padding: 0;
    margin: 0;
    height: 0.75em;
}
#footer span {
    padding: 0;
    margin: 0;
    font-size: 80%;
}
div#highlightgrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: min-content min-content min-content min-content min-content min-content;
    width: 100%;
    margin: 20px 0;
    padding: 0;
    background-color: #333;
}
div.hltitle {
    font-family: "U001Con Regular", sans-serif;
    text-transform: uppercase;
    font-size: 150%;
    padding: 0 5px;
    margin: 0;
    text-align: center;
    color: #fc0;
    background-color: #333;
}
div.hlimage {
    padding: 0;
    margin: 0;
}
div.hlimage img {
    display: block;
    object-fit: cover;
    max-width: 100%;
    padding: 0;
    margin: 0;
}
div.hltext {
    padding: 5px 10px;
    margin: 0;
    text-align: center;
    color: #fff;
    font-size: 90%;
    background-color: #444;
}
div#hl1title {
    grid-column: 1;
    grid-row: 1;
}
div#hl1image{
    grid-column: 1;
    grid-row: 2;
}
div#hl1text {
    grid-column: 1;
    grid-row: 3;
}
div#hl2title {
    grid-column: 2;
    grid-row: 1;
}
div#hl2image{
    grid-column: 2;
    grid-row: 2;
}
div#hl2text {
    grid-column: 2;
    grid-row: 3;
}
div#hl3title {
    grid-column: 3;
    grid-row: 1;
}
div#hl3image{
    grid-column: 3;
    grid-row: 2;
}
div#hl3text {
    grid-column: 3;
    grid-row: 3;
}
div#hl4title {
    grid-column: 1;
    grid-row: 4;
}
div#hl4image{
    grid-column: 1;
    grid-row: 5;
}
div#hl4text {
    grid-column: 1;
    grid-row: 6;
}
div#hl5title {
    grid-column: 2;
    grid-row: 4;
}
div#hl5image{
    grid-column: 2;
    grid-row: 5;
}
div#hl5text {
    grid-column: 2;
    grid-row: 6;
}
div#hl6title {
    grid-column: 3;
    grid-row: 4;
}
div#hl6image{
    grid-column: 3;
    grid-row: 5;
}
div#hl6text {
    grid-column: 3;
    grid-row: 6;
}


@media (max-width: 640px) {
    div#grid {
        display: grid;
        grid-template-columns: 500px;
        grid-template-rows: 75px min-content min-content min-content 20px;
    }
    div#header {
        grid-column: 1;
        grid-row: 1;
    }
    div#social {
        grid-column: 1;
        grid-row: 2;
    }
    div#content {
        grid-column: 1;
        grid-row: 3;
        margin: 0;
        border-radius: 0;
        font-size: 125%;
    }
    div#sidebar {
        grid-column: 1;
        grid-row: 4;
        font-size: 125%;
    }
    div#footer {
        grid-column: 1;
        grid-row: 5;
    }
    #header img {
        height: 75px;
    }
    #content p img {
        max-width: 400px;
    }
    div#highlightgrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: min-content min-content min-content min-content min-content min-content min-content min-content min-content;
    }
    div#hl1title {
        grid-column: 1;
        grid-row: 1;
    }
    div#hl1image{
        grid-column: 1;
        grid-row: 2;
    }
    div#hl1text {
        grid-column: 1;
        grid-row: 3;
    }
    div#hl2title {
        grid-column: 2;
        grid-row: 1;
    }
    div#hl2image{
        grid-column: 2;
        grid-row: 2;
    }
    div#hl2text {
        grid-column: 2;
        grid-row: 3;
    }
    div#hl3title {
        grid-column: 1;
        grid-row: 4;
    }
    div#hl3image{
        grid-column: 1;
        grid-row: 5;
    }
    div#hl3text {
        grid-column: 1;
        grid-row: 6;
    }
    div#hl4title {
        grid-column: 2;
        grid-row: 4;
    }
    div#hl4image{
        grid-column: 2;
        grid-row: 5;
    }
    div#hl4text {
        grid-column: 2;
        grid-row: 6;
    }
    div#hl5title {
        grid-column: 1;
        grid-row: 7;
    }
    div#hl5image{
        grid-column: 1;
        grid-row: 8;
    }
    div#hl5text {
        grid-column: 1;
        grid-row: 9;
    }
    div#hl6title {
        grid-column: 2;
        grid-row: 7;
    }
    div#hl6image{
        grid-column: 2;
        grid-row: 8;
    }
    div#hl6text {
        grid-column: 2;
        grid-row: 9;
    }
}