/* Import Google Font - Poppins */
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');


body{
  background-color:rgb(255, 255, 255);
  font: 1rem/1.5 var(--bs-font-sans-serif);
   }
a {
        text-decoration: none;
  }

body::before {
  font-family: myFont, Arial, sans-serif;
}



@font-face {
  font-family: myFont;
  src: url('/Frijole/Frijole-Regular.ttf');
}

h1 {
  
  font-weight: bold;
  color: #040404;
  text-shadow: 2px 2px #333;
  margin-bottom: 1rem;
  font-family: myFont, 'Courier New', Courier, monospace;

}

p {
  font-size: 2rem;
  color: #040404;
  text-shadow: 2px 2px #333;
  margin-bottom: 2rem;
}

button {
  background-color: #333;
  color: #fff;
  font-size: 2rem;
  padding: 1rem 2rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

ul {
  list-style:none;
  
}

li {
  font-size: 1.2rem;
  
}



.img {
   content-visibility: auto;
 }


 /*Trial code for social links*/
 .social-links a {
  transition: color 0.3s ease;
  font-size: 1.5rem;
}
.social-links a:hover {
  font-size: 1.6rem;
}


.bi-facebook {
  color: #3b5998;
  
}

.bi-instagram {
  color:  #E1306C;
}

.fa-line  {
  color: #00B900;
}

 /* End Trial code for social links*/
 

 .dropdown-menu {
  transition: opacity 0.3s ease, transform 0.3s ease;
}


.change-black {
color: rgb(221, 219, 221);
}
.change-black:hover {
  color: rgb(8, 8, 8);
}

 a:hover {
  color: rgb(28, 151, 34);
  border-bottom: 2px solid rgb(28, 151, 34);;
  background-color: transparent;
}

#rocket {
  position: absolute;
  bottom: 5px;
  left: 20%;
  animation: fly 5s ease-in-out,  delay-animation 20s linear infinite;
  animation-delay: 6s;
  animation-iteration-count:infinite;
  opacity: 0;
}

@keyframes fly { 
 
  0% { opacity: 1; left: 20%;  bottom: 5px; transform: rotate( 0deg );}
  5% { transform: rotate( 15deg );}
  35% {left: 60%; bottom: 30%;}
  40% {transform: rotate( -30deg );}
  60% {left: 20%; bottom: 55%;}
  65% {transform: rotate( 15deg );}
  99.99% {opacity: 1;}
  100% {left: 70%;  bottom: 120%;} 
  }
 
  @keyframes delay-animation {
      0% {
        opacity: 1;
      }
     25% {
        opacity: 1;
      }
      25.01% {
        opacity: 0;
      }
      100% {
        opacity: 0;
      }
    }

   

.glow-on-hover {
  width: 220px;
  height: 50px;
  border: none;
  outline: none;
  color: #fff;
  background: #111111;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
}

.glow-on-hover:before {
  content: '';
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  position: absolute;
  top: -2px;
  left:-2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity .3s ease-in-out;
  border-radius: 10px;
}

.glow-on-hover:active {
  color: #000
}

.glow-on-hover:active:after {
  background: transparent;
}

.glow-on-hover:hover:before {
  opacity: 1;
}

.glow-on-hover:after {
  z-index: -1;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
  left: 0;
  top: 0;
  border-radius: 10px;
}

/* H1 glow*/

.glow-on-hoverh1 {
  border: none;
  outline: none;
  color: #fff;
  background: #0d0000;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
}

.glow-on-hoverh1:before {
  content: '';
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  position: absolute;
  top: -2px;
  left:-2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity .3s ease-in-out;
 
}

.glow-on-hoverh1:active {
  color: #cdc4c4
}

.glow-on-hoverh1:active:after {
  background: transparent;
}

.glow-on-hoverh1:hover:before {
  opacity: 1;
}

.glow-on-hoverh1:after {
  z-index: -1;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fafafa;
  left: 0;
  top: 0;
  border-radius: 10px;
}



.glow-on-hoverh12 {
  font-size: 15px;
  cursor: pointer;
  border: none;
  outline: none;
  color: #fff;
  background: #111;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 6px;
}

.glow-on-hoverh12:before {
  content: '';
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  position: absolute;
  top: -2px;
  left:-2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity .3s ease-in-out;
  border-radius: 10px;
}

.glow-on-hoverh12:active {
  color: #000
}

.glow-on-hoverh12:active:after {
  background: transparent;
}

.glow-on-hoverh12:hover:before {
  opacity: 1;
}

.glow-on-hoverh12:after {
  z-index: -1;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
  left: 0;
  top: 0;
  border-radius: 10px;
}

/* Code for the video embed divs */

.youtube-container {
  position: relative;
  width: 100%;
  max-width: 350px;
  min-width: 200px;
  margin: 8px;
  cursor: pointer;
  }
  .youtube-container img {
  width: 100%;
  box-shadow: 0 4px 8px 0 rgba(108, 240, 110, 0.957);
  height: auto;
  }
  .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  background-color: rgba(0,0,0,0.7);
  border-radius: 14px;
  }
  .play-button::before {
  content: "";
  border-style: solid;
  border-width: 15px 0 15px 26px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  }
/* End Code for the video embed divs */

@keyframes glowing {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}

/*adjusting the welcome div*/
#welcome {
 margin-bottom:200px;
}

@media (max-width:576px) {
  #welcome {
    margin-top: 25%;
    margin-bottom:100px;
  }
}

@media (min-width:576px) {
  #welcome {
    margin-top: 15%;
  }
}
/*End adjusting the welcome div*/


html{
  scroll-behavior: smooth;
}