@import url('https://fonts.googleapis.com/css2?family=Gluten:wght@100..900&display=swap');

/* HTML: <div class="loader"></div> */
.loader {
  width: 35px;
  aspect-ratio: 1;
  --_g: no-repeat radial-gradient(farthest-side,#000 94%,#0000);
  background:
    var(--_g) 0    0,
    var(--_g) 100% 0,
    var(--_g) 100% 100%,
    var(--_g) 0    100%;
  background-size: 40% 40%;
  animation: l38 .5s infinite; 
}
@keyframes l38 {
  100% {background-position: 100% 0,100% 100%,0 100%,0 0}
}


* {
  font-family: 'Gluten', sans-serif;
}

html, body {
  height: 100%;
  width: 100%;
  background: url(https://cdn.dribbble.com/users/280033/screenshots/2087267/attachments/375684/orcaloop2c.gif) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.background-tint {
    background-color: rgba(0, 0, 0, 0.9);
    background-blend-mode: multiply;
  }

.navbar {
  border-radius: 30px;
}

.navbar-light .navbar-toggler {
background-color: #000000;

}

.navbar-brand {
  font-weight: 300;
}


#landing {
  color: #ffffff;
}

#landing #section-one {
  margin-top: 500px;
  padding-left: 30px;
  padding-right: 30px;
}

#section-one img:hover {
    transform: scale(1.05);
    transition: all 0.2s ease-in-out;
}

#section-one img {
    transition: all 0.2s ease-in-out;
}