.fade-in {
  opacity: 0;  /* make the element initially transparent */
  transition: opacity 1s;  /* transition effect to bring the element to full opacity over 1 second */
}

.in-view {
  /* make the element fully opaque when it's in view */
  opacity: 1!important;
}
.mainbox{
	transform: scale(1); /* initial scale */
    transform-origin: bottom right; 
}


	::selection {
  background-color: #FFC0CB; /* pastel pink */
  color: #566a69;
  }
  
.selected {
background-image:url('1a.png');
background-size:400px;
}   
span{
color:#956d8d!important;
}
body{
	opacity:0;
background-image:url('G3i8s7Me_4x.jpg');
background-size:cover;
background-repeat:no-repeat;
background-color:#fff7f5;
}




.mainbox::after{
    content: '';
    position: absolute;
    right: -90px;
    bottom: 0px; 
    width: 120px;
    height: 200px;
    background-image: url(chib4.png);
    background-size: contain;
    background-repeat: no-repeat;
	opacity:0;
	transition: opacity 1s;
	//  animation: fadeIn 1s forwards;
}

@keyframes wiggle {
  0% {transform: rotate(10deg);}
  25% {transform: rotate(-10deg);}
  50% {transform: rotate(20deg);}
  75% {transform: rotate(-5deg);}
  100% {transform: rotate(0deg);}
}

.hovered:after{
opacity:1;
animation: wiggle 1s forwards;
}



.mainbox::before{
    content: '';
    position: absolute;
    left: -70px;
    top: 50px;
    width: 120px;
    height: 200px;
    background-image: url(chib1.png);
    background-size: contain;
    background-repeat: no-repeat;
	display:none;
	opacity:1;
}


 
.mainbox {
	opacity:0;
	 transition: opacity 1s;
border: 10px solid #ffede5;
margin:auto;
width:300px;
min-height:130px;
background-image:url('1a.png');
background-size:400px;
background-color:#FFF;
bottom:50px;
  position: absolute;
  bottom: 150px;
  left: 50%;
  transform: translate(-50%, 0);
  background-color: rgba(255, 255, 255, 0.95);
  padding:25px;
  border-radius:25px;
  font-family: 'Anime I', sans-serif;
  text-align:center;
  font-size:45px;
  box-shadow: 0 0 55px #00000057;
}