@charset "UTF-8";

body{
  background-image: url("media/background2.png");
  /*#f6f6f6;*/
  color: #2b2b2b;
  font-family: 'geometria_lightlight';
}

img{
  max-width: 100%;
  max-height: 100%;
}

header {
  text-align: center;
}

a{
  color:#2b2b2b;
  text-decoration: none;
}

@media only screen and (min-width: 100px){

/* THIS IS HOME PAGE STUFF */

.homewrapper{
  display:none;
}

.story{
  font-size: 1.6em;
  margin-left:auto;
  margin-right:auto;
  margin-bottom: 0;
  height: 45vh;
}


.title{
  font-size: 3em;
  margin-left:auto;
  margin-right:auto;
  text-align: center;
}

.homewrappersmall{
  width: 98%;
  margin-right: 1%;
  margin-left: 1%;
  margin-top: 0;
  float: left;
  text-align: center;
  font-size: .7em;
  margin-bottom: 3%;

}

.title1{
  font-size: 4em;
  margin-left:auto;
  margin-right:auto;
  text-align: center;
}

.story{
  font-size: 1.6em;
  margin-left:auto;
  margin-right:auto;
  height: 30vh;

}

.storytext{
  width: 60%;
  text-align: center;
  float: left;
  margin-right: 5%;
  margin-left: 5%;
}

.cont{
  width: 15%;
  float: left;
  position: relative;
  top: 7vh;
}

.eras{
  width: 100%;
  margin-top: 10%;
}

.period1 {
  width:98%;
  margin-left: 1%;
  margin-right: 1%;
  float: left;
  opacity:.9;
}

.period1:active {
  opacity: 1;
}

/* THIS IS AGE PAGE STUFF (WHERE THE GAMES ARE) */

.agewrapper{
  width:85%;
  margin: 0 auto;
}

.agetitle{
  font-size: 1.5em;
  margin-left:auto;
  margin-right:auto;
  text-align: center;
}

.agegameswrapper{
  margin-left: auto;
  margin-right: auto;
  height: 2em;
  width: 100%;
}

.agevideogames{
  width: 80%;
  margin-left:10%;
  margin-right: 10%;
  text-align: center;
  float: left;
}

.agevideogames:active{
  transform: scale(1.1);
}

/* THIS IS GAME/PEOPLE PAGE STUFF*/

.gamepagewrapper{

}

.gamename {
  width:100%;
  font-size: 1.5em;
  text-align:center;
  float: left;
}

.screenshots {
  width:75%;
  margin-left: auto;
  margin-right:auto;
  margin-bottom: 3%;
  text-align:center;
}

.gamedescrip {
  width:75%;
  font-size: .8em;
  margin: auto;
  text-align:center;
}

.gamedata{
  width:80%;
  margin-left:auto;
  margin-right: auto;
  margin-top: 4%;
}

.gamedata1{
  border-top-style: solid;
  border-top-color: #FF6600;
  color: #FF6600;
  text-align: center;
  height: 6em;
  float: left;
  width:44%;
  margin: 2.5%;
  font-size: .7em;
}

.gamedata2{
  border-top-style: solid;
  border-top-color: #663399;
  color: #663399;
  text-align: center;
  height: 6em;
  float: left;
  width:44%;
  margin: 2.5%;
  font-size: .7em;
}

.gamedata3{
  border-top-style: solid;
  border-top-color: #3399FF;
  color: #3399FF;
  text-align: center;
  height: 6em;
  float: left;
  width:44%;
  margin: 2.5%;
  font-size: .7em;
}

.gamedata4{
  border-top-style: solid;
  border-top-color: #55D43F;
  color: #55D43F;
  text-align: center;
  height: 6em;
  float: left;
  width:44%;
  margin: 2.5%;
  font-size: .7em;
}

.otherpeople {
  width:60%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5em;
  text-align:center;
}

.peoplewrapper{
  margin-left: auto;
  margin-right: auto;
  margin-top: 3em;
  height: 6em;
  width: 80%;
}

.person {
  width: 20%;
  margin-left: 2.5%;
  margin-right: 2.5%;
  float: left;
}

.person:active {
  transform: scale(1.1);
}

.homebutton {
  font-weight: bold;
  width: 40%;
  margin-left: 30%;
  margin-right: 30%;
  margin-top: 3%;
  margin-bottom: 3%;
  text-align: center;
  float: left;
  font-size: 2.4em;
}

.homebutton:active{
  transform: scale(1.1);
}
}

@media only screen and (min-width: 700px){

  /* THIS IS HOME PAGE STUFF */

  .homewrapper{
    display: inline;
    width: 76%;
    margin-right: 12%;
    margin-left: 12%;
    margin-top: 0 auto;
    float: left;
    text-align: center;
  }

  .title1{
    font-size: 4em;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
  }

  .story{
    font-size: 1.6em;
    margin-left:auto;
    margin-right:auto;
    margin-bottom: 10vh;
    height: 45vh;
  }

  .storytext{
    width: 60%;
    text-align: center;
    float: left;
    margin-right: 5%;
    margin-left: 5%;
  }

  .cont{
    width: 15%;
    float: left;
    position: relative;
    top: 7vh;
  }

  .eras{
    width: 100%;
    margin-top: 10%;
  }

  .title{
    font-size: 3em;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
    width:100%;
  }

  .period {
    width:23%;
    margin-left:1%;
    margin-right: 1%;
    float:left;
    text-align:center;
    opacity:.9;
    margin-bottom: 5%;
  }

  .period:hover {
    opacity: 1;
  }

  .homewrappersmall{
    display:none;
  }

  .period1 {
    display:none;
  }

  /* THIS IS AGE PAGE STUFF (WHERE THE GAMES ARE) */

  .agewrapper{

    width:80%;
    margin: 0 auto;
  }

  .agetitle{
    font-size: 2.7em;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
  }

  .agegameswrapper{
    margin-left: auto;
    margin-right: auto;
    height: 6em;
    width: 100%;
  }

  .agevideogames{
    width: 20%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    text-align: center;
    float: left;
  }

  .agevideogames:hover{
    transform: scale(1.1);
  }

  /* THIS IS GAME/PEOPLE PAGE STUFF*/

  .gamepagewrapper{
    width: 60%;
    float: left;
    border-right-style: solid;
    border-right-color: #dddddd;
  }

  .gamename {
    width:100%;
    font-size: 2.7em;
    text-align:center;
    float: left;
  }

  .screenshots {
    width:60%;
    margin-left: auto;
    margin-right:auto;
    margin-bottom: 4%;
    text-align:center;
  }

  .gamedescrip {
    width:60%;
    font-size: 1.5em;
    margin: auto;
    text-align:center;
  }

  .gamedata{
    width:65%;
    margin-left:auto;
    margin-right: auto;
    margin-top: 4%;
    background-color: red;
  }

  .gamedata1{
    border-top-style: solid;
    border-top-color: #FF6600;
    color: #FF6600;
    text-align: center;
    height: 6em;
    float: left;
    width:44%;
    margin: 2.5%;
    font-size: 1em;
  }

  .gamedata2{
    border-top-style: solid;
    border-top-color: #663399;
    color: #663399;
    text-align: center;
    height: 6em;
    float: left;
    width:44%;
    margin: 2.5%;
    font-size: 1em;
  }

  .gamedata3{
    border-top-style: solid;
    border-top-color: #3399FF;
    color: #3399FF;
    text-align: center;
    height: 6em;
    float: left;
    width:44%;
    margin: 2.5%;
    font-size: 1em;
  }

  .gamedata4{
    border-top-style: solid;
    border-top-color: #55D43F;
    color: #55D43F;
    text-align: center;
    height: 6em;
    float: left;
    width:44%;
    margin: 2.5%;
    font-size: 1em;
  }

  .otherpeople {
    width: 40%;
    margin-left: 30%;
    margin-right: 30%;
    margin-top: 15%;
    text-align: center;
    font-size: 1.4em;
    float: left;
  }

  .peoplewrapper{
    height: 6em;
    width: 39%;
    float: left;
    text-color: black;
  }

  .person {
    width: 40%;
    margin-left: 30%;
    margin-right: 30%;
    margin-top: 3%;
    margin-bottom: 3%;
    text-align: center;
    float: left;
    font-size: 1.2em;
  }

  .person:hover{
    transform: scale(1.1);
  }

  .homebutton {
    font-weight: bold;
    width: 40%;
    margin-left: 30%;
    margin-right: 30%;
    margin-top: 3%;
    margin-bottom: 3%;
    text-align: center;
    float: left;
    font-size: 3em;
  }

  .homebutton:hover{
    transform: scale(1.1);
  }
  }

@media only screen and (min-width: 1200px){

/* THIS IS HOME PAGE STUFF */

.homewrapper{
  display: inline;
  width: 76%;
  margin-right: 12%;
  margin-left: 12%;
  margin-top: 0 auto;
  float: left;
  text-align: center;
}

.title1{
  font-size: 7em;
  margin-left:auto;
  margin-right:auto;
  text-align: center;
}

.story{
  font-size: 4em;
  margin-left:auto;
  margin-right:auto;
  margin-bottom: 10vh;
  height: 45vh;
}

.storytext{
  width: 60%;
  text-align: center;
  float: left;
  margin-right: 5%;
  margin-left: 5%;
}

.cont{
  width: 15%;
  float: left;
  position: relative;
  top: 7vh;
}

.eras{
  width: 100%;
  margin-top: 10%;
}

.title{
  font-size: 5em;
  margin-left:auto;
  margin-right:auto;
  text-align: center;
  width:100%;
}

.period {
  width:23%;
  margin-left:1%;
  margin-right: 1%;
  float:left;
  text-align:center;
  opacity:.9;
  margin-bottom: 5%;
}

.period:hover {
  opacity: 1;
}

.homewrappersmall{
  display:none;
}

.period1 {
  display:none;
}

/* THIS IS AGE PAGE STUFF (WHERE THE GAMES ARE) */

.agewrapper{

  width:80%;
  margin: 0 auto;
}

.agetitle{
  font-size: 2.7em;
  margin-left:auto;
  margin-right:auto;
  text-align: center;
}

.agegameswrapper{
  margin-left: auto;
  margin-right: auto;
  height: 6em;
  width: 100%;
}

.agevideogames{
  width: 20%;
  margin-left: 2.5%;
  margin-right: 2.5%;
  text-align: center;
  float: left;
}

.agevideogames:hover{
  transform: scale(1.1);
}

/* THIS IS GAME/PEOPLE PAGE STUFF*/

.gamepagewrapper{
  width: 60%;
  float: left;
  border-right-style: solid;
  border-right-color: #dddddd;
}

.gamename {
  width:100%;
  font-size: 2.7em;
  text-align:center;
  float: left;
}

.screenshots {
  width:60%;
  margin-left: auto;
  margin-right:auto;
  margin-bottom: 4%;
  text-align: center;
}

.imagez{

}

.gamedescrip {
  width:60%;
  font-size: 1.8em;
  margin: auto;
  text-align:center;
}

.gamedata{
  width:65%;
  margin-left:auto;
  margin-right: auto;
  margin-top: 4%;
  background-color: red;
}

.gamedata1{
  border-top-style: solid;
  border-top-color: #FF6600;
  color: #FF6600;
  text-align: center;
  height: 6em;
  float: left;
  width:44%;
  margin: 2.5%;
  font-size: 1.4em;
}

.gamedata2{
  border-top-style: solid;
  border-top-color: #663399;
  color: #663399;
  text-align: center;
  height: 6em;
  float: left;
  width:44%;
  margin: 2.5%;
  font-size: 1.4em;
}

.gamedata3{
  border-top-style: solid;
  border-top-color: #3399FF;
  color: #3399FF;
  text-align: center;
  height: 6em;
  float: left;
  width:44%;
  margin: 2.5%;
  font-size: 1.4em;
}

.gamedata4{
  border-top-style: solid;
  border-top-color: #55D43F;
  color: #55D43F;
  text-align: center;
  height: 6em;
  float: left;
  width:44%;
  margin: 2.5%;
  font-size: 1.4em;
}

.otherpeople {
  width: 40%;
  margin-left: 30%;
  margin-right: 30%;
  margin-top: 15%;
  text-align: center;
  font-size: 2em;
  float: left;
}

.peoplewrapper{
  height: 6em;
  width: 39%;
  float: left;
  text-color: black;
}

.person {
  width: 40%;
  margin-left: 30%;
  margin-right: 30%;
  margin-top: 3%;
  margin-bottom: 3%;
  text-align: center;
  float: left;
  font-size: 1.2em;
}

.person:hover{
  transform: scale(1.1);
}

.homebutton {
  font-weight: bold;
  width: 40%;
  margin-left: 30%;
  margin-right: 30%;
  margin-top: 3%;
  margin-bottom: 3%;
  text-align: center;
  float: left;
  font-size: 4em;
}

.homebutton:hover{
  transform: scale(1.1);
}
}