@media screen and (max-width: 768px) {
        .main {
               
                flex-direction: column-reverse;
                
                
        }

        .side-bar {
                width: 100%;
                
        }

        .updates {
                width: 100%;
        }
      
}





html {
        font-size: 16px;    
}

* {
        box-sizing: border-box;  
}



.press-start-2p-regular {
  font-family: "Press Start 2P", system-ui;
  font-weight: 400;
  font-style: normal;
}


.play-regular {
  font-family: "Play", sans-serif;
  font-weight: 400;
  font-style: normal;
}



body {
              background-color:#111;
  color: #4BB44B;
  border: 5px solid;
   border-radius: 3px;
  max-width: 1028px; 
  font-family: "Play", monospace;
  font-size: 16px;
  margin: auto;
   
}

h1 {
        font-family: "Press Start 2p", monospace;
        margin-left: 15px;
        margin-bottom: 5px;
        font-size:clamp(2rem, 4.5vw, 3rem); 
}

hr {
        width: 95%;
        border: 1px solid #4BB44B;
}

.tagline {
        margin-bottom: 15px;
}

/* navigation */

#navbar {
        display: flex;
        box-sizing: border-box;
        overflow: hidden;
        background-color: #4BB44B;
        color: #222;
        width: 100%;
        border: 3px solid black;
        margin: 0 0;  
          
}

#navbar li  {
        display: flex;
        float: left; 
        padding: 5px 10px 5px 5px;  
        text-align: center; 
        margin: 0;     
       
      }
  
 #navbar li a {
     text-decoration: none;
     color: black;
     
     
      }

#navbar li:hover, a:hover {
        background-color: darkgreen;
        
}




p {
        padding: 0 15px 0 15px;
}

h2 {
        font-family: "Press Start 2p", monospace;
        font-size: 1rem;
        padding: 0 15px;
}

a {
       
        color: #4BB44B;

}

.main {
        display: flex;   
        flex-wrap :wrap;      
        width: 100%;
        border: 4px double #4BB44B; 
    
        
}

.updates {

       flex: 75%;
       border: 4px double #4BB44B;
        
      
}

.side-bar {
        flex: 25%;
        border: 4px double #4BB44B; 
}

/* image images with old-timey effect*/



.side-bar img {
 width: 100%;
  height: auto;
  aspect-ratio: auto;
   filter: sepia(1) saturate(250%) hue-rotate(75deg) brightness(0.9) contrast(1.1) blur(0.78px); 
     image-rendering: pixelated; 
   border-radius: 2px;
}

/* footer */

footer {
        width: 100%;
        border: 4px double #4BB44B;
        box-sizing: border-box;
        font-size: 0.75rem;
        text-align: center;
}