/*!==============================
*post-gallery.online
*/

@font-face {
  font-family: Comic Neue;
  src: url("ComicNeue-Light.ttf");       
}

html,body  {
  background-image: url(../img8/00-new.jpg);
  background-color:rgb(255, 166, 0);
  background-position: top;
  background-size: cover;
  background-attachment:fixed;
  background-repeat: repeat;
  overflow-x: hidden;
}

.eyeone {
  margin-top: -3%;
  margin-left: 24%;
}

.eyeone img {
  animation: rotation 4s infinite linear;
  width:45%;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-359deg);
  }
}

.eyetwo {
  margin-top: -37%;
  margin-left: 36%;
}

.eyetwo img {
  animation: rotation2 4s infinite linear;
  width:60%;
}

@keyframes rotation2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.face {
  margin-top: -15%;
  margin-left: 35%;
}

.face img {
  width:35%;
}

.sticky {
  position:fixed;
  bottom:-0.5%;
  text-align: center;
  left:4%;
  right:0;  
}

.sticky img {
  width:30%;
}

h1 {
  font-family: 'Comic Neue';
  font-size: 4vh;
  text-align: right;
  right:2%;
  bottom:0;
  color:rgb(209, 1, 1);
  filter: drop-shadow(4px 2px 3px rgb(255, 250, 174));
  z-index: 20;
  position: fixed;
}

button {
  color:rgb(0, 0, 0);
  border-radius: 8px;
  background-color:rgb(241, 49, 1);
  background-image:  url(../sound.png);
  background-size: cover;
  height: 50px;
  width: 50px;
  font-family: 'Comic Neue';
  font-size: 2.5em;
  font-weight: 700;
}

button:active {
  background-color: #ffb13c;
  box-shadow: 0 5px #666;
}

body {  

}

@media screen and (max-width: 1040px) {
html,body  {
  background-image: url(../img8/00-mob.jpg);
  background-color:rgb(255, 166, 0);
  background-position: top;
  background-size: cover;
  background-attachment:fixed;
  background-repeat: repeat;
  overflow-x: hidden;
}
  .eyeone img {
    width:85%;
    margin-left: -27%;
    margin-top:12%;
  }
  .eyetwo img {
    animation: rotation2 4s infinite linear;
    width:105%;
    margin-top: -46%;
    margin-left: -5%;
  }
  .face img {
    width:72%;
    margin-left: -16%;
    margin-top: 8%;
  }
  .sticky img {
    width:70%;
    margin-left:14%;
  }
}

@media screen and (max-width:991px){
}

@media screen and (max-width:767px){

}
@media screen and (max-height:400px) {
  .eyeone img {
    width:85%;
    margin-left: -27%;
    margin-top:-30%;
  }
  .eyetwo img {
    animation: rotation2 4s infinite linear;
    width:100%;
    margin-top: -46%;
  }
  .face img {
    width:72%;
    margin-left: -16%;
    margin-top: -22%;
  }
  .sticky img {
    width:70%;
    margin-left:14%;
  }
}