.banner { grid-area: banner; background-color: #78553b;font-size:5vw; padding:60px; border: 8px solid #403762; text-align:center; font-family: 'Trebuchet MS', sans-serif; position: relative;text-align: center; color: white;} 
.nav { grid-area: nav;; border: 8px solid #403762; padding:0px;}
.body { grid-area: body; font-family: 'Trebuchet MS', sans-serif; background-color:#36577d ; border: 8px solid #263e59; text-align:left;font-size: 25px; padding: 15px;font-size:1vw;}
.footer {grid-area: footer; background-color: black; color:white;font-size: 30px; background-color:#36577d ; border: 8px solid #263e59; padding: 30px; font-size: 2vh;}
 /*The Grid container is used to edit the layout of the website */
.grid-container{
  display: grid;
  grid-template-areas:
    'banner banner'
	'nav nav'
    'body body'
    'footer footer'; 
  grid-gap: 10px;
  background-color: white;
  height:220vh;
  grid-template-rows: 40% 10% 80% 20px;
}
.grid-container{
  display: grid;
  grid-template-areas:
    'bodyinner bodyinner'
	'bodyimg bodyimg'; 
  grid-gap: 10px;
  grid-template-columns: 50% 50%;
}
/*Btn group is used for the navigation bar, it is used to change the spacing of the buttons and the colour.*/
.btn-group button {
  background-color: #615393;
  border: 1px solid #615393;
  color: white; 
  padding: 20px 24px; 
  cursor: pointer; 
  float: left; 
  width: 12.5%;
  font-size:1vw;
}

.btn-group button:not(:last-child) {
  border-right: none;
}

.btn-group:after {
  content: "";
  clear: both;
  display: table;
}
/*Used to change the colour of the buttons in the nav bar that have the mouse over them.*/
.btn-group button:hover {
  background-color: #403762;
}
/*The grad is used to set the colours of the main gradient used for the banner*/
#grad {
  background-image: linear-gradient(#2b5876, #4e4376);
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/*The box classes are used to define the position and size of the boxes found in the body of the main page*/
.Box1{
  background-color: #aaf0d1;
  width: 25%;
  height: 500px;
  position: absolute;
  left: 37.5%;
  top: 60%;
  padding: 20px;
}
.Box2{
  background-color: #263e59;
  width: 25%;
  height: 500px;
  position:absolute;
  left: 65%;
  top: 66.8%;
  padding: 20px;
}
* {
  box-sizing: border-box;
}

/* Creates three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  height: 300px; 
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
.bodyinner { 
	font-family: 'Trebuchet MS', sans-serif; 
	background-color:#36577d ; 
	border: 8px solid #263e59; 
	text-align:center;
	font-size: 25px; 
	padding: 15px;
	font-size:1vw;
	height:80%;
	width:50%;
	}
.bodyimg { 
	font-family: 'Trebuchet MS', sans-serif; 
	background-color:#36577d ; 
	border: 8px solid #263e59; 
	text-align:center;
	font-size: 25px; 
	padding: 15px;
	font-size:1vw;
	height:80%;
	width:50%;
	}
	
/* Container holding the image and the text */
.container {
  position: relative;

}

/* Bottom right text */
.text-block {
  position: absolute;
  bottom: 20px;
  top:10%;
  bottom:10%;
  right: 25%;
  left: 25%;
  height: fit-content;
  background-color: black;
  opacity: 0.8;
  color: white;
  padding-left: 1%;
  padding-right: 1%;
  padding-top: 1%;
  padding-bottom: 1%;
  font-size:2vmin;
}
.text-blockAF {
  position: absolute;
  bottom: 20px;
  top:0%;
  bottom:10%;
  right: 55%;
  left: 5%;
  height: fit-content;
  background-color: black;
  opacity: 0.8;
  color: white;
  padding-left: 1%;
  padding-right: 1%;
  padding-top: 1%;
  padding-bottom: 1%;
  font-size:2vmin;
}
.text-blockAN {
  position: absolute;
  bottom: 20px;
  top:0%;
  bottom:10%;
  right: 5%;
  left: 55%;
  height: fit-content;
  background-color: black;
  opacity: 0.8;
  color: white;
  padding-left: 1%;
  padding-right: 1%;
  padding-top: 1%;
  padding-bottom: 1%;
  font-size:2vmin;
}
.text-blockAS {
  position: absolute;
  bottom: 20px;
  top:25%;
  bottom:10%;
  right: 55%;
  left: 5%;
  height: fit-content;
  background-color: black;
  opacity: 0.8;
  color: white;
  padding-left: 1%;
  padding-right: 1%;
  padding-top: 1%;
  padding-bottom: 1%;
  font-size:2vmin;
}
.text-blockEU {
  position: absolute;
  bottom: 20px;
  top:25%;
  bottom:10%;
  right: 5%;
  left: 55%;
  height: fit-content;
  background-color: black;
  opacity: 0.8;
  color: white;
  padding-left: 1%;
  padding-right: 1%;
  padding-top: 1%;
  padding-bottom: 1%;
  font-size:2vmin;
}
.text-blockNA {
  position: absolute;
  bottom: 20px;
  top:50%;
  bottom:10%;
  right: 55%;
  left: 5%;
  height: fit-content;
  background-color: black;
  opacity: 0.8;
  color: white;
  padding-left: 1%;
  padding-right: 1%;
  padding-top: 1%;
  padding-bottom: 1%;
  font-size:2vmin;
}
.text-blockSA {
  position: absolute;
  bottom: 20px;
  top:50%;
  bottom:10%;
  right: 5%;
  left: 55%;
  height: fit-content;
  background-color: black;
  opacity: 0.8;
  color: white;
  padding-left: 1%;
  padding-right: 1%;
  padding-top: 1%;
  padding-bottom: 1%;
  font-size:2vmin;
}
.text-blockOCE {
  position: absolute;
  bottom: 20px;
  top:77%;
  bottom:10%;
  right: 30%;
  left: 30%;
  height: fit-content;
  background-color: black;
  opacity: 0.8;
  color: white;
  padding-left: 1%;
  padding-right: 1%;
  padding-top: 1%;
  padding-bottom: 1%;
  font-size:2vmin;
}
.facts {
	padding-left: 20%;
	padding-right: 20%;
	text-align: center;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
.button {
  background-color: #403762;
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
}

.buttonround {border-radius: 8px;}
.buttonround2 {border-radius: 25px;}
.buttonround3 {border-radius: 15px;}
.button1 {
  background-color: #403762; 
  color: white; 
  border: 2px solid #403762;
}

.button1:hover {
  background-color: #7a6cac;
  color: white;
  border: 2px solid #403762;
}

.grid-container2{
  display: grid;
  grid-template-areas:
    'text-blockAF text-blockAN'
	'text-blockAS text-blockEU'
	'text-blockNA text-blockSA'
	'text-blockOCE text-blockOCE'; 
  grid-gap: 10px;
  grid-template-columns: 30% 30%;
  grid-template-rows: 25% 25% 25% 25%
}
.fa-youtube {
  color: white;
}
.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}