body {
	color: black;
	margin: auto;
	padding: 0px;
}

/* --- Set up site grid --- */

.grid-container {
  display: grid;
  grid-template-columns: 1fr 10fr 1fr 1fr;
  grid-template-rows: 1fr 0fr 3.6fr 0fr;
  grid-template-areas: "logo banner banner banner" "lonks lonks lonks lonks" "text-block text-block text-block lonks-2" "footer footer footer footer";
  grid-gap: 4px;
}

.logo { grid-area: logo; }

.banner { grid-area: banner; }

.lonks {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 2fr 2fr;
  grid-template-areas: "lonk-1 lonk-2 lonk-3 lonk-4 lonk-5" "lonk-1 lonk-2 lonk-3 lonk-4 lonk-5";
  grid-area: lonks;
}

.lonk-1 { grid-area: lonk-1; }

.lonk-2 { grid-area: lonk-2; }

.lonk-3 { grid-area: lonk-3; }

.lonk-4 { grid-area: lonk-4; }

.lonk-5 { grid-area: lonk-5; }

.text-block { grid-area: text-block; }

.lonks-2 {
	grid-area: lonks-2;
	text-align: left;
 }

.footer { 
grid-area: footer; 
text-align: right;
}



/* --- End of grid setup --- */


/* -000- Area styling -000- */
/* - Grid - */
.grid-container {
	
	padding: 5px;
	background-color: white;
}
.lonk-1 {
	
	padding: 10px;
	background-color: white;
}
.lonk-2 {
	
	padding: 10px;
	background-color: white;
}
.lonk-3 {
	
	padding: 10px;
	background-color: white;
}
.lonk-4 {
	
	padding: 10px;
	background-color: white;
}
.lonk-5 {
	
	padding: 10px;
	background-color: white;
}
.banner {
	
	padding: 10px;
	background-color: white;
	height: 150px;

}

.logo {
	
	padding: 0px;
	background-color: white;
	height: 150px;
	width: 250px;
	
}

.text-block {
	
	padding: 10px;
	height: 550px;
}

.lonks-2 {
	
	padding: 10px;
	background-color: white;
	
}

.footer {
	
	padding: 10px;
	background-color: white;
}

.rainbow {
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}


/*  Area colouring... */
.logo {
	background-color: #ffe6ff; /* light pink */
	font-family: 'Chewy', cursive;
}

.banner {
	background-color: #ccffff; /* light blue */
	font-family: 'Chewy', cursive;
}

.lonk-1 {
	background-color: #ccffff; /* light blue */
}
.lonk-2 {
	background-color: #ffe6ff; /* light pink */
}
.lonk-3 {
	background-color: #f7f7f7; /* light white */
}
.lonk-4 {
	background-color: #ffe6ff; /* light pink */
}
.lonk-5 {
	background-color: #ccffff; /* light blue */
}

.lonks {
	background-color: #fffaff;
	font-family: 'Chewy', cursive;
}

.grid-container {
	background-image: linear-gradient(#ff879d, #ff8cf9, #ffd4fd);
}

.text-block {
  background-image: linear-gradient(#ccffff, #f7f7f7, #ffcfff);
  	font-family: 'Chewy', cursive;
}

.lonks-2 {
  background-image: linear-gradient(#ccffff, #f7f7f7, #ffcfff);
  font-family: 'Chewy', cursive;
}

.footer {
  background-color: #ccffff; /* light blue */
  font-family: 'Chewy', cursive;
}

/* -000- End of area styling -000- */

/* -000- Slideshow Set-up -000- */
* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: absolute;
  margin: auto;
}

/* Hide the images by default */


/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  top: 30%;
  width: auto;
  margin-top: 22px;
  padding: 16px;
  color: lightblue;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 10px 10px 10px 10px;
  position: absolute;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 10px 10px 10px 10px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: black;
  font-size: 15px;
  padding: 12px 12px;
  position: absolute;
  bottom: -150px;
  width: 220%;
  text-align: left;
}

/* Number text (1/3 etc) */
.numbertext {
  color: black;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: pink;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: lightblue;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1s;
  animation-name: fade;
  animation-duration: 1s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* -000- End of Slideshow Setup -000- */