body {
  padding: 0;
  margin: 0;
  background-color: #000000;
}


/* Smartphones PORTRAIT  */ 
@media (min-width:320px) and  (orientation: portrait) {
button {
  font-family: 'Arial';
  font-weight: bold;
  display:inline-block;
  padding:0px;
  margin:5px;
  background-color:rgb(162, 162, 173);
  color:#fff;
  font-size: 18px;
  cursor: pointer;
  border-radius: 4px;
  width: 32px;
  height: 26px;
  text-align: center;
  box-shadow: 0 6px rgb(3, 100, 55)
}
button:active{
  background-color: rgb(63, 63, 63);
  box-shadow: 0 3px rgb(129, 129, 129);
  transform: translateY(-1px);
}

div#answers {
    position: absolute;
    z-index: 100;
    top: 340px;
    left: 50px;
} 
}


/* Smartphones LANDSCAPE */
@media (min-width:480px) and (orientation: landscape) {
button {
  font-family: 'Arial';
  font-weight: bold;
  display:inline-block;
  padding:0px;
  margin:5px;
  background-color:rgb(162, 162, 173);
  color:#fff;
  font-size: 24px;
  cursor: pointer;
  border-radius: 4px;
  width: 40px;
  height: 32px;
  text-align: center;
  box-shadow: 0 6px rgb(3, 100, 55)
}
button:active{
  background-color: rgb(63, 63, 63);
  box-shadow: 0 3px rgb(129, 129, 129);
  transform: translateY(-1px);
}

div#answers {
    position: absolute;
    z-index: 100;
    top: 140px;
    left: 110px;
} 
}


/* Tablets PORTRAIT*/
@media (min-width:600px) and (orientation: portrait) {
button {
  font-family: 'Arial';
  font-weight: bold;
  display:inline-block;
  padding:0px;
  margin:5px;
  background-color:rgb(162, 162, 173);
  color:#fff;
  font-size: 26px;
  cursor: pointer;
  border-radius: 4px;
  width: 42px;
  height: 34px;
  text-align: center;
  box-shadow: 0 6px rgb(3, 100, 55)
}
button:active{
  background-color: rgb(63, 63, 63);
  box-shadow: 0 3px rgb(129, 129, 129);
  transform: translateY(-1px);
}

div#answers {
    position: absolute;
    z-index: 100;
    top: 370px;
    left: 10px;
} 
}



/* Tablets LANDSCAPE*/
@media (min-width:901px) and (orientation: landscape) {
button {
  font-family: 'Arial';
  font-weight: bold;
  display:inline-block;
  padding:0px;
  margin:5px;
  background-color:rgb(162, 162, 173);
  color:#fff;
  font-size: 30px;
  cursor: pointer;
  border-radius: 4px;
  width: 48px;
  height: 38px;
  text-align: center;
  box-shadow: 0 6px rgb(3, 100, 55)
}
button:active{
  background-color: rgb(63, 63, 63);
  box-shadow: 0 3px rgb(129, 129, 129);
  transform: translateY(-1px);
}

div#answers {
    position: absolute;
    z-index: 100;
    top: 185px;
    left: 130px;
} 
}



/* Desktops/laptops LARGE screens  */ 
@media (min-width:992px) {
  button {
  font-family: 'Arial';
  font-weight: bold;
  display:inline-block;
  padding:0px;
  margin:5px;
  background-color:rgb(162, 162, 173);
  color:#fff;
  font-size: 56px;
  cursor: pointer;
  border-radius: 8px;
  width: 90px;
  height: 70px;
  text-align: center;
  box-shadow: 0 6px rgb(3, 100, 55)
}
button:active{
  background-color: rgb(63, 63, 63);
  box-shadow: 0 3px rgb(129, 129, 129);
  transform: translateY(-2px);
}

div#answers {
    position: absolute;
    z-index: 100;
    top: 350px;
    left: 150px;
} 
}


/* Desktop XLARGE screens  */ 
@media (min-width:1200px) {
  button {
  font-family: 'Arial';
  font-weight: bold;
  display:inline-block;
  padding:0px;
  margin:5px;
  background-color:rgb(162, 162, 173);
  color:#fff;
  font-size: 56px;
  cursor: pointer;
  border-radius: 8px;
  width: 90px;
  height: 70px;
  text-align: center;
  box-shadow: 0 6px rgb(3, 100, 55)
}
button:active{
  background-color: rgb(63, 63, 63);
  box-shadow: 0 3px rgb(129, 129, 129);
  transform: translateY(-2px);
}

div#answers {
    position: absolute;
    z-index: 100;
    top: 50px;
    left: 550px;
} 
}