/* Default CSS */

body { background-color: #f0f0d8;
       margin: 8px 75px;
       }

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

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

ol.g { 
  font-family: Arial, Helvetica, sans-serif;
}

li.f { 
       font-family: Arial, Helvetica, sans-serif;
}

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

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

.comi {
        font-family: comic sans MS, verdana;
}

.s4 { font-size: 18px;
}

.s5 { font-size: 20px;
}

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