/*


*/





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

body {
  
    margin: 0;
color: black;  
text-align: center;
overflow-x: hidden;
font-family: 'Times New Roman';
                box-sizing: border-box;
}

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

           
        

  header {
    height: 300px; 
    background-size: 100% 100%;
    background-position: center; 
    background-repeat: no-repeat;
    overflow: hidden;
    max-width: 100%;
    width: 100%;
    
}

 nav {
                height: 40px;
                background-color: white;
                width: 100%;
                margin-bottom: 2px;
            }

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

            nav li {
                padding-top: 10px;
            }

            /* navigation links*/
            nav li a {
                color: black;
                /* navbar text color */
                text-decoration: none;
                /* this removes the underline */
            }

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


                     #flex {
                display: flex;
            }




            main {
                flex: 1;
  box-sizing: border-box;  
  color: black;
  background: white;
                padding: 20px;
                order: 2;
                
                font-weight: bold;
              
            }
            
            main ul {
  padding: 0;
  margin: 0;
}

main li {
  margin-top: 16px; 
}
  

             section {
   
   margin-top: 16px;
   margin-bottom: 16px; 
   
 }
 
 ul {
   
   list-style-type: none;
   
 }
 

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

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

         
            p {
              
              font-size: 15px;              
            }




             #rightSidebar {
                order: 3;
            }

                     #leftSidebar {
                    order: 1;
                  
                }

            footer {
                padding: 20px;
  box-sizing: border-box;  
  background: white;
  margin-bottom: 5px;
  


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


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



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

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



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

                #rightSidebar {
                    order: 3;
                  
                }

 
           #leftSidebar {
                    order: 1;
                  
                }

 
        
  

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

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

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

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

header {
  
                   height: 200px;



}
         
         
         footer {
           
  margin-bottom: 0;
  
  
}

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

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

}

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

}

}