html, body {
  width:100%;
  height:100%;
}

body {
  padding:0;
  margin:0;
  overflow:hidden;
  background-image: url(images/bg.png);
  background-size:cover;
}

/* z-index helps us direct which layer we want a specific object or class to be on in a page */
.introimg {
  z-index: 500;
  background-size: contain;
  background-size: 100%;
  background-repeat: no-repeat;
  background-size:cover;
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  height: 100vh;
}

.intro {
  position: fixed;
  width:100%;
  height:100%;
  z-index:50000;
  top:0;
  left:0;
}



.open-button {
  display: inline-block;
  border-radius: 4px;
  background-color: #219819;
  border: none;
  color: #000000;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  z-index: 0;
}

.serve_button {
  display: none;
  border-radius: 4px;
  background-color: #219819;
  border: none;
  color: #000000;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  z-index: 0;
}

.open-button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.serve_button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.open-button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.serve_button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.open-button:hover span {
  padding-right: 25px;
}

.serve_button:hover span {
  padding-right: 25px;
}

.open-button:hover span:after {
  opacity: 1;
  right: 0;
}

.serve_button:hover span:after {
  opacity: 1;
  right: 0;
}

.open-button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.serve_button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.open-button:hover span {
  padding-right: 25px;
}

.serve_button:hover span {
  padding-right: 25px;
}

.open-button:hover span:after {
  opacity: 1;
  right: 0;
}

.serve_button:hover span:after {
  opacity: 1;
  right: 0;
}


.counter img {
  position: absolute;
  left: -6px;
  top: 300px;
  z-index: 1;
}


/* These are different sprites for the rat characters */
.neutral_rats {
  display: flex;
  bottom: 200px;
}


/* The mad and happy versions are there, but hidden so that they can be unhidden at the right time */
.mad_rats {
  display: none;
}

.happy_rats {
  display: none;
}


/* "Position: absolute" takes objects out of the regular flow of the page, and puts them into an exact position that you can direct with percentages or pixels. */
.dfCounter img {
  position: absolute;
  left: 75%;
  top: 270px;
  z-index: 5;
}

.strbrCounter img {
  position: absolute;
  left: 15%;
  top: 400px;
  z-index: 2;
}

.tsCounter img {
  position: absolute;
  left: 87%;
  top: 160px;
  z-index: 3;
}

.trashCan {
  position: absolute;
  left: 85%;
  top: 590px;
  z-index: 4;
}

.seedsCounter img {
  position: absolute;
  left: 87%;
  top: 350px;
  z-index: 3;
}


.wormsCounter img {
  position: absolute;
  left: 72%;
  top: 550px;
  z-index: 4;
}

.cheeseCounter img {
  position: absolute;
  left: 20%;
  top: 450px;
  z-index: 3;
}

.proniCounter img {
  position: absolute;
  left: 5%;
  top: 400px;
  z-index: 2;
}

.chickenCounter img {
  position: absolute;
  left: 7%;
  top: 300px;
  z-index: 2;
}

.secretsauceCounter img {
  position: absolute;
  left: 78%;
  top: 660px;
  z-index: 2;
}

.trashPlace img {
  position: absolute;
  left: 38%;
  top: -20px;
  z-index: 8;
}

.dfPlace img {
  position: absolute;
  left: 39%;
  top: 100px;
  z-index: 4;
}

.tsPlace img {
  position: absolute;
  left: 37%;
  top: 130px;
  z-index: 2;
}

.secretsaucePlace img {
  position: absolute;
  left: 37%;
  top: 130px;
  z-index: 2;
}

.proniPlace img {
  position: absolute;
  left: 38%;
  top: 140px;
  z-index: 3;
}

.seedsPlace img {
  position: absolute;
  left: 37%;
  top: 140px;
  z-index: 3;
}

.wormsPlace img {
  position: absolute;
  left: 39%;
  top: 140px;
  z-index: 3;
}

.strbrPlace img {
  position: absolute;
  left: 40%;
  top: 150px;
  z-index: 6;
}

.chickenPlace img {
  position: absolute;
  left: 41%;
  top: 50px;
  z-index: 5;
}

.cheesePlace img {
  position: absolute;
  left: 47%;
  top: 130px;
  z-index: 6;
}

/* "Position: relative" makes objects move with the screen, which is better for functionality */
.counter_holder {
  position: relative;
}

.placed_holder {
  position: relative;
}

.row {
  display: flex;
}

.title {
  margin-top: 10px;
  font-size: 160px;
  margin-left: 20px;

}

.open {
  margin-left: 1300px;
  margin-top: 400px;
}


.container-counter {
  width:100%;
  height: 43%;
  position:fixed;
  bottom:50%;
  left:0;
  z-index:30;
}

.container-placed {
  width:100%;
  height:50%;
  position:fixed;
  bottom:0;
  left:0;
  z-index:20;
}

.container-placed .sub_container{
  position:relative;
}

.counter {
  width:100%;
  background-image:url(images/counter.png);
  background-size:cover;
  height:55%;
  position:fixed;
  bottom:0;
  left:0;
}

.plainPizza {
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  height:50%;
  position:fixed;
  z-index:10;
  bottom:0;
  left:0;
}

.plainPizza img {
  width:40%;
  position:relative;
  z-index: 1;
}

.buttonBox {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  bottom:0;
  z-index:50010;
}

.rats {
  position:fixed;
  width:100%;
  height:30%;
  top:0;
  left:0;
}

.rats .rats_holder {
  width: 100%;
  height:100%;
  position:relative;
}

.rats .rats_holder img {
  width: 80%;
  top:-30%;
  left: 10%;
  position:absolute;
}

/* These are the endings; they use a similar css styling to the front cover, and are triggered with javascript */
.happyending {
  z-index: 5000;
  background-size: contain;
  background-size: 100%;
  background-repeat: no-repeat;
  background-size:cover;
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  height: 100vh;
  display: none;
}

.deadending {
  z-index: 5000;
  background-size: contain;
  background-size: 100%;
  background-repeat: no-repeat;
  background-size:cover;
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  height: 100vh;
  display: none;
}

.badending {
  z-index: 5000;
  background-size: contain;
  background-size: 100%;
  background-repeat: no-repeat;
  background-size:cover;
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  height: 100vh;
  display: none;
}