@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap');


    :root {
      --wynnDark: #61892F;
      --wynnLight: #86C232;
      --grayDark: #222629;
      --grayLight: #474B4F;
      --grayLightest: #6B6E70;
      --bluePrimary: #4B94FF;
      --discordColor: #5865F2;
      --patreonFieryRed: #FF424D;
      --patreonDark: #141518;
    }


    ::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }
    ::-webkit-scrollbar-button {
      width: 0px;
      height: 0px;
    }
    ::-webkit-scrollbar-thumb {
      background: #212121;
      border: 0px none #ffffff;
      border-radius: 100px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #ffffff;
    }
    ::-webkit-scrollbar-thumb:active {
      background: #000000;
    }
    ::-webkit-scrollbar-track {
      background: #ffffff;
      border: 0px none #ffffff;
      border-radius: 100px;
    }
    ::-webkit-scrollbar-track:hover {
      background: #ffffff;
    }
    ::-webkit-scrollbar-track:active {
      background: #ffffff;
    }
    ::-webkit-scrollbar-corner {
      background: transparent;
    }

* {
  margin: 0;
  padding: 0;
}
html,body {
  font-family: 'Open Sans', sans-serif;
  height: 100%;
  position: relative;
}

.main-container {
  min-height: 100vh;
  overflow: hidden;
  display: block;
  position: relative;
  padding-bottom: 40px;
}

@media only screen and (max-width: 768px) {
  .main-container {
    min-height: 100vh;
    overflow: hidden;
    display: block;
    position: relative;
    padding-bottom: 240px;
  }
}

footer {
  clear:  both;
  position: absolute !important;
  min-height: 40px;
  line-height: 40px;
  bottom:0;
  width: 100%;
}


/* Extended bootstrap
-------------------------------------------------- */

.transparant {
  background: none !important;
}

.bg-dark {
  background: var(--grayDark) !important;
}

nav .nav-item a {
  color: white;
  font-weight: 600;
}

#hero {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.73)),
  url('https://cdn.wynntils.com/splashes/spellbound_v1.png') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.wynncraft {
  color: var(--wynnLight);
}

.nav-pills .nav-link.active {
  background-color: var(--wynnLight) !important;
}


.tab-content .tab-pane ul li a,
.tab-content .tab-pane ul li span,
.tab-content .tab-pane p a {
  color: var(--wynnDark);
}
.tab-content .tab-pane ul li a:hover,
.tab-content .tab-pane ul li span:hover,
.tab-content .tab-pane p a:hover {
  color: var(--wynnLight);
  cursor: pointer;
}



.bob {
   display: inline-block;
   vertical-align: middle;
   -webkit-transform: perspective(1px) translateZ(0);
   transform: perspective(1px) translateZ(0);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
   animation: bob 1.5s infinite;
}

/* Bob */
@-webkit-keyframes bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}