/*code adapted from w3schools, 2023*/

/* the appearance of everything in the body tag having a border-box with the margin being set to 0 so there is 
no gapping with the font being Verdana or sans-serif with a gradient going from amber down to a pale yellow */
* {box-sizing: border-box;}
body {
    margin: 0;
    font-family: Verdana, sans-serif;
    background-image: linear-gradient(#d26f31, #ddcba1)
    
}

/* the appearance of everything in the h1 tag being set to a font size of 35 and being center aligned */
h1{
    font-size: 35px;
    text-align: center;
}

/* the display of the content in the mySlides being set to none */
.mySlides {
  display: none;
}

/* images being automatically set to align to middle with a width of 100% */
img {
  vertical-align: middle;
  width:100%
}


/* Slideshow container having a max width of 100% and the position is being flexible with the margin being set as auto */
.slideshow-container {
  max-width: 100%;
  position: flex;
  margin: auto;
}

/* Slideshow container img properties with a height of 600px and the padding at the top set to 0 so there is no gapping*/
.slideshow-container img{
height: 600px;
padding-top: 0%;
}

/* the dots are align to the center*/
.dot_container{
    text-align:center
}
/* The dots appearance*/
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/*colour of the dot and the link in the nav bar being active which is set to blue*/
.active {
  background-color: #413aac;
}

/* Fading animation with the name function fade with the duration of 1.5 seconds*/
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

/* how the fade looks in transition with it staring from 0.4 to it full opacity at 1*/
@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
/*end of adapted code*/
/*the name of the website having a font size of 1.5 rem with a margin of 1px*/
.brand-title {
    font-size: 1.5rem;
    margin: 1px;
}

/*code adapted from w3schools, 2023*/   
/* nav bar being created having the overflow hidden where the display can be flexible with 
the content being spaced evenly with the space-between function. The content are aligned
in the center with the background of dark blue whilst the text is white */
.navbar {
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(29, 9, 88);
    color: white;
}

/* the nav bar links in the ul property having 0 margins and paddings with a flexible display */
.navbar-links ul {
    margin: 0;
    padding: 0;
    display: flex;
}

/* the nav bar links in the li having the list-style set as none*/
.navbar-links li {
    list-style: none;
}

/* nav bar links in the li a property with no text-decoration, the colour being set as white with the padding set to 
1 rem and being displayed as a block */
.navbar-links li a {
    text-decoration: none;
    color: white;
    padding: 1rem;
    display: block;
}

/* the action of what happens when the user hovers there mouse over the link being set as blue*/
.navbar-links li:hover {
    background-color: rgb(0, 89, 255);
}
/*end of adapted code*/

/*the section class manages the content placed within it. the display and the items are flexable and 
the content is displayed evenly. The width is 85% of the screen with the margin being 1% with the 
right and left being automatic. This class will also have a linear gradient of where the dark 
colours are the bottom with the lighter colour*/
.section{
    display: flex;
    justify-content: space-between;
    align-items: flex;
    width: 85%;
    margin: 1%;
    margin-left: auto;
    margin-right: auto;
    background-image: linear-gradient( #ddcba1,#ffe8d7, #ddcba1)
}

/* image placement in the content holder being set to a height of 250px, width of 270px and the padding of 0.5%*/
.section img{
    height: 250px;
    width: 270px;
    padding: 0.5%;
    
}

/* the content in the paragraph being set to a font size of 26px with the position being flexible and the margin on the left being set to 
10px to set it aside a bit */
.section p{
    font-size: 26px;
    position: flex;
    margin-left: 10px;
}

/*the section class manages the content placed within it. the display and the items are flexable and 
the content is displayed evenly. The width is 85% of the screen with the margin being 1% with the 
right and left being automatic.*/
.container{
    display: flex;
    justify-content: space-between;
    align-items: flex;
    width: 85%;
    margin: 1%;
    margin-left: auto;
    margin-right: auto;
}

/* the image being set to  a height of 550 px, width of 100% which takes up the whole length and the position being flexible */
.container img{
    height: 550px;
    width: 100%;
    position: flex;
}

/* container of the info boxes class where the margin is set to 50px and the max posible width is 1200px and the minimum height
 being set to 250px*/
  .info_section{
    margin: 50px ;
    max-width: 1200px; 
    min-height: 250px;
  }

  /* the appearance of the info boxes being set to 33% as there will be 3 boxes with the min-height of 250px where they will float the left
  next to each other and the content will align to the center */
  .info_box{
    width: 33%;
    min-height: 250px;
    float: left;
    text-align: center;
  }

 /*the appearance of an image in the info_box class being set to a max height of 250px*/ 
  .info_box img{
    max-height: 250px;
  }

  /*the background colour of the individual boxes*/
  .info_box:nth-child(1){background-color: rgb(68, 56, 143);}
  .info_box:nth-child(2){background-color: rgb(255, 124, 42);}
  .info_box:nth-child(3){background-color: rgb(87, 87, 87);}

  /* the container to hold the quiz_boxes having a margin of 30px with a max-width of 1500px and a min height of 150px whilst setting the
  background to linear gradient of where the dark colours are the bottom with the lighter colour in the middle*/
 .quiz_area{
    margin: 30px;
    max-width: 2000px; 
    min-height: 150px;
    background-image: linear-gradient( #ddcba1,#ffe8d7, #ddcba1);
 }
  /*the boxes to hold the quiz questions with a with of 25% and a min-height of 60px where the content floats left next to each other and the 
  content aligns to the center*/
 .quiz_box{
    width: 25%;
    min-height: 60px;
    float: left;
    text-align: center;
    
 }
 /*the appearance of the paragraph tag in the quiz box where the font size is set to 20 px with the position being flexible and the margin on 
 the left being 10px*/
 .quiz_box p{
    font-size: 20px;
    position: flex;
    margin-left: 10px;
 }

 /* the appearance of the submit area*/
 .submit{
    padding: 20PX;
    margin: 50px auto;
    max-width: 125px; 
    min-height: 40px;
    text-align: center;
    background-image: linear-gradient( #ddcba1,#ffe8d7, #ddcba1)
 }

 /*code adapted from w3schools, 2023*/

 /*the footer will have left set to 0 as well as the bottom with the width being the width of the full screen as 
 it is set to 100% with the padding of the top and bottom being set to 3px with a background colour of a dark blue
 and the text colour being set to white and being align to center*/
 .footer {
    left: 0;
    bottom: 0;
    width: 100%;
    padding-bottom: 3px;
    padding-top: 3px;
    background-color: rgb(29, 9, 88);
    color: white;
    text-align: center;
    
  }
  /*end of adapted code*/

 /*W3schools. (2019). CSS Navigation Bar. W3schools.com. https://www.w3schools.com/css/css_navbar.asp*/
 /*W3Schools. (2019). How to Create a Slideshow. W3schools.com. https://www.w3schools.com/howto/howto_js_slideshow.asp
 /*How To Create a Fixed Footer. (2019). W3schools.com. https://www.w3schools.com/howto/howto_css_fixed_footer.asp*/