html
{
  
}



:root
{ 
  --stripes-size:110px;
}


@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:100%;
      height:100vh;
      overflow:auto;
      display: flex;
    justify-content: center; 
    align-items: center;       
      min-width:0;
      
}

      .stripes
      {
        position:relative;
        width:100%;
        height:100%;
        
      }
        
      .stripes::before {
        position:fixed;
        z-index:-1;
        content:"";
        top:0;
        left:0;
        height: 100%;
		width: calc(100% + var(--stripes-size));
		background: 
		repeating-linear-gradient(
        45deg,
        white 0%,
        white 25%,
       #EADDCA	25%,
       #EADDCA	50%
        );
        background-size: var(--stripes-size) 
        var(--stripes-size);
        animation:
        animateStripes 6s linear infinite;
        filter:brightness(75%);
      }
      
      
    .stripes::after {
		position: absolute;
		width: 100%;
		height: 100%;
		content: "";
		background: radial-gradient(ellipse at center, rgba(black, 0) 0%, black 100%);
	}


@keyframes animateStripes {
	0% {
		transform: translateX(0);
	}
	100% {
	 transform: translateX( calc(var(--stripes-size) * -1) );
		transform: translateX(-110px);
	}
}

#content-wrapper
{
   transform:scale(.55);


}

#room
{
  width:100%;
  height:100%;
  right:0;
  left:0;
     border: .3em solid transparent; 
border-image: url('resources/whitelace.png') 34 round;
background-clip: padding-box;
  
}
#content
{
  background-color:white;
  color:#5C4033;
  right:0;
  left:0;
  justify-content:center;
  position:absolute;
  text-align:center;
  height:auto;
  width:auto;
}