body {
    text-align:center;
	font-family: 'Quicksand', sans-serif;
    font-size: 20px;
    background: #FFFFFF;
}
button {
    margin: 20px;
    padding: 5px 20px;
    background:#f39e37;
    border-radius: 12px;
    border: none;
   
	color: #FFFFFF;
    }
input {
  font-size: 24px;
}
.fill {
  background: white;
  color: red;
  border-bottom: 2px black solid;
    font-family: 'Indie Flower', cursive;	
padding: 0 6px;
  margin: 4px;
}
.container {
	display: flex;
	align-items: center;
}
#space {
padding: 20px;
}
input {
 background:#F2EBC9;
  margin: 15px 0px 0px 0px;
    padding: 10px 30px;
    border-radius: 15px;
    border: none;
    font-family: 'Indie Flower', cursive;	
}

@media only screen and  (min-width: 480px){
body {
    font-size: 24px;
   }
   #space {
padding: 40px;
}
#one{
padding: 40px 0px;
}
#two {
width:400px;
height:400px;
}
input {
    padding: 10px auto;
 font-size: 24px;
 }
button {
 font-size: 20px;
 }
 }

@media only screen and  (max-height: 480px) {
body {
	font-family: 'Quicksand', sans-serif;
    font-size: 20px;
}

#one{
padding: 10px 0px;

display: flex;
 height: auto; 
    width: auto; 
    max-width: 150px; 
    max-height: 150px;
}

#two {
position: absolute;
  top: 80px;
  left: 100;
 height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: 300px;
}
#three {
position: absolute;
  top: 150px;
  right: 100;
}
#four {
position: absolute;
  top: 250px;
  right: 200;
}
}
@media only screen and  (min-height: 1080px) {
   #space {
padding: 0px;
}
#two {
padding: 0px 0px 40px 0px;
}
  }

@media only screen and  (min-height: 6000px) {
#two {
padding: 100px 0px 40px 0px;
}
body {
zoom: 300%;
}
}
@media only screen and  (min-width: 2880px) {
body {
zoom: 300%;
}
}