* {
    box-sizing: border-box;
    font-family: ADLaM_Display;
}

/*declaration of color variables*/
:root {
    --color0: hsl(270, 50%, 5%);
    --color1: hsl(281, 50%, 25%);
    --color2: hsl(266, 50%, 30%);
    --color3: hsl(249, 50%, 50%);
    --color4: hsl(200, 50%, 60%);
    --color5: hsl(184, 50%, 75%);
    --darkColor: hsl(0, 0%, 0%);
    --midColor: hsl(0, 0%, 50%);
    --lightColor: hsl(0, 0%, 100%);
}

@font-face {
    font-family: ADLaM_Display;
    src: url(../Assets/ADLaMDisplay-Regular.ttf);
}

body {
    background-color: var(--darkColor);
    color: var(--lightColor);
}

li {
    list-style: none;
}

.panel {
    background-color: var(--color0);
    border: 5px solid var(--color1);
    /* outline: 5px solid var(--color2); */
    min-width: 50px;
    min-height: 200px;
    margin: 10px;
}

.flex {
    display: flex;
    flex-flow: row-reverse;
    justify-content: space-around;
    align-items: center;
}

.flexCol {
    display: flex;
    flex-flow: column;
}
.marqueeHell {
    align-items: stretch;
}

.navHell {

}

.verticalOffset {
    margin-top: 300px;
}

.navButton {
    background-color: var(--color0);
    border: 5px solid var(--color1);
}

.navLeft {
}

.navRight {
}

#homeUpdates {
    grid-area: homeUpdates;
}
#homeWelcome {
    grid-area: homeWelcome;
}
#homeSocials {
    grid-area: homeSocials;
}
#homeButtons {
    grid-area: homeButtons;
}
#homeMarquee {
    grid-area: homeMarquee;
    background-color: var(--color0);
    overflow: hidden;
    position: relative;
}

#textMarquee {
    background-color: var(--color0);
    display: inline-block;
    white-space: nowrap;
    animation: marquee 10s linear infinite;
    cursor: pointer;
}

#textMarquee:hover {
    animation-play-state: paused;
}

#gridHome {
    display: grid;
    grid-template-areas:
        /* "homeMarquee" */
        "homeUpdates homeWelcome homeWelcome"
        "homeSocials homeButtons homeButtons";
    width: 60vw;
    margin-left: 5vw;
}

@media only screen and (max-width: 768px) {
}