@font-face {
    font-family: "Blogger Sans Medium";
    src: url("../fonts/Blogger_Sans_Medium.woff2") format('woff2'),
        url("../fonts/Blogger_Sans_Medium.woff") format('woff'),
        url("../fonts/Blogger_Sans_Medium.ttf") format('truetype'),
        url("../fonts/Blogger_Sans_Medium.svg") format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    }
body {
    font-family: "Blogger Sans Medium","Segoe UI",sans-serif;
    color: #FFEDCB;
    margin: 0;
    background: #082f3d;
    cursor: url(../img/gingerbread.png), pointer;
}
@media screen and (min-width: 600px) {
  body {
    background: url(../img/bg.png) no-repeat left top #082f3d;
    background-size: cover;
  }
}

.bg-nav {
    background-color: transparent;
}
.navbar-brand img {
    max-height: 45px !important
}
.navbar-toggler {
    border: 0;
}

.nav-link {
    text-align: center;
    text-transform: uppercase;
}

button {
    position: relative;
    min-width: 120px;
    height: 40px;
    user-select: none;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 1;
    text-align: center;
    box-shadow: rgb(33 44 52 / 20%) 0 2px 10px 0;
    -webkit-appearance: none;
    display: inline-block;
    color: #2c3a44;
    outline: 0;
    padding: 0 20px;
    background: linear-gradient(#e7af47 0,#ce8b10 100%);
    border-width: 0;
    border-radius: 5px;
    transition: color .2s ease 0s,background .2s ease 0s,border-color .2s ease 0s,box-shadow .2s ease 0s,opacity .2s ease 0s;
}
button.secondary {
    background: linear-gradient(180deg,#fff 0,#dff5ff 100%);
}
button.outline {
    color: #91a5b0;
    background: 0 0;
    border: 1px solid #3c4c57;
    box-shadow: none
}

button.outline::after {
    content: none
}

button.outline:hover {
    content: none;
    color: #dff5ff
}
button::after {
    content: "";
    display: block;
    right: 0;
    bottom: 0;
    top: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    z-index: 0;
    background: #000;
    border-radius: inherit;
    transition: opacity .2s ease 0s
}

button:hover::after {
    opacity: .1
}

button:active::after {
    opacity: .2
}

#hero {
    min-height: 90vh;
}

#footer {
    text-align: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
#footer a {
    padding-left: 1rem;
    padding-right: 1rem;
    text-decoration: none;
}
input {
    position: relative;
    z-index: 1;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    outline: none;
    appearance: none;
    color: rgb(145, 165, 176);
    background: rgb(52, 67, 77);
    border: 1px solid rgb(51, 67, 77);
    border-radius: 0.5rem;
    transition: all 0.2s ease 0s;
    height: 5rem;
    font-size: 1.6rem;
    line-height: 2.2rem;
    font-weight: 500;
    padding: 1rem;
}


h2 {
    display: inline !important;
}











  .animated {
  margin: 0;
  padding: 0;
  background: url('https://i.ibb.co/89Cf3dm/text-bg.png') no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: moveBg 90s linear infinite;
  -webkit-animation: moveBg 90s linear infinite;
}

/* Text Background Animation */
@keyframes moveBg {
  0% {
    background-position: 0% 30%;
  }

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