.wrapper {               /* Full Wrapper for the whole page */

  max-width: 1100px;
  margin: 0 auto;          /* Simple way to center in the viewport */ 
  padding: 0 15px;
  margin-top: 10px;
  border-radius: 7px;

  background-color: var(--wrapper-background);
  border: solid 4px var(--wrapper-border);

}


/* Main Navigation Section */

.main-nav-logo-wrapper {

  background-color: var(--wrapper-background);
  
} 

.navbar .main-nav-logo-wrapper {

  display: flex;         
  align-items: center;                       /* This centers the two devisions, Logo & Main Navigation  */
  justify-content: space-between;            /* Main Navigation Section */
}
  
.navbar .main-navigation ul {

  display: flex;                              /* Forces the Main Navigation to display horizontal */
                            
}


.logo {

  border: solid 2px var(--logo-border); 
  border-radius: 3px ;
  min-width: auto;                           /*  Keeps the logo the same size  */
  align-items: auto;
  margin: 5px;                       
  box-shadow: .25em .25em .25em rgb(13, 26, 1);
  background-image: url(../site-image/Logo.jpg)
  

}


.navbar ul li a {                        /* Navbar is the buttons themselvs */

  padding: 10px;
  display: block;
  font-weight: 600;
  transition: 0.5s;                      /* Not used */
  margin: 4px;
  border-radius: 5px;
  
  border: solid 1px var(--main-navigation-border);
  background-color: var(--main-navigation-background);

}


                                   /* Start of the sub Navigation */


                           /* The wrapper itself serounding the four cards */


.sub-navigation-wrapper {  
                        
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 5px;
  
  padding: 5px;
  margin-bottom: 25px;
  
  background-color: var(--sub-navigation-background);
  border: solid 2px var(--sub-navigation-border);
  border-radius: 15px;

}

                               /* The four cards */

.sub-navigation-card-left {

  background-color: var(--sub-navigation-cards-background);
  border: solid 2px var(--sub-navigation-cards-border);
  border-radius: 5px;
  text-align: center;

}

.sub-navigation-card-middle-left {

  background-color: var(--sub-navigation-cards-background);
  border: solid 2px var(--sub-navigation-cards-border);
  border-radius: 5px;
  text-align: center;

}  

.sub-navigation-card-middle-right {

  background-color: var(--sub-navigation-cards-background);
  border: solid 2px var(--sub-navigation-cards-border);
  border-radius: 5px; 
  text-align: center;

  }

.sub-navigation-card-right {

  background-color: var(--sub-navigation-cards-background);
  border: solid 2px var(--sub-navigation-cards-border);
  border-radius: 5px;
  text-align: center;

}


/* Start of Footer sub Navigation */


                           /* The wrapper itself serounding the four cards */


.sub-navigation-footer-wrapper {  
                        
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 5px;
  
  padding: 5px;
  margin-bottom: 25px;

  background-color: var(--sub-navigation-background-footer);
  border: solid 2px var(--sub-navigation-border-footer);
  border-radius: 5px;

}

                               /* The four cards */

.sub-navigation-card-footer-left {

  background-color: var(--sub-navigation-cards-background-fotter);
  border: solid 2px var(--sub-navigation-cards-border-fotter);
  border-radius: 5px;
  text-align: center;

}

.sub-navigation-card-footer-middle-left {

  background-color: var(--sub-navigation-cards-background-fotter);
  border: solid 2px var(--sub-navigation-cards-border-fotter);
  border-radius: 5px;
  text-align: center;

}  

.sub-navigation-card-footer-middle-right {

  background-color: var(--sub-navigation-cards-background-fotter);
  border: solid 2px var(--sub-navigation-cards-border-fotter);
  border-radius: 5px; 
  text-align: center;

  }

.sub-navigation-card-footer-right {

  background-color: var(--sub-navigation-cards-background-fotter);
  border: solid 2px var(--sub-navigation-cards-border-fotter);
  border-radius: 5px;
  text-align: center;

}



/* The Main content page */ 





.main-content-head {

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px; 

  margin-top: 20px;
  margin-bottom: 20px;
  padding: 13px;

  font-size: 16px;
  color: #545357;
  text-wrap: balance;
      
  border-radius: 8px;
  background-color: var(--main-content-wrapper-background);
  border: solid 2px var(--main-content-wrapper-border);

  box-shadow: .25em .25em .25em rgb(13, 26, 1);

}

.h1-main-content {

padding:15px 15px 15px 0 ;
font-size: 20px;
color: rgb(88, 88, 233);
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}

.h2-main-content {

padding:15px 15px 15px 0 ;
font-size: 18px;
color: rgb(95, 95, 170);
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}