:root
{
    --primary: #9DB19D;
    --primaryTrans: #9DB19DCC;
    --onPrimary: #FFFFFF;
    --secondary: #60D0D0;
    --onSecondary: #000000;
    --tertiary: #949DAE;
    --detail: #C6CBB7;
}

* {
    margin: 0;
    padding: 0;
    transition: 400ms;
}

body
{
    background-image: url("res/background.png");
    background-repeat: repeat;
    background-size: 20% auto;
    color: var(--onPrimary);
    font-family: 'Josefin Sans', Arial, sans-serif;
}

xxximg {
    width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: darkslateblue;
}

h2 {
    filter: drop-shadow(0 0 2px var(--primary));
}

/* header styling */
header
{
    xdisplay: flex;
    xalign-items: center;
    xjustify-content: left;
    xheight: 250px;
    xmargin-left: 5%;
	width: 100vw;
	text-align: center;
}

header img {
    xposition: relative;
    xheight: 100%;
    width: 75vw;
	max-width: 600px;
    filter: invert(99%) sepia(35%) saturate(7446%) hue-rotate(150deg) brightness(88%) contrast(83%);
}

/* nav bar styling - flexbox */
nav {
    position: fixed;
    z-index: 1;
    top: 7%;
    right: 4%;
    font-size: 2em;
}

.hamburger {
    display: flex;
    flex-flow: column;
    align-items: end;
    justify-content: center;
    width: 100%;
    padding: 8px;
}

nav a {
    text-align: center;
    display: block;
    color: var(--onPrimary);
    padding: 8px 0 8px 0;
    text-decoration: none;
    width: 100%;
}

nav a.active {
    background-color: var(--secondary);
    color: var(--onSecondary);
}

nav a:hover {
    background-color: var(--tertiary);
    color: var(--onPrimary);
}

.menu-icon {
    display: block;
    padding: 9px 8px 7px 8px;
}

.menu-icon:hover {
    cursor: pointer;
}

.menu-icon img {
    height: 50px;
    width: auto;
    filter: invert(99%) sepia(35%) saturate(7446%) hue-rotate(150deg) brightness(88%) contrast(83%);
}

.hamburger a {
    display: none;
}

.open a {
    display: block;
}

.open .menu-icon img {
    transform: rotate(-90deg);
    filter: grayscale();
}

.open .hamburger {
    background-color: var(--secondary);
}

/* games section */
.games {
    display: flex;
    flex-flow: column;
    margin: 15px;
    justify-content: center;
    align-items: flex-start;
}

.game {
    display: grid;
    width: 60%;
    align-self: center;
    grid-template-areas:
        'main main main main main'
        '. blurb blurb blurb .'
        'google google . apple apple';
    row-gap: 5%;
}

.bottomcenter
{
	position: fixed;
	bottom: 20px;
	width: 100%;
	text-align: center;
}

.google {
    width: 100%;
}

.apple {
    width: 100%;
}

.stuff
{
	width: 100vw;
	text-align: center;
	padding-top: 5vw;
}

.main{
    grid-area: main;
}

.googlelink{
    grid-area: google;
}

.applelink{
    grid-area: apple;
}

.game img {
    border-radius: 10px;
}

.gameimg {
    width: 100%;
}

.game p {
    text-align: center;
    grid-area: blurb;
}