* {
    padding: 0;
    margin: 0;
    color: #081820;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

html {
    font-size: 0.5em;
    line-height: 1rem;
    background: #F9F9F9;
}

@media (min-width: 35em) {
    html {
        font-size: 1em;
        line-height: 1.2rem;
    }
}

@media (min-width: 50em) {
    html {
        font-size: 1.5em;
        line-height: 1.5rem;
    }
}

a {
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
}

h1 img {
    display: block;
    margin: 0.3em auto;
    max-width: 100%;
}

nav ul {
    display: flex;
    flex-direction: column;
    width: 55%;
    margin: 2em 15% 0;
}

nav li {
    list-style: none;
}

nav ul li a {
    display: block;
    background: #F1F1F1;
    text-decoration: none;
    padding: 0.8em;
    margin: 0.2em;
    border-radius: 0.4em;
    text-align: center;
    width: 100%;
}
nav ul li a:hover {
    background: #98D7E4;
}

@media (min-width: 55em) {
  nav ul {	
    flex-direction: row;  
    width: 50%;
    margin: 2em 25% 0;
  }

  nav ul li a {
      display: inline;
      width: 100%;
      font-size: 1em;
      line-height: 1em;
  }

  nav ul {
    margin: 2em 15%;
  }
}

#content {
    clear: both;
    width: 70%;
    min-width: 100px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0.5em;
}

@media (min-width: 55em) {
    #content {
        min-width: 500px;
        max-width: 1100px;
    }
}

#socialmedia ul {
    list-style: none;
    position: absolute;
    right: 1em;
    font-size: 0.7em;
    line-height: 2rem;
}

@media (min-width: 35em) {
    #socialmedia ul {
        font-size: 0.7em;
        line-height: 1.75rem;
    }
}

@media (min-width: 55em) {
    #socialmedia ul {
        font-size: 0.7em;
        line-height: 1.5rem;
    }
}

h1 {
    font-size: 4em;
}

h2 {
    margin: 2em 0 1em 0;
    font-size: 2em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    clear: both;
}

p {
    margin-top: 2em;
}

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: var(--margin);
    flex-basis: calc(var(--width) - (var(--margin)* 3 ));
}

#Games li {
    list-style: none;
    padding: 5%;
    margin: 2%;
    border-radius: 2em;
    background: #F1F1F1;
    max-width: 90%;
}

@media (min-width: 55em) {
  #Games li  {
      max-width: 65%;
  }
}

#Games h3 {
    font-size: 1.7em;
}

#Games iframe {
    margin-top: 1em;
    width: 100%;
    height: 10em;
}

footer ul  {
    display: flex;
    flex-direction: column;
    width: 40%;
    margin: 2em 30% 0;
}

footer li {
    list-style: none;
    line-height: 3em;
}