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

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

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/2jbk7HCY/177994729135443776.gif");
background-attachment: fixed; 
   color: white;
    margin: 0; 
}

.container {
                max-width: 1300px;
                margin: 0 auto;
                font-size: 15px;
            }

           
            #container a {
                color: #0000FF;                
            
            }

            header {
               
                height: 300px;
                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 {
  
  height:auto;
  width: 100%;
  max-width: 100%;
  margin-top:2px;
  overflow: hidden;
  font-size: 15px;
  border:1px solid #ccc;
  margin-bottom: 4px;
}

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

nav li {
  list-style: none;
  display: block;
  margin-top: 16px; 
  margin-bottom: 16px;
}


            
nav a  {
color: white;
font-weight: 800;
margin-left: 4px;
text-decoration: none;
margin-bottom: 4px;
            }

  nav a:hover {
                color: #a49cba;
                text-decoration: underline;
            }
            


                     #flex {
                display: flex;
            }

       
            aside {
                width: 250px;
                padding: 20px;
   border: 2px solid white; 
  box-sizing: border-box;  
  position: relative;
  max-width: 100%;
  
}
  
  aside img {
 
 width: 100%;   
 max-width: 100%;
    margin-top: 4px;

  

  
            }


            main {
                flex: 1;
                border: 2px solid white; 
  box-sizing: border-box;  
                padding: 20px;
                order: 2;
              
            }
            
            main ul {
  padding: 0;
  margin: 0;
}

main li {
  margin-top: 16px; 
}
  

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


       h1 {
         
         
         
   font-size: 35px;
  font-weight: bold;

  margin: 0 auto;
  
}
            
            h2 {
              font-size: 25px;
              overflow: hidden;
              
            }
            
            h3 {
              
              font-size: 20px;
              
            }
            

         
            p {
              
              font-size: 15px;
              
            }




             #leftSidebar {
                order: 1;
            }

            #rightSidebar {
                order: 3;
            }

            footer {
                padding: 20px;
                border: 2px solid white; 
  box-sizing: border-box;  
  
  


              margin-top: 8px;
  white-space: nowrap;
              overflow: hidden;
                text-align: center;
            }


#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 {
  overflow: hidden;
  position: relative;
  

  }
  

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



}

.indeximages {
  
  position: relative;
  max-width: 100%;
  
}

.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; 
}



.angelicButton {

position: relative;
background: linear-gradient(#6381b2 , #FFFFFF 40%, #6381b2); 
display: inline-block;
    padding: 18px 45px;
    font-family: 'Times New Roman';
  font-weight: bold;
  color: white;
  margin-bottom: 4px;
  text-decoration: none;
  border: none;
 width: 15em;  
 max-width: 100%;
height: 4.4em;
display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  outline: none;
    filter: drop-shadow(0 0 10px rgba(5, 46, 166, 0.9));
  box-shadow:inset 0 2px 5px rgba(255, 255, 255, 0.5),0 5px 10px rgba(0, 0, 0, 0.2); 
  font-weight: bold;
  cursor: pointer;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
  transition: none;

  }
  
  .angelicButton img {
    
    width: 100%;
    max-width: 100%;
    
  }
  
  .angelicButton:hover {
    
      box-shadow: 0 0 15px 5px rgba(255, 255, 255, 1);
    transform: translateY(-2px)
    
  }

@keyframes angelicPulse {
  0% { filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.8)); }
  50% { filter: drop-shadow(0 0 20px rgba(255, 255, 255, 1)); }
  100% { filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.8)); }
}




  
  .nav-container {
display: flex;
flex-direction: column;
width: fit-content;
gap: 10px;
margin: 0;
}

.nav-item {
display: flex;
align-items: center;
gap: 1px;
}





 
   .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;
	
	}
	
}

            @media only screen and (max-width: 800px) {
              
              
               body {
                 
               max-width: 1200px; 
                
               }
    
    
                #flex {
                  
                     display: flex;
    flex-wrap: nowrap;
    overflow-x: auto; 
    -scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
                }



                aside {
  -scroll-snap-align: start;
  -scroll-snap-stop: always;
flex: 0 0 100vw; 
overflow: auto;
max-width: 70%;
  position: relative;
  width: 70%;

                }
                
                nav, nav img, nav a {
                  
                  width: 99%;
                  overflow-x: hidden;
                  overflow: hidden;
                  max-width: 99%;
                  
                }
                
                
        
                
          
                main {
                    order: 2;
max-width: 100%;
overflow: auto;
   -scroll-snap-align: start;
  -scroll-snap-stop: always;
                    flex: 0 0 100vw;
                }

                #leftSidebar {
                    order: 1;
                  
                }

                #rightSidebar {
                    order: 3;
                     
                }

        
  

.indeximages {
  
  position: relative;
  max-width: 100%;
  
}

.indeximages img {
  
  width: 100%;
max-width: 100%;
  
}

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

.divider img {
  
  width: 100%;
max-width: 100%;
margin-top: 10px;
margin-bottom: 10px;
  
}

header {
  
                   height: 200px;



}
         
         


.art img {
  
  max-width: 100%;
  width:100%;
  
}

.buttons img {
  
  max-width: 20%;
  width: 20%;

}

.marquee-content img {
  height: 5.625rem;  
  width: 9rem;
  

}

.angelicHolyContainer img {

 
width:3em;

margin-right: 6em;


  
}

}