body {
  font-family: sans-serif;
  background-color: #EAFFA3;
  color: #444;
  margin: 0; padding: 0;
}

nav a, nav a:visited {
  color: #444;
  border-bottom: 1px solid black;
  display: inline-block;
  margin: 0.5em 0.2em;
}

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

nav > ul {
  list-style: disc;
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
  margin: 0; padding: 0;
  margin-bottom: 1em;
  text-transform: uppercase;

}

nav > ul > li {
  display: inline;
  padding: 1em;
}

nav a {
  text-decoration: none;

}



#games {
  background-color: #5988CC;
  padding-bottom: 2em;
}

#games > .container > h1 {
  text-transform: uppercase;
  color: white;
  border-bottom: 0.1em solid #577CB2;
}



.download {
  position: absolute;
  bottom: 0;
  overflow: hidden;
}

.download div img {
  float: left;
}

figure {
  margin: 0; padding: 0;
}

figure img{
  padding: 1em;
}

.desc {
  padding: 1em;
}

h2 {
  margin: 0;
}

h1,h2,p {
  text-align: center;
}

.download * {
  text-align: left;
}

#bhoppro {
  position: relative;
  padding-top: 1em;
  min-height: 34em;
}
#bhoppro > h2, #bhoppro > p {
  background-color:rgba(255,255,255,0.25);
}
#android-download {
  background-color: green;
}

#apple-download {
  background-color: gray;
}

#amazon-download {
  background-color: orange;
}

#bhoppro {
  background-image: url("../img/bhopbg.png");
  background-repeat: none;
  background-position: right;

}

.download > div {
  width: 30%;
  min-width: 21em;
  float: left;
  max-height: 8em;
  margin: 0 0 1em 1em;
}

.download > div a {
  color: white;
  text-decoration: none;
}


/**/
#about {
  background-color: #FF9789;
  padding-bottom: 2em;
}

#about > .container > h1 {
  border-bottom: 0.1em solid #DB8276;
}


#contact {
  background-color: #C4FFBC;
}

#contact > .container > h1 {
  border-bottom: 0.1em solid #97DE8E;
}

@media only screen and (max-width: 50em) {
    .container {
      width: 100%;
    }

}