/*
╭──────────────────────────────────────────────────· · ୨୧ · ·──────────────────────────────────── ──────╮

︵‿₊୨୧⏔⏔⏔꒰ঌ ♰ ໒꒱⏔⏔⏔୨୧₊‿︵

THE VOID OF LIMINALITY <3

"You look quite divine tonight..."


Hello. I am okay with people taking inspiration from my code. But please do not hotlink or use images I've made without credit.

And please, do not take entire pages. :-(

That is all. Goodbye, my angels.


- The Void of Liminality's Computer Angel. <3


︵‿₊୨୧⏔⏔⏔꒰ঌ ♰ ໒꒱⏔⏔⏔୨୧₊‿︵

╰───────────────────────────────────────────────── · · ୨୧ · · ──────────────────────────────────────────╯⠀⠀⠀⠀⠀

*/


@font-face {
    font-family: "Faith Collapsing"; 
    src: url("https://file.garden/adUt3_IEfSR0WPPS/fonts/Faith%20Collapsing.ttf") format("truetype");
}



body {
  
  font-family: 'Times New Roman';
  background:url("https://i.postimg.cc/L6XcP6KG/dark-candle.gif");
background-attachment: fixed; 
   color: white;
   font-size: 20px;
   text-align: center;
    margin: 0; 
}

.container {
                max-width: 1100px;
                margin: 0 auto;
            }

           
        
            header {
               
                height: 270px;
                background-size: 100% 100%;
              background-repeat: no-repeat;
              overflow: hidden;
              max-width: 100%;
    background-image: url("https://i.postimg.cc/nVsKbfb3/ecf728ef6db1c69dc1a08f469f54a367.jpg");   
    width: 100%;
             
            }
       


nav{
  z-index: 99;
  background-color: black;
  position: fixed;
  padding: 10px;
  height: 100%;
  width: 200px;
  max-height: 100%;   
    overflow-y: auto;     
    overflow-x: hidden; 
}

.navlink{
 color: white;
  display: block;
  padding: 5px;
  margin: 8px 5px 8px;
}
     
     
#flex {
    display: flex;
    align-items: flex-start;
    width: 100%;
    position: relative; 
}

main {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    
    box-sizing: border-box;  
    padding: 20px;
    width: 100%;
    max-width: 800px; 
}

nav {
    width: 200px;
    box-sizing: border-box;
    padding: 10px;
    background: black;
    z-index: 10;
}

aside, #rightSidebar {
    margin-left: auto;
    width: 220px;
    box-sizing: border-box;  
    padding: 20px;
    z-index: 10;
}


  aside img {
 
 width: 100%;   
 max-width: 100%;
    margin-bottom: 15px;



  
            }





             ul {
               padding: 0;
  margin: 0;
  list-style-type: none; 
}

 li {
  margin-bottom: 13px; 
}
  

             section {
   
   margin-top: 16px;
   margin-bottom: 16px; 
   
 }


       h1 {
         
         
         
  font-size: 40px;
  margin: 0 auto;
  
}
      .title {
        
        font-size: 45px; 
        
      }
      
            h2 {
              font-size: 30px;
              overflow: hidden;
              
            }
            
    
            

         
   





            footer {
                padding: 20px;
  box-sizing: border-box;  
  white-space: nowrap;
              overflow: hidden;
                text-align: center;
            }

.scrollbox {
  height:150px;
  overflow:auto;
  overflow-x:hidden;
  margin-bottom: 8px;
  margin-top: 8px;
}

            .scrollbox ul {
  padding: 10px;
  
}


#topborder, #bottomborder {
    position: fixed;
    left: 0;
    right: 0;
    width: 100vw;
    height: 45px; 
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: top center;
opacity: 0.85;

    overflow: hidden;
    pointer-events: none;
    z-index: 300;
}

#topborder {
    top: 0;
        background-image: url('https://i.postimg.cc/25KFQzrw/doubleruffle-Half-Sml.png');

}


#bottomborder {
    bottom: 0;
       background-image: url('https://i.postimg.cc/nhmdc9JS/lacebottom-(1)-(1).png');

    transform: scaleY(-1);      
    transform-origin: center;    
}




  .blinkies img {
    
   object-fit: cover;
    overflow: hidden;
  margin-bottom: 4px;
  margin-right: 4px; 
  overflow-x: hidden;



}



.indeximages img {
  
  width: 100%;
  margin-top: 4px;
  
}

.divider {
  
   position: relative;
  max-width: 100%;
  overflow: hidden;
  
  
}

.divider img {
  
  width: 100%;
  margin-top: 30px;
  


}

  

.stamps img {
  
               margin-right: 4px;
               margin-top: 8px;
              overflow: hidden;

                
}

.buttons img {
  
  width: 15%;
  max-width: 15%;
  margin-right: 4px;
  margin-top: 8px;
  
  
}


.marquee {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

.marquee-content {
  display: inline-block;
  animation: marquee-scroll 20s linear infinite; 
}





  



 
   .angelicHolyContainer {
  display: flex;      
  align-items: center;   
}

.angelicHolyContainer img {
 width: 3.5rem;
 margin-left: 10px;
}


.marquee:hover .marquee-content {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}



  .lines {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	z-index: 300;
	opacity: 0.2;
	
  
  }


.lines:before {
	content: '';
	position: absolute;
	left: 0;
	width: 100vw;
	height: 100vh;
	top: 0;
	bottom: 0;
	right: 0;
	pointer-events: none;
	background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.5) 51%);
	background-size: 100% 4px;
	will-change: background, background-size;
	animation: scanlines 0.2s linear infinite;


}
lines::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  pointer-events: none;
  animation: scanlines 0.15s infinite;
  
}
  

@keyframes scanlines { 
	from {
		background: linear-gradient(to bottom, transparent 10%, rgba(0, 0, 0, 0.5) 51%);
		background-size: 100% 4px;
	}
	to {
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 50%, transparent 51%);
		background-size: 100% 4px;
	
	}
	
}