* {
  margin: 0;
  padding: 0;
  font-family: "Nunito Sans", sans-serif;
  color: white;
}

html{
  background-color: darkslategray;
}
body {
  display:flex;
  flex-direction: column;
  height: 100vh;
}

a {
  text-decoration: none;
}
.banner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 25vw;
  background-color: white;
}

.banner > img {
  height: 80%
}

.content {
  display: flex;
  flex-grow: 1;
  background-image: url("images/cubs_in_forest.jpg");
  background-size: cover;
  justify-content: center;
  align-items: center;
  min-height: 440px;
}

.text-box {
  display: flex;
  flex-flow: column;
  justify-content: space-evenly;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.6);
  width: 95%;
  height: 95%;
}

.text-box > h2 {
  font-weight: 700;
  font-size: 4.5vh;
  line-height: 5vh;
  width: 90%;
}

.text-box > p {
  font-size: 2vh;
  width: 90%;
}

.join {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #7413dc;
  width: 90%;
  height: 10%;
  font-size: 6vw;
  font-weight: 800;
}

.sections_tab{
  display: none;
}

.sections {
  display: flex;
  flex-flow: wrap;
  width: 100%;
  font-weight:750;
  font-size:6vw;
}

.beavers {
  flex: 0 0 50%;
  display:flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  height: 25vw;

  background-color: #006ee0;
}

.beavers > img {
  width: 85%;
}

.cubs {
  flex: 0 0 50%;
  height: 25vw;
  display:flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  background-color: #23a956;
}

.cubs > img {
  width: 65%;
}

.scouts {
  flex: 0 0 50%;
  height: 25vw;
  display:flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  background-color: #003a44;
}

.scouts > img {
  width: 85%;
}

.explorers {
  flex: 0 0 50%;
  height: 25vw;
  display:flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;

  background-color: #003982;
}

.explorers > p {
  padding-top: 12px;
}

.explorers > img {
  width: 90%;
}

.footer {
  background-color: #7413dc;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 15vw;
  width: 100%;

}

.email {
  padding-top: 10px;
  height: 80%
}

.email > img{

  height: 80%;
}


.facebook {
  padding-top: 10px;
  height: 80%
}

.facebook > img{

  height: 80%;
}

/* MediaQueries for Mobile Phones */

@media screen and (321px < width < 425px){
  .text-box {
    width: 93%;
    height: 96%;
  }

  .text-box > h2 {
    font-size: 4.5vh;
    line-height: 5vh;
    }
  
  .text-box > p {
    font-size: 2vh;

  }
  
  .join {
    height: 9%;
  }

}

@media screen and (width <= 320px){

  .text-box {
    width: 94%;
    height: 97%;
  }

  .text-box > h2 {
  font-size: 4vh;
  line-height: 4.5vh;
  }

  .text-box > p {
    font-size: 1.7vh;
  }

  .join {
    height: 9%;
  }
} 

@media screen and (height < 726px){

  .text-box > h2 {
  font-size: 5vh;
  line-height: 5.5vh;
  }

  .text-box > p {
    font-size: 2.5vh;
  }

  .join {
    height: 9%;
  }
}

@media screen and (height < 550px){

  .text-box > h2 {
  font-size: 7vh;
  line-height: 7.5vh;
  }

  .text-box > p {
    font-size: 3vh;
  }

  .join {
    height: 8%;
  }
}

@media screen and (height < 550px) and (orientation: landscape) {

  .text-box > h2 {
  font-size: 10vh;
  line-height: 11.5vh;
  }

  .text-box > p {
    font-size: 5.5vh;
  }

  .join {
    height: 11%;
  }
}

@media screen and (height <= 420px) and (orientation: landscape) {
  
  .banner {
    height: 15vh;
    justify-content: flex-start;
  }

  .banner > img {
    padding-left: 18px;
  }

  .text-box > h2 {
  font-size: 6vh;
  line-height: 9.5vh;
  }

  .text-box > p {
    font-size: 4vh;
  }

  .join {
    height: 11%;
    width: 50%;
  }

  .join > a {
    font-size: 5vh;
  }
}

@media screen and (height <= 420px) and (width < 760px) and (orientation: landscape) {

  .banner {
    height: 18vh;
  }

  .content{
    flex-wrap: wrap;
    min-height: 310px ;
  }

  .text-box {
    height: 70%;
    width: 70%;
  }

  .text-box > h2 {
  font-size: 6vh;
  line-height: 7.5vh;
  }

  .text-box > p {
    font-size: 4vh;
  }

  .join {
    height: 15%;
    width: 60%;
    font-size: 4vh;
  }

  .sections {
    display: none;
  }
  
  .sections_tab {
    display: flex;
    flex-flow: wrap;
    width: 100%;
    font-weight: 750;
    font-size: 2vw;
    justify-content: center;
  }

  .beavers {
    flex: 0 0 20%;
    height: 11vw;
  }
  .cubs {
    flex: 0 0 20%;
    height: 11vw;
  }
  .scouts {
    flex: 0 0 20%;
    height: 11vw;
  }
  .explorers {
    flex: 0 0 20%;
    height: 11vw;
  }

  .footer {
    height: 7vw;
  }
}

@media screen and (width >= 768px){
  .banner {
    display: flex;
    justify-content: flex-start;
    height: 10vh;
  }
  
  .banner > img {
    height: 80%;
    padding-left: 18px;
  }

  .content{
    flex-wrap: wrap;
  }

  .text-box{
    height: 60%;
    width: 70%;
  }

  .join{
    width: 70%;
    font-size: 3vh;
  }

  .sections{
    display: none;
  }
  
  .sections_tab {
    display: flex;
    flex-flow: wrap;
    width: 100%;
    font-weight:750;
    font-size:3vw;
  }

  .beavers {
    flex: 0 0 25%;
    height: 14vw;
  }

  .cubs {
    flex: 0 0 25%;
    display: flex;
    height: 14vw;
  }

  .scouts {
    flex: 0 0 25%;
    display: flex;
    height: 14vw;
  }

  .explorers {
    flex: 0 0 25%;
    display: flex;
    height: 14vw;
  }

  .explorers > p {
    padding-top: 12px;
  }

  .footer {
    height: 9vw;
  }
}

@media screen and (width > 768px) and (height < 460px){
  .banner {
    height: 15vh;
  }
}

@media screen and (width >= 768px) and (orientation: landscape){
  
  .sections_tab{
    font-size: 2vw;
    justify-content: center;
  }
  
  .beavers {
    flex: 0 0 20%;
    height: 11vw;
  }
  .cubs {
    flex: 0 0 20%;
    height: 11vw;
  }
  .scouts {
    flex: 0 0 20%;
    height: 11vw;
  }
  .explorers {
    flex: 0 0 20%;
    height: 11vw;
  }

  .footer {
    height: 6vw;
  }
}

@media screen and (height < 550px) and (width > 800px ) and (orientation: landscape) {
  .text-box > h2 {
    font-size: 7vh;
    line-height: 8.5vh;
  }

  .text-box > p {
    font-size: 3.5vh;
  }
  .join {
    height: 15%;
    font-size: 4vh;
  }
}

@media screen and (width > 1000px){
  body {
    max-width: 80%;
    margin-left:auto;
    margin-right:auto;
  }

  .text-box > p {
    font-size: 2.6vh;
  }

  .sections_tab{
    font-size: 1.6vw;
  }

  .beavers{
    height: 9vw;
  }

  .cubs{
    height: 9vw;
  }

  .scouts{
    height: 9vw;
  }

  .explorers{
    height: 9vw;
  }

  .footer{
    height: 4vw;
  }
}

@media screen and (width > 1440px){
  body {
    max-width: 70%;
    margin-left:auto;
    margin-right:auto;
  }

  .beavers{
    height: 8vw;
  }

  .cubs{
    height: 8vw;
  }

  .scouts{
    height: 8vw;
  }

  .explorers{
    height: 8vw;
  }

}