/* Default CSS */

body { background-color: #f0f0d8;
       margin: 5px 20px;
       align: center;
       font-family: Arial, Helvetica, sans-serif;
       }

.header { 
      /* Set the height or other necessary styles for your header */ 
      background-image: url('./bratslogo2.gif'); 
      background-size: cover; /* Adjust the image size to cover the header */ 
      background-position: center; /* Center the image */ 
      /* Additional properties for background if needed */
          }
          
.responsive {
  width: 100%;
  max-width: 450px;
  height: auto;
}

p{
  text-align: center;
  padding: 5px; 
}
p.double{
  border-style: double;
  margin: auto auto;
  max-width: 400px;
}  
           
/* Positioning Styles*/
table { margin-left: auto;      
        margin-right: auto;
        border-collapse: collapse;
        width: 85%;
        cellpadding: 10px;
}
table.e { margin-left: auto;      
        margin-right: auto;
        border: 2px center;
        width: 85%;
        cellpadding: 2px;
        }

* {
  box-sizing: border-box;
  border-radius: 9px;
  font-family: Ariel, Helvetica, sans-serif;
}

a { text-decoration: none; }
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }

td { column-span: 2;
        font-family: Ariel, Helvetica, sans-serif;
}

td.c { 
        display: block;
        border: 0;
        text-align: center;
        margin-left: auto;
        margin-right: auto; 
    }
 
.centre {
        display: run-in;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
}

img { border: 0;
 }
 
 /* Add a black background color to the top navigation */
.topnav {
  background-color: #f0f0d8;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
} 

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 1px;
  background-color: black;
  padding: 1px;
}

.grid-container > div {
  background-color: #f0f0d8;
  text-align: center;
  padding: 20px 0;
  font-size: 20px;
}

.grid-container1 {
  display: grid;
  grid-template-columns: auto auto;
  gap: 1px;
  background-color: black;
  padding: 1px;
}

.grid-container1 > div {
  background-color: #f0f0d8;
  text-align: center;
  padding: 20px 0;
  font-size: 20px;
}

.grid-container2 { display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  gap: 1px;
  background-color: black;
  padding: 1px; }
  
.grid-container2 > div {
  background-color: #f0f0d8;
  text-align: center;
  padding: 20px 0;
  font-size: 20px;
}

.grid-item {
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

.grid-container3 { display: grid;
  grid-template-columns: auto auto auto auto;
  gap: 1px;
  background-color: black;
  padding: 1px; }
  
.grid-container3 > div {
  background-color: #f0f0d8;
  text-align: center;
  padding: 20px 0;
  font-size: 20px;
}  
 
ol.d {
  list-style-type: lower-alpha;
}

hr.new1 {
  border-top: 2px dashed;
  width: 85%;
}

/* FONTS */
.sans {
        font-family: Arial, Helvetica, sans-serif; }

.comi { font-family: Comic Sans MS, Tahoma; }

.s4 { font-size: 18px;
}

.s5 { font-size: 20px;
}

.s6 { font-size: 28px
}

.jus { text-align: justify; 
}
/* colours*/
.red {
        color: red;
}

.blu {
        color: blue;
}

.gre {
        color: green;
}

.yel {  color: yellow; }

.bla { 
        color: #0f0f0f;
}

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 8px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  }
 
.button:hover {
  background-color: #555555;
  }
/* Footer */
article {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

footer {
    display: flex;
    justify-content: center;
    padding: 5px;
    background-color: #45a5ff;
    color: #fff;
}