html {
    margin: 0;
    padding: 0;
    
}
img {
    max-width:100%;
    padding: 17px;
    margin-bottom: 45px;
    }

body {
    padding: 0 17px;
    background-color: #000;
    color: white;
  
}


h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Press Start 2P", cursive;
    text-transform: uppercase;
    text-align: center;
    color: #51f1e3;
    margin: 0;
    padding: 9px;
}

h1, h2, h3, h4{
    background-color: firebrick;
    padding: 17px;
    margin: 0;
   
}
h1 {font-size: 3rem;}


/* The navigation bar */
.navbar {
    overflow: hidden;
    background-color: #333;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
  }
  
  /* Links inside the navbar */
  .navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  /* Change background on mouse-over */
  .navbar a:hover {
    background: #ddd;
    color: black;
  }
  
  /* Main content */
  .main {
    margin-top: 30px; /* Add a top margin to avoid content overlay */
  }

.padding {
    padding:9px;
    margin: 5px;
    font-size: 2rem;
    background-color: chocolate;
    color: lightgray;
    border-radius: 3px;
}

.big-icon {
    font-size: 45px;
    margin: 17px
}
.rem2 {
    font-size: 2rem;
    line-height: 17px;
}

.maroon {   
    background-color: maroon;
    margin: 45px 10%;
    padding: 15px;
    border-radius: 9px;
}

.white {
    background-color: burlywood;
    margin: 45px 10%;
    padding: 15px;
    border-radius: 9px;
}

.darkcyan {
    background-color: darkcyan;
    margin: 45px 10%;
    padding: 15px;
    border-radius: 9px;
}

hr {
    margin: 45px 0 45px 0;
    border-color: antiquewhite;
}

a:visited {
    color: orange;
    text-decoration: none;
}

a:link {
    color: yellow;
    text-decoration: none;
}

#main {
    border-radius: 9px;
    background-color: #000;
}

header {
    background-color: maroon;
    margin: 45px 10%;
    padding: 15px;
    border-radius: 9px;
}




.brand-wwg1wga {
    color: #51f1e3;
    font-size: 4.5rem;
    padding: 0;
    margin: 5px 0 0 0;
}

.headline-date {
    color: #51f1e3;
    font-size: 1.7rem;
    font-style: italic;
      
}

.headline-vol-issue {
    color: #51f1e3;
    margin: 0 0 45px 0;
}

.header-links1 {
    margin: 17px;
    }
.header-links2 {
    margin: 17px;
    }


.flex-container {
     display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
 
}

.flex-container-div {
    justify-content: center;
    align-items: center;
    margin: 25px;
  
}

.caption {
    text-align: center;
    margin-bottom: 45px;
}

footer {
    text-align: center;
    }

.breathe {
   margin-bottom: 45px;
   }

.responsive {
    width: 100%;
    height: auto;
    text-align: center;
}

.banner {
    background-color: black;
    padding: 20px;
    background-image: url("/img/banner-op.jpg");

}


    /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
 

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Press Start 2P", cursive;
    text-transform: uppercase;
    text-align: center;
    color: #51f1e3;
    margin: 0;
    padding: 9px;
}

h1, h2, h3, h4{
    background-color: firebrick;
    padding: 17px;
    margin: 0;
   
}
    
h1 {font-size: 1.3rem;}
    
.headline-date {
    color: #51f1e3;
    font-size: 1.1rem;
    font-style: italic;
      margin: 45px 0 0 0;
      
}

.headline-vol-issue {
    color: #51f1e3;
    margin: 0 0 45px 0;
}
}

@media only screen and (max-width: 992px)  {
 
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Press Start 2P", cursive;
    text-transform: uppercase;
    text-align: center;
    color: #51f1e3;
    margin: 0;
    padding: 9px;
    font-size: .9rem;
}

h1, h2, h3, h4{
    background-color: firebrick;
    padding: 17px;
    margin: 0;
   
}
    
h1 {font-size: 1.5rem;}
  
}


.container {
    position: relative;
    width: 100%;
    overflow:visible;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
  } 
  
  
  
  .responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
  }