@font-face {
    font-family: "Poppins";
    src: url("Poppins/Poppins-Regular.ttf") format("truetype"),
        url("Poppins/Poppins-Regular.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}

/* *{
    border: solid 1px red;
} */
/* *{
    border: 1px solid red;
} */

:root {
    --bs-custom-white-rgb: rgb(223, 222, 245);
}

body {
    font-family: "Poppins";
    color: #fff;
    position: relative;
}
body::before {
  position: absolute;
  content: "";
  background: rgb(16,16,16,.78);
  width: 100%;
  max-width: 1920px;
}

.text-custom-white,
a {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-custom-white-rgb), var(--bs-text-opacity)) !important;
}

.hamburger-icon {
    background-image: url();
    background-size: contain;
    background-repeat: no-repeat;
}
#hover-nav:hover{
    font-weight: bold;
    background: linear-gradient(to left,
            #22d4ae 10%,
            #5238e7 30%,
            #50c5f7 70%,
            #6613d3 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-emphasis-color: transparent;
    background-size: 1000% auto;
    animation: gradient-animate 5s ease-in-out infinite alternate-reverse;
    font-family: "Poppins";
}

#rael {
    font-weight: bold;
    background: linear-gradient(to left,
            #22d4ae 10%,
            #5238e7 30%,
            #50c5f7 70%,
            #6613d3 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-emphasis-color: transparent;
    background-size: 1000% auto;
    animation: gradient-animate 7s infinite alternate-reverse;
    font-family: "Poppins";
}

@keyframes gradient-animate {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 0%;
    }
}

.fade-up {
    opacity: 1;
    animation: fadeInUp 5s ease-in-out;
  }
  
  @keyframes fadeInUp {
    from { opacity: 0; }
    to { opacity: 1; }
  }


  #nasa-text {
    background-image: url(source/img/Barnard-150_LRGB_HIGH-RES.jpg);
    background-size: 100% 50% cover contain;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    animation: stripes 30s infinite ease-in-out alternate-reverse;
  }
  #rael-text {
    background-image: url(source/img/BigDipperMt2_Cullen_1365.jpg);
    background-size: 6000px 6000px;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    animation: stripes 10s infinite ease-in-out alternate-reverse;
  }
  @-webkit-keyframes stripes {
    100% {
      background-position: 100 5000px;
    }
  }
  @keyframes stripes {
    100% {
      background-position: 0 500px;
    }
  }