/* THE MAIN CSS YYYAYYYY */

body {
  
    margin: 0;
                background-color: black;
color: white;  
overflow-x: hidden;
                box-sizing: border-box;
}

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

           
            #container a {
                color: #0000FF;                
                font-weight: bold;
            
            }

            #header {
               
                height: 300px;
              background-repeat: no-repeat;
              background-size: cover;
                background-image:  url("https://i.postimg.cc/rwTJ3wg2/Screenshot-2026-03-31-015822.png");
                max-width: 100%;
              width: 100%;
             
            }

            /* navigation section!! */
            #navbar {
                height: 40px;
                background-color: black;
                                  border: 2px solid white; 
  box-sizing: border-box;  
            }

            #navbar ul {
                display: flex;
                padding: 0;
                margin: 0;
                list-style-type: none;
                justify-content: space-evenly;
            }

            #navbar li {
                padding-top: 10px;
            }

            /* navigation links*/
            #navbar li a {
                color: white;
                /* navbar text color */
                font-weight: 800;
                text-decoration: none;
            }

            /* navigation link when a link is hovered over */
            #navbar li a:hover {
                color: #a49cba;
                text-decoration: underline;
            }

            #flex {
                display: flex;
            }

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

  

  
            }


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

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

  margin: 0 auto;
  
}
            
            h2,
            h3 {
              font-size: 20px;
              overflow: hidden;
              
            }
         
            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; /* Keeps text on one line */
              overflow: hidden;
                text-align: center;
                /* this centers the footer text */
            }


/* other stuff */

.stamps {
  
  
  position: relative;
    display: inline-flex;
  animation: scroll 20s linear infinite; 
  margin-top: 8px;
  
} 


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

                
}

.stamps:hover { 
  
  animation-play-state: paused; 
  
}
  
  
  @keyframes scroll {
  from { transform: translateX(0); }
    to { transform: translateX(-50%); }
    
        to { transform: translateX(-100%); } 



}



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



            /* CSS for extras */

            #topBar {
                width: 100%;
                height: 30px;
                padding: 10px;
                font-size: smaller;
                background-color: #13092D;
            }


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





            /* BELOW THIS POINT IS MEDIA QUERY */

            /* so you wanna change the width of your page? 
    by default, the container width is 900px.
    in order to keep things responsive, take your new height,
    and then subtrack it by 100. use this new number as the 
    "max-width" value below
    */

            @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;
max-width: 100%;
flex: 0 0 100vw;
                }
                
          
                main {
                    order: 2;
max-width: 100%;
   -scroll-snap-align: start;
  -scroll-snap-stop: always;
                    flex: 0 0 100vw;
                }

                #leftSidebar {
                    order: 1;
                  
                }

                #rightSidebar {
                    order: 3;
                     
                }

                #navbar ul {
                    flex-wrap: wrap;
                }
           
.indeximages {
  
  position: relative;
  
}

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





 }