@font-face {

font-family: "ButtonsnPatches";

src: url('https://lulling-coven.neocities.org/resources/buttons_patches/Buttons.ttf') format("truetype");

}


@keyframes fade-in { 
  from { opacity:0; }  
  to { opacity:1; }  
} 

.fade-in  {    
    opacity:0;
    animation: fade-in 3.5s ease-in-out forwards;
}

.fade-in:nth-child(2) { animation-delay: .25s; } 
.fade-in:nth-child(3) { animation-delay: .5s; } 


body
{
  width:auto;
  height:auto;
  background-image:url('resources/aboutbg3.jpg');
  transform: scale(0.70);  
  background-repeat:no-repeat;
   background-size:cover;


}


#container
{
  width:1500px;
  height:200vh;
  background-color:rgba(255,255,255,100);
 margin: 0 auto;
 justify-content:center;
 border: 1.25em solid transparent; 
border-image: url('resources/whitelace.png') 34 round;
background-clip: padding-box;
overflow:scroll;
  
}

#yap
{
  
  z-index:999;
  height: 100%;
  width:50%;
  background-color:white;
  overflow:scroll;
 
}

#butterflies
{
  width:10px;
  height:10px;
  right:115%;
  bottom:115%;
  position:absolute;
  pointer-events: none;

}




.lace2 {
  
  -webkit-mask-image: url(https://i.imgur.com/1PjqQS6.png);
-webkit-mask-size: 200%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;     
  
    width: 350px;
    height: auto;

/*cr. solielios*/

}

#me
{
  
  right:0;
  top:0;
  position:absolute;
}
#corkboard
{


  transform:scale(.75);
position:absolute;
right:15%;
top:75%;
  
  
}

#yap li
{
 font-family: 'Margarine';
  font-size:20px;
  color:#7CA37C;
}



#languages
{
  bottom: 100%;
  position:absolute;
}


#mood
{
  width:500px;
  height:500px;
  position:absolute;
  bottom:0;
  right:0;
}




#stamps
{
  position:absolute;
  top:100%;
  width:1000px;
  height:500px;
}


#quiz
{
  position:absolute;

}

h1
{
  
  font-family: "ButtonsnPatches";
   color:#7CA37C;
   font-size:50px;
  
  
}

#mood
{
  bottom:60%;
  left:60%;
}

#music
{
  
  bottom:65%;
  left:60%;
  
  
}

#pagedoll
{
  position:fixed;
  top:70%;
  left:100%;
}