* {
  padding: 0;
  margin: 0;
}

html {
  font-family: 'Open Sans', sans-serif;
  font-size: 10px;
  font-weight: 300;
}

header {
  display: flex;
  justify-content: center;
  height: 116px;
  font-size: 4rem;
  background-color: #404041;
}

.header-h1 {
  margin: 0;
  color: #EB3223;
  font-weight: 700;
}

.header-h1-span {
  color: #E6E7E8;
  font-weight: 300;
}

.all-inside {
  width: 629px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.main-content {
  padding-top: 30px;
}

input {
  width: 611px;
  padding-left: 10px;
  color: #EB3223;
  font-size: 3rem;
  font-weight: 300;
}

.guess-bttn, 
.reset {
  width: 300px;
  height: 35px;
  border-radius: 16px;
  margin-top: 25px;
  color: #FFFFFF;
  font-family: 'Open Sans', sans-serif;
  font-size: 2rem;
  font-weight: 300;
  background-color: #929497;
}

.guess-bttn:disabled, 
.reset:disabled, 
.level-up-bttn:disabled, 
.guess-level:disabled {
  background-color: #D0D2D3;
}

.guess-bttn:hover, 
.reset:hover, 
.guess-level:hover {
  background-color: #EB3223;
}

.size {
  position: absolute;
  z-index: 1;
  width: 200px;
} 

.hide-one {
 display: none;
}

.one {
  top: 500px;
  animation: unicornOne 10s infinite;
}

@keyframes unicornOne {
  0% {left: 90px;}
  50% { top: 300px;left: 50px;}
  100% {left: 90px;}
}

.hide-two {
 display: none;
}

.two {
 top: 575px;
 animation: unicornTwo 10s infinite;
}

@keyframes unicornTwo {
  0% { top: 300px;left: 815px;}
  50% { top: 575px;left: 800px;}
  100% { top: 300px;left: 835px;}
}

.hide-three {
 display: none;
}

.three {
  top: 200px;
  width: 115px;
  height: 163px;
  animation: unicornThree 10s infinite;
}

@keyframes unicornThree {
  0% {left: 26px;}
  50% {top: 15px;}
  100% {left: 26px;}
}

.hide-four {
 display: none;
}

.four {
  top: 300px;
  animation: unicornFour 10s infinite;
}

@keyframes unicornFour {
  0% {left: 720px;}
  50% {left: 200px;}
  100% {left: 720px;}
}

.hide-five {
 display: none;
}

.five {
  top: 120px;
  animation: unicornFive 10s infinite;
}

@keyframes unicornFive {
  0% {left: 600px;}
  50% { top: 200px;left: 100px;}
  100% { top: 200px;left: 600px;}
}

.hide-six {
 display: none;
}

.six {
  top: 575px;
  animation: unicornSix 10s infinite;
}

@keyframes unicornSix {
  0% {left: 313px;}
  50% {left: 33px;}
  100% {left: 313px;}
}

.seven {
  width: 155px;
  height: 150px;
  animation: unicornSeven 10s infinite;
}

.hide-seven {
  display: none;
}

@keyframes unicornSeven {
  0% {left: 213px;}
  50% {top: 433px; left: 331px;}
  100% {left: 513px;}
}

.guess-number {
  margin-right: 26px;
}

.last-guess, 
.low-or-high {
  margin-top: 20px;
  color: #404041;
  font-size: 2.5rem;
}

.user-guess-number {
  color: #EB3223;
  font-family: 'Open Sans', sans-serif;
  font-size: 7rem;
  font-weight: 300;
  text-align: center;
}

.low-or-high {
  margin-top: 10px;
  font-weight: 700;
}

.reset, 
.guess-level {
  width: 629px;
}


h3 {
  margin-top: 20px;
  font-size: 2rem;
  font-weight: 300;
}

.styling-p {
  font-size: 2rem;
}

.guess-count-placeholder,
.guess-count,
.unicorn-rescued-placeholder,
.unicorn-rescued {
  margin-left: 5px;
  color: #404041;
  font-size: 2.5rem;
  font-weight: 300;
}



@media (max-width: 300px) {
 body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
 }
 
 header {
  align-items: center;
  height: 200px;
  font-size: 6rem;
 }

 .all-inside {
   width: 100%;
 }

 input {
   width: 91%;
   border: 0.5px solid #404041;
   font-size: 7rem;
 }

 .guess-bttn,
 .reset {
   width: 93%;
   height: 90px;
   border-radius: 51px;
   font-size: 6rem;
 }

 .reset {
   margin-bottom: 30px;
 }

 .guess-number {
   margin-top: 45px;
   margin-right: 0;
 }

 .last-guess,
 .low-or-high,
 .guess-count-placeholder,
 .guess-count,
 .unicorn-rescued-placeholder,
 .unicorn-rescued {
  font-size: 3.5rem;
 }
}