@import url("https://fonts.googleapis.com/css2?family=Signika+Negative:wght@300;400;500;600;700&display=swap");
html {
  height: 100%;
}

body {
  font-family: "Signika Negative", sans-serif;
  height: 100%;
}

nav.navbar {
  padding: 10px 5px;
}
@media (min-width: 768px) {
  nav.navbar {
    padding: 20px 30px;
  }
}

.navbar-brand {
  margin-right: 3rem;
}

.section {
  overflow: hidden;
  position: relative;
  height: 100vh;
}
.section:first-of-type {
  height: 100%;
  width: 100%;
}

.sectionBackground {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position-x: center;
  z-index: -1;
}

p {
  font-weight: 300;
}

.bbtn, .blink {
  background-color: transparent;
  transition: background-color, color;
  transition-duration: 0.3s;
  text-decoration: none;
}

.bbtn {
  border: 1px solid white;
  border-radius: 3px;
  color: white;
  padding: 10px 30px;
  font-weight: 600;
}
.bbtn:hover {
  color: black !important;
  background-color: white !important;
  mix-blend-mode: screen !important;
}
.bbtn:focus {
  animation: buttonFocus 1s linear forwards !important;
  opacity: 1 !important;
}

.blink {
  border: none;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}
.blink:hover, .blink:active {
  color: white;
}
.blink:focus {
  color: rgba(255, 255, 255, 0.6);
}

input.bltr, textarea.bltr {
  background-color: transparent !important;
  border-width: 1px;
  border-radius: 3px;
  padding: 16px 14px;
  border-color: white;
  color: white;
}
input.bltr:focus, textarea.bltr:focus {
  background-color: transparent;
  border-color: white;
  color: white;
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.2);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
}

@keyframes buttonFocus {
  0% {
    color: black;
    background-color: white;
  }
  100% {
    color: white;
    background-color: transparent;
  }
}