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

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

html {
  background-image: url(../img11/00.jpg);
  background-color:rgb(238, 203, 225);
background-size: 100%;
overflow-x: hidden;
background-repeat: no-repeat;
}

.text1 {
margin-top: 12%;
margin-left: 10%;
transition: all 3s ease-in-out 0s;
transition: 8s;
transform: translate(0, 10%);
}

.text1 :hover {
  animation: shake 4.5s; 
  animation-iteration-count: infinite;
}

.text2 {
  margin-top: 17%;
  margin-left: 8%;
  }

@keyframes shake {
  0% { transform: translate(3px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-180deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(6px, 2px) rotate(0deg); }
  40% { transform: translate(9px, -1px) rotate(10deg); }
  50% { transform: translate(-6px, 2px) rotate(-40deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(6px, 1px) rotate(-180deg); }
  80% { transform: translate(-3px, -1px) rotate(1deg); }
  90% { transform: translate(3px, 2px) rotate(0deg); }
  100% { transform: translate(3px, -2px) rotate(-40deg); }
}

.circle {
text-align: right;
margin-right: 12%;
position: relative;
z-index: 1;
}

.circle img {
  animation: rotation 4s infinite linear;
}

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

.text2 {
  position: relative;
  z-index: 2;
  margin-top: -20%;
  text-align: right;
  margin-right: 20%;
}

.text2 img {
animation: rotation2 1s infinite linear;
}

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


.text3 {
  margin-left:12%;
  margin-top: 2.75%;
  animation: fadeIn 0.075s infinite alternate;
  opacity: 1;
  }
  
  @keyframes fadeIn { 
    from { opacity: 0.01; } 
  }
      
    

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

.moving {
  position: relative;
  z-index: 2;
  margin-top: -42%;
  text-align: left;
  margin-left: 10%;
  padding-bottom: 9%;
}

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

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

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

}
@media screen and (max-height:400px) {

}