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

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

html, body {
background: linear-gradient(0deg ,rgba(149,34,195,1) 25%, rgba(45,54,253,1) 100%);
overflow-x: hidden;
overflow-y: hidden;
background-repeat:round;
}

.face {
  margin-top: -2%;
  text-align: center;
  z-index: 0;
  position: relative;
}

.face img {
width: 45%;
}

button {
  color:rgb(46, 34, 16);
  border-radius: 8px;
  background-color:rgb(252, 179, 255);
  background-image:  url(../sound.png);
  background-size: cover;
  height: 50px;
  width: 50px;
  font-family: 'Comic Neue';
  font-size: 2.5em;
  font-weight: 700;
  position: relative;
  z-index: 4;
}

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

.eyes {
  margin-top: -38.6%;
  margin-left: 35.1%;
  text-align: left;
  position: relative;
  z-index: 1;
  animation:10s ease 6s normal forwards 1 fadein;
  -webkit-animation:6s ease 4s normal forwards 1 fadein;
  opacity:0;
  }

  .eyes img {
    width:47.8%;
  }
  
  @keyframes fadein{from{opacity:0}
  to{opacity:1}
  }
  
  @-webkit-keyframes fadein{from{opacity:0}
  to{opacity:1}
  }

  .text {
    margin-top: -20%;
    margin-left: 25%;
    text-align: left;
    position: relative;
    z-index: 1;
  animation: 18s movetext;
  animation-fill-mode: forwards;
  }

  .text img {
    width:65%;
  }

  @keyframes movetext {
  from {
    transform: translate(0%, 0%);
  }
  to {
    transform: translate(0%, -30%);
  }
}

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

body { 
  height:100vh; 
}

@media screen and (max-width: 1024px) {
  
  body {  
    height: 150vh;
  }

  .face img {
width: 70%;
margin-top: 20%;
  }

  .eyes img {
    margin-top: -33.6%;
    margin-left: -13.4%;
    width:76%; 
  }

  .text img {
    width:90%;
    margin-left: -10%;
  }
}

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

  body {  
    height: 100vh;
  }

    .face img {
      width: 70%;
      margin-top: 20%;
        }
      
        .eyes img {
          margin-top: -33.6%;
          margin-left: -13.4%;
          width:76%; 
        }


        .text {
          top: 30%;
          margin-top: -85%;
          margin-left: 25%;
          transition: 18s;
          transform: translate(0, -30%);
        }


  }
@media screen and (max-width:767px){
  .eyes img {
    margin-top: -34.6%;
    margin-left: -13.4%;
    width:76%; 
  }
}
@media screen and (max-height:400px) {
  body {  
    height: 420vh;
  }
}