*{
  margin: 0;
}

#back {
  width: 100%;
  height: 75%;
  min-height: 420px;
  position: absolute;
  bottom: 25%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
}

#toolsBack {
  width: 100%;
  height: 25%;
  min-height: 100px;
  position: absolute;
  bottom: 0;
  background-size: contain;
  background-repeat: repeat-x;
  overflow: hidden;
}

#storage {
  padding: 5px;
  top: 10%;
  bottom: 10%;
  right: 3%;
  left: 20%;
  position: absolute;
  border: 3px solid #C0C0C0;
  border-radius: 10px;
  background-color: #808080; 
  overflow: hidden;
}

#start {
  height: 25%;
  width: 13%;
  top: 10%;
  left: 3%;
  position: absolute;
  border: 2px solid #a62121f7;
  border-radius: 30px;
  font: 20px sans-serif;
  outline: 0;
  background-color: #eb2323f7;
  color: white; 
}

#reset {
  height: 25%;
  width: 13%;
  top: 50%;
  left: 3%;
  position: absolute;
  border: 2px solid #362c61;
  border-radius: 30px;
  font: 20px sans-serif;
  outline: 0;
  background-color: #5f5196;
  color: white; 
}

#cont {
  width: 20%;
  height: 70%;
  position: absolute;
  bottom: 5%;
  left: 5%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#reactDiv { 
  width: 27%;
  min-height: 30%; 
  left: 18%; 
  top: 35%;
}

#steamGenDiv {
  width: 28%;
  min-height: 15%; 
  left: 53%; 
  top: 40%;
}

#turbDiv {
  width: 8%;
  min-height: 15%; 
  left: 28%; 
  bottom: 35%;
}

#generatDiv {
  width: 9%;
  min-height: 12%; 
  left: 37%; 
  bottom: 37%;
}

#powerLineDiv {
  width: 9%;
  min-height: 20%;
  left: 53%; 
  top: 31%;
}

#transfDiv {
  width: 5%;
  min-height: 12%;
  left: 47%; 
  bottom: 37%;
}

#condDiv {
  width: 5%;
  min-height: 12%;
  left: 35%; 
  bottom: 15%;
}

#coolerDiv {
  width: 12%;
  min-height: 30%;
  left: 63%; 
  bottom: 10%;
}

.block {
  position: absolute;
  border: 2px dotted grey;
  border-radius: 10px;
  display: inline-block;
}

#city {
  position: absolute;
  min-height: 25%;
  width: 22%;
  left: 77%; 
  bottom: 10%;
}

#desc {
  min-height: 20%;
  max-height: 26%;
  width: 50%;
  left: 25%;
  overflow: auto;
  position: absolute;
  margin: auto;
  border: 2px solid #808080;
  border-radius: 10px;
  background-color: #C0C0C0; 
  color: white;
  font: 20px sans-serif;
}


#cityLEP {
  width: 4%;
  height: 10%;
  bottom: 17%;
  left: 95.5%;
  position: absolute;
}

.endWindow {
  width: 100vw;
  height: 100%;
  background-color: DimGrey;
  opacity: 0.95;
  position: absolute;
}

.endText {
  padding: 5px;
  margin: 10% 20% 5px 20%;
  position: relative;
  text-align: center;
  font-size: 35px;
  font-family: Cambria;
  color: white;
}

.endButton {
  height: 10%;
  width: 25%;
  left: 37.5%;
  position: relative;
  border: 2px solid #362c61;
  border-radius: 30px;
  font: 25px sans-serif;
  outline: 0;
  background-color: #5f5196;
  color: white; 
}

.failImgDiv {
  position: relative;
  width: 100%;
}

.failImg {
  margin-left: 45%;
  position: relative;
  width: 10%;
}

.startText {
  margin-top: 10%;
  margin-left: 10%;
  margin-bottom: 15px;
  width: 80%;
  position: relative;
  text-align: center;
  font-size: 20px;
  font-family: Cambria;
  color: white;
}

.startButton {
  height: 10%;
  width: 25%;
  top: 65%;
  left: 37.5%;
  position: inherit;
  border: 2px solid #800000;
  border-radius: 30px;
  font: 25px sans-serif;
  outline: 0;
  background-color: red;
  color: white; 
}


@media (max-width: 360px) {

  #back {
    min-width: 360px;
    height: 40%;
    min-height: 100px;
    position: absolute;
    top: 20%;
    bottom: 40%;
  }

  #toolsBack {
    min-width: 360px;
    height: 40%;
    position: absolute;
  }

  #storage {
    height: 80%;
    left: 30%;
  }

  #start {
    height: 25%;
    width: 25%;
  }

  #reset {
    height: 25%;
    width: 25%;
  }

  #cont {
    width: 25%;
    bottom: 5%;
    left: 2%;
  }

  #turbDiv {
    width: 8%;
    min-height: 10%; 
    left: 27%; 
    bottom: 37%;
  }

  #generatDiv {
    width: 9%;
    min-height: 8%; 
    left: 37%; 
    bottom: 38%;
  }

  #powerLineDiv {
    width: 9%;
    min-height: 20%;
    left: 53%; 
    top: 35%;
  }

  #transfDiv {
    width: 5%;
    min-height: 9%;
    left: 47%; 
    bottom: 38%;
  }

  #condDiv {
    width: 7%;
    min-height: 8%;
    left: 35%; 
    bottom: 15%;
  }

  .block {
    position: absolute;
    border: 1px dotted black;
    border-radius: 10px;
    display: inline-block;
  }

  #desc {
    min-height: 20%;
    max-height: 20%;
    width: 99%;
    left: 0;
    border-radius: 0px;
    overflow: hidden;
    font: 10px sans-serif;
  }
  .startText {
    font-size: 15px;
  }

  .startButton {
    height: 10%;
    width: 50%;
    top: 65%;
    left: 25%;
    position: inherit;
    border: 2px solid #a62121f7;
    border-radius: 30px;
    font: 25px sans-serif;
    outline: 0;
    background-color: #eb2323f7;
    color: white; 
  }

  .endText {
    padding: 5px;
    margin: 20% 10% 5px 10%;
    font-size: 25px;
    font-family: Cambria;
    color: white;
  }

  .endButton {
    height: 10%;
    width: 50%;
    left: 25%;
  }

  .failImg {
    margin-left: 25%;
    position: relative;
    width: 50%;
  }
}