/*All*********************************************************************/

  .container-xl{
    background-image: linear-gradient(#23bdd4,#51dbf1);
    border-radius: 30px;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.711);
    margin-bottom: 100px;
   
    padding-top: 10px;
    
  }

  .genericButton{
    cursor: pointer;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ec8210;
    border-radius: 20px;
    height: 58px;
    color: white;
    font-size: 20px;
    box-shadow: 2px 2px 1px 1px rgba(0, 0, 0, 0.503);
      text-decoration: none;
      text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.633); 
      margin-right: 10px;
      margin-left: 10px;
      margin-bottom: 10px;
  }

      .genericButton:link { color: white;}
      .genericButton:visited { color: white;  }
      .genericButton:active { color: white; }
      .genericButton:hover { color:white; }

    /*Fonts*/
    @font-face {
        font-family: "Bubble";
        src: url("Fonts/BubbleFont.ttf");
    }


    html{
     overflow-x: hidden;
     
    }

    body{
   max-width: 100%;
   overflow-x: hidden;
   font-family: 'Bubble';
 
 
    }

    a{
        text-decoration: none;
    }


 


 /*Nav Bar Mobile******************************************************************/

 .navbar-brand{
  max-width: 30vw;
 }
 .logoImage{
  max-width: 100%;
  height: auto;
 }
 .myCustomToggleIcon{
      display: block;
      width: 40px;
      height:40px;
      background-image: url("SVGs/menu-svgrepo-com.svg");
      background-size:cover;
 }

 /*Removing the foxus shadow and border from the toggle icon*/
 .navbar-toggler:focus, 
 .navbar-toggler:active,
 .navbar-toggler-icon:focus {
  box-shadow: none;
  outline: none;
  }

  .navbar-toggler{
      border: none;
   
  }

 #navRow{
  background-image: linear-gradient(90deg, #0f94b8,#33bce1);
    width: 98%;
    margin: 0 auto;
    border-radius: 30px;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.61);
    margin-top: 10px;
    margin-bottom: 50px;
 }

 #linkOne{
  background-color: #ec2a10;
 }

 #linkTwo{
  background-color:#fd9503;
 }

 #linkThree{
  background-color: #fad904;
 }

 #linkFour{
  background-color: #02ea48;
 }

 #linkFive{
  background-color: #04f7ef;
 }

 /*Expanding nav section mobile css*/

 #navbarLinksList{
  display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 78vh;

 }

 .navLink{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: chartreuse;
    border-radius: 20px;
    box-shadow: 2px 2px 1px 1px rgba(0, 0, 0, 0.503);
    text-decoration: none;
    text-shadow: 1px 1px 1px rgb(0, 0, 0);
    font-size: 18px;
    height: 80px;
    width: 100%;
    margin: 0 auto; 
 }

 .navLink:link { color: white;}
 .navLink:visited { color: white;  }
 .navLink:active { color: white; }
 .navLink:hover { color:#ffffff; }

 .nav-item{
    display: inline-block;
    margin-top: 20px;
    margin-right: 5px;
    margin-left: 5px;
    width: 80%;
    
 }



 /*Footer Mobile******************************************************************/
    
 #footerRow{
    background-color: white;
    border: 3px solid black;
    border-radius: 30px;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.93);
    margin-top: 100px;

  }

  #footerLogoCol{
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;

}

.footerLogo{
  width: 60%;
  max-width: 200px;
}

#footerLinksCol{
  padding: 0;
  
}

.footerLinksList{
  margin-left: -30px;
  list-style: none;
  text-align: center;
}

.footerLink{
  color: black;
  text-decoration: none;
}

.footerLink:visited { color: rgb(0, 0, 0);  }
.footerLink:active { color: rgb(0, 0, 0); }
.footerLink:hover { color:#000000; }

.footer-item{
 
  width: 80%;
  margin: 0 auto;
  margin-top: 20px;
}

#footerSocialMediaCol{
  margin-top: 20px;
  text-align: center;
  margin-bottom: 20px;
}

.socialMediaWrapper{
  display: inline-block;
  margin-right: 5px;
  margin-left: 5px;
}

.socialMediaIcon{
  width: 70px;
  height: 70px;
}


.footerPara{
  /*Note: Donate text hidden*/
  display: none;
  width: 90%;
  margin: 0 auto;
  text-align: center;
  font-size: 18px;
  margin-top: 20px;
  margin-bottom: 20px;
}

#topPara{

  display: block;
}

#bottomPara{
  display: block;
}

.donateContainer{
  /*Note: Hidden until activated*/ 
  display: flex;
 visibility: hidden;
 
  width: 80%;
  margin: 0 auto;
 
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

#footerTextBottomCol{
  /*Note: Position set to relative until donate button added:*/
  position: relative;
  top: -80px;


  border: 2px solid black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 20px;
  padding-top: 20px;
  width: 80%;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: 2px 2px 1px 1px rgb(0, 0, 0);
  border-radius: 30px;
}

.learnMoreButton{
  width: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ec8210;
  border-radius: 20px;
  height: 70px;
  color: white;
  font-size: 20px;
  box-shadow: 2px 2px 1px 1px rgba(0, 0, 0, 0.503);
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.633);
}

.learnMoreButton:visited { color: rgb(255, 255, 255);  }
.learnMoreButton:active { color: rgb(255, 255, 255); }
.learnMoreButton:hover { color:#ffffff; cursor: pointer; }



#footerCopyrightsCol{
  margin-top: 30px;
  margin-bottom: 100px;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;

}




@media screen and (min-width:768px) { /*Medium */

    /*Nav Bar Medium ******************************************************************/

   #navbarLinksList{
     display: flex;
     align-items: center;
     justify-content: center;
     height: 82vh;
  }

  .nav-item{
   width: 50%;
  }

  .navLink{
   width: 100%;
  }

  .navbar-brand{
     display: flex;
     align-items: center;
     justify-content: center; 
  }



  }

 @media screen and (min-width:992px) { /*Large*/

  

   /*Nav Bar Large ******************************************************************/

   #navbarLinksList{
    height: auto;
    min-height: 0;
    }
    
    .nav-item{
    margin-top: 0%;
    width: 140px;
    
    }
    
 

  

  .footer-item{
  
 
  margin-top: 20px;
  font-size: 20px;
}



  .footerPara{
   width: 90%;
   margin: 0 auto;
   text-align: left;
   font-size: 20px;
   margin-top: 20px;
   margin-bottom: 20px;
 }

 #bottomPara{
   text-align: center;
   font-size: 24px;
   margin-bottom: 30px;
  

 }

 #topPara{
  margin-top: 50px;

 }

 #footerSocialMediaCol{
   margin-top: 50px;
 }

 .donateContainer{
   width: 80%;
   
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 15px;
   margin-bottom: 15px;
 }

 #footerCopyrightsCol{
   margin-top: 30px;
   margin-bottom: 30px;
   text-align: center;

 }



 }
 
 @media screen and (min-width:1200px) { /*x-Large*/

   /*Nav Bar XL ******************************************************************/

   .nav-item{
     width: 170px;

  }


  
 }

 @media screen and (min-width:1400px) { /*xx-Large*/
   /*Nav Bar XXL ******************************************************************/
   .nav-item{
     width: 200px;

  }
 }


 /*No Load error message:****************/

 .noload-wrapper{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-image: linear-gradient(45deg, #0f94b8,#33bce1);
    border-radius: 30px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    padding: 10px;
 }
 .noload-text-one{
  text-align: center;
  font-family: 'Bubble';
  font-size: 30px;
  margin-bottom: 20px;
 }
 .noload-text-two{
  text-align: center;
  font-family: 'Bubble';
  font-size: 20px;
  margin-bottom: 20px;
 }
 .noload-reasons{
  font-family: 'Bubble';
  margin-bottom: 16px;
  font-size: 18px;
 }
 .noload-text-three{
  text-align: center;
  font-family: 'Bubble';
  margin-bottom: 10px;
  font-size: 22px;
 }

 .noload-text-four{
  text-align: center;
  font-family: 'Bubble';
  margin-bottom: 20px;
  font-size: 22px;
 }

 .no-load-text-wrapper{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 600px;
  
 }



 /*Loading screen and Animation***************************/
#loader-wrapper {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-image: linear-gradient(45deg, #0f94b8,#33bce1);
    border-radius: 30px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: loadScreenTimeout 1000s ease 1;
    animation-fill-mode: forwards;
    
  }
  .loader {
    display: inline-block;
    overflow: hidden;
    width: 150px;
    height: 150px;
    position: relative;
    border: 8px solid rgb(255, 255, 255);
    animation: loader 2s infinite ease;
  }
  .loader-inner {
    vertical-align: top;
    padding-top: 70px;
    display: inline-block;
    width: 100%;
    height:100%;
    background-color: rgb(31, 207, 238);
    animation: colorShiftLoader 2s infinite ease-in;
  }
  .loader-text {
    position: relative;
    left: 2px;
    top: -96px;
    display: block;
    text-align: center;
    margin: 0 auto;
    justify-content: center;
    font-family: 'PlanesValmore', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 30px;
    color: white;
  
  }
  @keyframes loader {
    0% { transform: rotate(0deg); border-radius: 0%;}
    25% { transform: rotate(180deg);border-radius: 25%;}
    50% { transform: rotate(180deg);border-radius: 50%;}
    75% { transform: rotate(360deg);border-radius: 25%;}
    100% { transform: rotate(360deg);border-radius: 0%;}
  }
  @keyframes colorShiftLoader {
    0% {   background-color: rgb(238, 172, 31); height: 0%;}
    25% {  background-color: rgb(231, 211, 31);height: 0%;}
    50% {  background-color: rgb(31, 207, 238);height: 100%;}
    75% {  background-color: rgb(31, 238, 110); height: 100%;}
    100% { background-color: rgb(31, 207, 238); height: 0%;}
  }
  
  @keyframes loadScreenTimeout {
    0%{height:100vh; width: 100vw; }
    98%{height:100vh; width:100vw}
    99%{height:100vh; width:100vw}
    100%{height: 0vh; width: 0;}
  }