/* establishing colour variables */
:root{
  --colour_a_light: #A7CECB;
  --colour_a_dark:  #8BA6A9;
  /* --colour_a_dark: #806968; */
  --colour_b_light: #C6C013;
  --colour_b_dark: #CACC90;
  --hover-color: #75704E;
  --darkest: #37392E;
  --palest: #f4ebbe;
  --text-light: white;
  --text-dark: black;
}
* {
  box-sizing: border-box;
}

/* Style the body */
body {
  font-family: 'Arial';
  margin: 0;
}

/* Header/logo Title */
.header {
  padding: 80px;
  text-align: center;
  background: var(--colour_a_light);
  color:  var(--text-light);
}

/* Increase the font size of the heading */
.header h1 {
  font-size: 60px;
  font-family:'Arial'
}
/* Increase the font size of the heading */
.header h2 {
  font-size: 30px;
  font-family:'Arial'
}

/* Colours for this page: #C6C013, #034732 #EF8a17 EF2917 */

/* Style the top navigation bar */
.navbar {
  overflow: hidden;
  background-color: var(--colour_a_dark);
  height: 70px;
  
}

/* Style the navigation bar links */
.navbar a {
  display: inline-block;
  color:  var(--text-light);
  text-align: center;
  text-decoration: none;
  
  
}
/* Styles the buttons within the navbar */
.button{
    /* color: white;  */
    background-color: var(--darkest);
    border-color:var(--darkest);
    height: 70px;
    padding: 0 15px;
    border-radius: 3px;
    line-height: 70px;
  }

  .navbar a:first-child.button{
    margin-left: 7px;
  }

/* Change color on hover */
.navbar a:hover {
  background-color: var(--colour_b_dark);
  /* background-color: #EF2917; */
  color: var(--text-light);

}



/* Style for text box buttons */
.red_box{
  display: inline-block;
  vertical-align: top;
  background-color:var(--palest);
  border-color: var(--palest);
  border-style: solid;
  border-radius: 5px;
  width: 250px;
  height: 200px;
  font-size: 30px;
  align-items: center;
  justify-content: center;
  /* margin-left: 7px; */
  margin-top: 5px
  
}

.red_box a{
  display:  inline-flex;
  border-color: var(--palest);
  color: var(--text-dark);
  text-decoration: none;
}

/* .red_box:hover {
  background-color: var(--hover-color);
  /* background-color: #EF2917; */
  /* color: var(--text-light); */
/* }  */




/* Style for homepage box buttons */
.red_box_home{
  display: inline-block;
  vertical-align: top;
  background-color:var(--colour_a_dark);
  border-color: var(--colour_a_dark);
  border-style: solid;
  border-radius: 5px;
  width: 250px;
  height: 110px;
  font-size: 30px;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  margin-top: 5px;
  padding: 0px,5px;
}

/* .red_box_home:hover {
  background-color: var(--hover-color);
  /* background-color: #EF2917; */
  /* color: var(--text-light); */
/* }  */
/* want to make the hovers all in one style */
.red_box_home a{
  display:  inline-flex;
  border-color: var(--colour_a_dark);
  color: var(--text-light);
  text-decoration: none;
}

.orange_box {
  display: inline-block;
  vertical-align: top;
  background-color:var(--colour_b_dark);
  border-color: var(--colour_b_dark);
  border-style: solid;
  border-radius: 5px;
  width: 250px;
  height: 200px;
  font-size: 30px;
  align-items: center;
  justify-content: center;
  margin-top: 5px

}

.orange_box a{
  display:  inline-flex;
  border-color: var(--colour_b_light);
  color: var(--text-dark);
  border-radius: 3px;
  text-decoration: none;
}

/* Style for homepage box buttons */
.orange_box_home{
  display: inline-block;
  vertical-align: top;
  background-color:var(--colour_b_dark);
  border-color: var(--colour_b_dark);
  border-style: solid;
  border-radius: 5px;
  width: 250px;
  height: 110px;
  font-size: 30px;
  align-items: center;
  justify-content: center;
  /* margin-left: 7px; */
  margin-top: 5px;
  padding: 0px,5px;
}

.orange_box_home a{
  display:  inline-flex;
  border-color: var(--colour_b_dark);
  color: var(--text-light);
  text-decoration: none;
}

/* .orange_box:hover {
  background-color: var(--hover-color);
  /* background-color: #EF2917; */
  /* color: var(--text-light); */
/* } */ 

/* .orange_box_home:hover {
  background-color: var(--hover-color);
  /* background-color: #EF2917; */
  /* color: var(--text-light); */
/* }
.orange_box_home a:hover {
  background-color: var(--hover-color);
  /* background-color: #EF2917; */
  /* color: var(--text-light); */
/* } */

.lightgreen_box {
  display: inline-block;
  vertical-align: top;
  background-color:var(--colour_a_light);
  border-color: var(--colour_a_light);
  border-style: solid;
  border-radius: 5px;
  width: 250px;
  height: 200px;
  font-size: 30px;
  align-items: center;
  justify-content: center;
  margin-top: 5px

}

.lightgreen_box a{
  display:  inline-flex;
  border-color: var(--colour_b_dark);
  color: var(--text-light);
  border-radius: 3px;
  text-decoration: none;
}

/* .lightgreen_box:hover {
  background-color: var(--hover-color);
  background-color: #EF2917;
  color: var(--text-light);
} */

.darkgreen_box {
  display: inline-block;
  vertical-align: top;
  background-color:var(--colour_a_dark);
  border-color: var(--colour_a_dark);
  border-style: solid;
  border-radius: 5px;
  width: 250px;
  height: 200px;
  font-size: 30px;
  align-items: center;
  justify-content: center;
  margin-top: 5px

}

.darkgreen_box a{
  display:  inline-flex;
  border-color: var(--hover-color);
  color: var(--text-light);
  border-radius: 3px;
  text-decoration: none;
}

/* .darkgreen_box:hover {
  background-color: var(--hover-color);
  /* background-color: #EF2917; */
  /* color: var(--text-light); */
/* }  */

.mossgreen_box {
  display: inline-block;
  vertical-align: top;
  background-color:var(--palest);
  border-color: var(--palest);
  border-style: solid;
  border-radius: 5px;
  width: 250px;
  height: 200px;
  font-size: 30px;
  align-items: center;
  justify-content: center;
  margin-top: 5px

}

.mossgreen_box a{
  display:  inline-flex;
  border-color: var(--palest);
  color: var(--text-light);
  border-radius: 3px;
  text-decoration: none;
}

/* .red_box:hover a,
.red_box_home:hover,
.orange_box:hover a,
.orange_box:hover,
.orange_box_home:hover a,
.mossgreen_box:hover a,
.lightgreen_box:hover a,
.darkgreen_box:hover a {
  background-color: var(--hover-color);
  color: var(--text-light);
} */
.red_box a,
.orange_box a,
.mossgreen_box a,
.lightgreen_box a,
.darkgreen_box a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-dark);
  text-decoration: none;
  border-radius: 5px;
}

.red_box a:hover,
.red_box_home:hover,
.orange_box a:hover,
.orange_box_home:hover,
.mossgreen_box a:hover,
.lightgreen_box a:hover,
.darkgreen_box a:hover {
  background-color: var(--hover-color);
  color: var(--text-light);
}



.mainpage{
  display: block;
  /* background-color: #f4ebbe;  */ /* would like a lighter colour but need to fix how the divs show too*/
  align-items: center;
  font-family: 'Arial';
  font-size: 20px
}

.mainpage_content{
  display: block;
  background-color: var(--text-light);
  margin: 0 auto;
  padding: 20px;
  max-width: 1400px;
  width: 100%;
  font-family: 'Arial';
  font-size: 20px;
}

  
/* /* p{text-align: center;} */
div{text-align: center;} 

p {
  /* margin-top: 150px; */
  /* margin-bottom: 100px; */
  margin: 20px auto;
  text-align: center;
  font-size: 20px
}
/* .roboto {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
} */

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
/* .side {
  -ms-flex: 30%; /* IE10 */
  /* flex: 30%; */
  /* background-color: #f1f1f1; */
  /* padding: 20px; */
/* } */ 

/* Main column */
/* .main {   
  -ms-flex: 70%; /* IE10 */
  /* flex: 70%; */
  /* background-color: white; */
  /* padding: 20px; */
/* }  */

/* Footer
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
} */

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other
@media screen and (max-width: 700px) {
  .row {   
    flex-direction: column;
  }
} */

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other
@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width: 100%;
  } */


/* have no text entered for the nav bar on purpose */



@media (max-width: 600px) {

  .header h1{
    font-size: 40px;
  }

  .header h2{
    font-size: 20px;
  }

  p{
    padding: 0 15px;
  }

}

.mainpage_content iframe {
  width: 100%;
  max-width: 1400px;
  height: 80vh;
  display: block;
  margin: 20px auto;
  border: none;
}

/* Make all images responsive */

/* .mainpage_content img {
  width: 100%;
  max-width: 800px;
  height: auto;
  display: block;
  margin: 20px auto; */
/* } */
.mainpage_content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
}