/* 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: 280px;
   min-width: 200px;
   margin: 10px;
   cursor: pointer;
 }

 .youtube-container img {
   width: 100%;
   box-shadow: 0 4px 8px 0 rgba(108, 240, 110, 0.957);
   height: 160px;
   object-fit: cover;
   border-radius: 8px;
 }

 .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 */

 .custom-card {
   width: 100%;
   max-width: 280px;
   min-width: 200px;
   margin: 10px;
 }

 .custom-card .card {
   border: none;
   box-shadow: 0 4px 8px 0 rgba(108, 240, 110, 0.957);
   transition: transform 0.2s;
   background-color: #f8f9fa;
   border-radius: 8px;
   overflow: hidden;
 }

 .custom-card .card-img-top {
   height: 160px;
   object-fit: cover;
 }

 .custom-card .card-title {
   font-size: 1rem;
   font-family: 'Poppins', sans-serif;
   text-shadow: none;
   margin-bottom: 0;
   color: #333;
 }

 .custom-card .card:hover {
   transform: scale(1.05);
   box-shadow: 0 8px 16px 0 rgba(108, 240, 110, 0.5);
 }


 @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;
 }