@keyframes spin {
  from {
    transform: rotateZ(0deg); }
  to {
    transform: rotateZ(360deg); } }

@keyframes rumble {
  0% {
    transform: translate3d(0px, 0, 0); }
  10%,
  90% {
    transform: translate3d(-2px, -2px, 0); }
  20%,
  80% {
    transform: translate3d(4px, 4px, 0); }
  30%,
  50%,
  70% {
    transform: translate3d(-8px, -8px, 0); }
  40%,
  60% {
    transform: translate3d(8px, 8px, 0); } }

@keyframes glow {
  from {
    text-shadow: 1px 1px 15px #89d3db, -1px -1px 15px #89d3db; }
  to {
    text-shadow: 0px 0px 20px #175b63, 0px 0px 10px #188692; } }

@keyframes redglow {
  from {
    text-shadow: 1px 1px 15px #e75512, -1px -1px 15px #f73504;
    box-shadow: 1px 1px 15px #e75512, -1px -1px 15px #f73504; }
  to {
    text-shadow: 1px 1px 15px #cfa48f, -1px -1px 15px #b97763;
    box-shadow: 1px 1px 15px #cfa48f, -1px -1px 15px #b97763; } }

@keyframes shine {
  from {
    text-shadow: 3px 3px 15px #89d3db, -3px -3px 15px #89d3db; }
  to {
    text-shadow: 0px 0px 20px #06565f, 0px 0px 10px #085a63; } }

@keyframes shinebox {
  from {
    text-shadow: 3px 3px 15px #89d3db, -3px -3px 15px #89d3db;
    box-shadow: 3px 3px 15px #89d3db, -3px -3px 15px #89d3db; }
  to {
    text-shadow: 0px 0px 20px #06565f, 0px 0px 10px #085a63;
    box-shadow: 0px 0px 20px #06565f, 0px 0px 10px #085a63; } }

@keyframes redshinebox {
  from {
    text-shadow: 3px 3px 15px #db5516, -3px -3px 15px #d63a0a;
    box-shadow: 3px 3px 15px #d47245, -3px -3px 15px #e24a24; }
  to {
    text-shadow: 0px 0px 20px #db5516, 0px 0px 10px #d63a0a;
    box-shadow: 0px 0px 20px #d47245, 0px 0px 10px #e24a24; } }

@keyframes vortex {
  0% {
    transform: rotateZ(0deg); }
  100% {
    transform: rotateZ(360deg); } }

@keyframes drift {
  0% {
    transform: translate(0, 0); }
  100% {
    transform: translate(0, -96px); } }

@keyframes bobbing {
  0% {
    transform: translate(0, -4px); }
  50% {
    transform: translate(0, -8px); }
  100% {
    transform: translate(0, -4px); } }

@keyframes horizontal-bobbing {
  0% {
    transform: translate(16px, 0px); }
  50% {
    transform: translate(32px, 0); }
  100% {
    transform: translate(16px, 0px); } }

@keyframes sink {
  0% {
    transform: translate(0, 0); }
  100% {
    transform: translate(0, 10.66667px); } }

@keyframes control-panel-green {
  0% {
    box-shadow: 0px -4px 16px 2px limegreen; }
  100% {
    box-shadow: 0px -12px 16px 4px limegreen; } }

@keyframes control-panel-red {
  0% {
    box-shadow: 0px -4px 16px 2px #ed1c24; }
  100% {
    box-shadow: 0px -12px 16px 4px #ed1c24; } }

body {
  background-color: #0d0f0d;
  color: white;
  display: flex;
  font-family: 'Russo One', sans-serif;
  justify-content: center;
  align-items: center; }

.sign-in {
  text-align: center;
  align-items: center;
  display: flex;
  flex-direction: column; }

.options {
  display: flex;
  flex-direction: row;
  text-align: center;
  padding: 16px; }

.create-account,
.existing-user {
  padding: 24px;
  margin: 16px;
  border: 1px solid whitesmoke;
  box-shadow: 0px 0px 2px 2px whitesmoke;
  display: flex;
  flex-direction: column;
  height: 360px;
  width: 240px;
  background-color: #0d1818;
  align-items: center; }

.signin-form {
  height: 80%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; }

.input-field {
  margin: 16px; }

.submit-ready {
  width: 128px;
  background-color: yellowgreen; }

.submit-unready {
  width: 128px;
  background-color: tomato; }

.launch-map-editor-btn {
  width: 192px;
  height: 64px;
  color: #1a051f;
  font-size: 20px;
  font-weight: bold;
  background-color: yellowgreen;
  border: 2px solid whitesmoke;
  border-radius: 12px;
  padding: 8px; }

.main-menu {
  border: 3px solid whitesmoke;
  border-radius: 18px;
  position: relative;
  width: 60%;
  height: 84%;
  margin-top: 4%;
  font-size: 36px;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 4px 8px;
  min-width: 720px; }

.ingame-options-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around; }

.menu-button {
  border: 2px solid cyan;
  border-radius: 12px;
  height: 64px;
  min-width: 336px;
  color: whitesmoke;
  font-family: 'Russo One';
  background-color: black;
  box-shadow: 0px 0px 2px 4px whitesmoke;
  font-size: 1em;
  margin-bottom: 32px;
  align-self: center; }

.skill-tree {
  position: relative;
  height: 352px;
  width: 544px;
  background-color: #1d041d;
  align-self: center;
  margin-bottom: 32px;
  border: 2px solid rgba(0, 250, 154, 0.89);
  border-radius: 12px; }

.skill-tree-container {
  border-radius: 50%;
  background-color: #1d041d;
  height: 64px;
  width: 64px;
  position: absolute;
  margin: 0;
  z-index: 3;
  padding: 16px 4px 0px 4px;
  line-height: 8px;
  cursor: pointer; }

.skill-tree-container .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #fff;
  color: #000;
  text-align: center;
  padding: 5px 0;
  border-radius: 16px;
  border: 3px solid #000;
  position: absolute;
  z-index: 3;
  bottom: 80%;
  left: 50%;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 12px;
  line-height: 16px; }

.skill-tree-container:hover .tooltiptext {
  position: absolute;
  visibility: visible;
  opacity: 1;
  z-index: 1000; }

.skill-tree-container:hover {
  position: absolute;
  visibility: visible;
  opacity: 1;
  z-index: 1000; }

.skill-tree-alert {
  color: rgba(250, 142, 0, 0.89);
  text-shadow: 0px 4px 12px rgba(250, 92, 0, 0.89);
  max-width: 192px;
  background-color: black;
  border-radius: 12px;
  font-size: 16px !important; }

.skill-tree-select {
  color: rgba(0, 250, 154, 0.89);
  text-shadow: 0px 4px 12px rgba(10, 185, 118, 0.89);
  max-width: 192px;
  background-color: black;
  border-radius: 12px;
  font-size: 16px !important; }

.skill-tree-confirm {
  color: #2ecf2e;
  text-shadow: 0px 4px 12px #21aa21;
  max-width: 192px;
  background-color: black;
  border-radius: 12px;
  font-size: 21.33333px !important; }

.available {
  border: 2px solid rgba(0, 250, 154, 0.89);
  box-shadow: 0px 0px 8px rgba(0, 250, 154, 0.89); }
  .available:hover {
    box-shadow: 0px 0px 16px 8px rgba(0, 250, 154, 0.89); }

.selected {
  border: 2px solid rgba(10, 185, 118, 0.89);
  box-shadow: 0px 0px 12px 8px rgba(0, 250, 154, 0.89); }

.purchased {
  border: 2px solid #0ce70c;
  box-shadow: 0px 0px 24px 8px #0ce70c; }

.unavailable {
  border: 2px solid gray;
  box-shadow: 0px 0px 4px gray; }
  .unavailable:hover {
    box-shadow: 0px 0px 8px red; }

.skill-tree-text {
  font-size: 12px; }

.skill-tree-branch {
  position: absolute;
  z-index: 2;
  height: 24px;
  width: 38px; }

.skill-tree-pts-remaining {
  position: absolute;
  color: rgba(0, 250, 154, 0.89);
  padding: 16px;
  border-radius: 4px;
  max-width: 210px; }

.slideshow {
  margin-top: 4%;
  height: 720px;
  width: 768px;
  border: 1px solid white;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: #000; }

.slide {
  align-self: center;
  margin: 16px;
  height: 403.2px;
  width: 716.8px; }

.slideshow-text {
  color: #e75b5b;
  text-shadow: 1px 1px 7px #f73504;
  background-color: black;
  padding: 4px;
  border: 1px solid whitesmoke;
  border-radius: 12px;
  z-index: 100;
  position: relative; }

.skip-button {
  position: absolute;
  bottom: 0px;
  border: 2px solid cyan;
  border-radius: 12px;
  height: 48px;
  min-width: 268.8px;
  color: whitesmoke;
  background-color: black;
  font-size: 0.75em;
  margin-bottom: 16px;
  align-self: center; }

.dialogue {
  transition-duration: 0.125s;
  font-size: 16px;
  background-color: white;
  color: black;
  border: 3px solid black;
  border-radius: 50%;
  position: absolute;
  padding: 12px;
  width: 192px;
  z-index: 150; }

.bubble-tick {
  transition-duration: 0.125s;
  position: absolute;
  bottom: -32px;
  left: 40%;
  height: 32px;
  width: 32px;
  z-index: 150; }

.bubble-tick-from-above {
  bottom: 0px;
  top: -32px; }

.bubble-tick-vertical-right {
  transform: rotateX(180deg); }

.bubble-tick-vertical-left {
  transform: rotateZ(180deg); }

.popup {
  position: absolute;
  animation: drift 10s linear infinite;
  font-size: 32px;
  font-weight: bolder;
  z-index: 1000;
  max-width: 192px; }

.announcement-health {
  font-size: 32px;
  color: limegreen;
  text-shadow: 0px 4px 12px limegreen; }

.announcement-experience {
  font-size: 16px;
  color: rgba(0, 250, 154, 0.89);
  text-shadow: 0px 4px 12px rgba(0, 250, 154, 0.89); }

.announcement-steroids {
  font-size: 16px;
  color: #9b0404;
  text-shadow: 0px 4px 12px #9b0404; }

.announcement-levelup {
  font-size: 32px;
  color: #f1e647;
  text-shadow: 0px 4px 12px #f1e647; }

.announcement-xp-gain {
  font-size: 32px;
  color: rgba(0, 250, 154, 0.89);
  text-shadow: 0px 4px 12px rgba(0, 250, 154, 0.89); }

.player {
  transition-duration: 0.125s;
  position: absolute;
  width: 35.2px;
  z-index: 1; }

.attack {
  position: absolute; }

.player-attack {
  position: absolute;
  height: 28px; }

.boss-attack {
  position: absolute;
  margin-bottom: 12px; }

.damage {
  position: absolute;
  z-index: 1000;
  width: 64px;
  height: 32px; }

.baddie {
  width: 35.2px;
  height: 35.2px;
  position: absolute; }

.baddie-moving {
  transition-duration: 0.25s; }

.baddie-trans {
  transition-duration: 0s; }

.baddie-healthbar {
  height: 8px;
  width: 32px;
  background-color: red;
  position: absolute; }

.boss {
  transition-duration: 0.25s;
  position: absolute;
  width: 64px;
  height: 64px; }

.flowing-right {
  transform: rotate(0deg); }

.flowing-down {
  transform: rotate(90deg); }

.flowing-left {
  transform: rotate(180deg); }

.flowing-up {
  transform: rotate(270deg); }

.facing-left {
  transform: rotateY(180deg); }

.green-glow {
  border-radius: 4px;
  animation: control-panel-green 4s infinite alternate; }

.red-glow {
  border-radius: 4px;
  animation: control-panel-red 4s infinite alternate; }

.world {
  margin-top: 4%;
  border: 2px solid #ffaee5;
  width: 672px;
  height: 672px;
  position: relative;
  font-size: 36px;
  border-radius: 12px;
  overflow: hidden;
  text-align: center; }

@media (prefers-reduced-motion: no-preference) {
  .rumbling {
    animation: rumble 1.25s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; } }

.background {
  width: 672px;
  height: 672px;
  position: absolute;
  background-image: url("../assets/backgrounds/background002.png");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 20%; }

.sidebar-container {
  position: relative;
  margin-top: 4%;
  margin-left: 1%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 288px;
  height: 672px;
  border: 2px solid cyan;
  border-radius: 12px; }

.sidebar {
  color: white;
  width: 224px;
  padding: 12px;
  border: 1px solid cyan; }

.sidebar-label {
  position: relative;
  margin: 0 0 8px 0; }

.healthbar-box {
  color: white;
  width: 248px;
  height: 91.6px;
  padding: 12px 0px;
  border: 1px solid cyan;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column; }

.healthbar {
  padding: 0px 4px 0px 4px;
  margin: 0px;
  text-align: center;
  height: 32px;
  max-width: 224px;
  border: 2px solid #9b0404;
  color: #9b0404;
  font-weight: bolder;
  font-size: 1.6em;
  text-shadow: 1px 1px black;
  border-radius: 16px; }

.experiencebar-box {
  color: white;
  width: 240px;
  height: 80px;
  padding: 12px 4px;
  border: 1px solid cyan;
  text-align: center;
  justify-content: left;
  align-items: left;
  display: flex;
  flex-direction: column;
  position: 'relative'; }

.experiencebar-shell {
  color: rgba(0, 250, 154, 0.89);
  border: 2px solid rgba(0, 250, 154, 0.89);
  background-image: linear-gradient(rgba(36, 152, 230, 0.829), #102d41);
  padding: 2px;
  height: 24px;
  border-radius: 12px; }

.experiencebar-inner {
  background-image: linear-gradient(rgba(125, 255, 205, 0.89), #23be83);
  height: 24px;
  border-radius: 10px; }

.username {
  max-width: 50%;
  color: white; }

.logout {
  position: relative;
  margin-left: 30%;
  border-radius: 12px; }

.top {
  border-radius: 12px 12px 0px 0px;
  display: flex; }

.bottom {
  border-radius: 0px 0px 12px 12px; }

.sidebar-button {
  margin: 16px;
  padding: 16px;
  border-radius: 24px;
  border: 2px solid #225555;
  height: 64px;
  width: 224px;
  background-image: linear-gradient(rgba(8, 224, 26, 0.8), rgba(7, 51, 11, 0.8));
  color: #180014;
  font-size: 28px;
  font-weight: bold;
  font-family: 'Russo One', sans-serif; }

.disabled {
  background-image: none;
  background-color: gray;
  cursor: not-allowed; }

.block {
  position: absolute;
  width: 32px;
  z-index: 1; }

.item {
  position: absolute;
  width: 32px;
  z-index: 2;
  border-radius: 50%;
  background-color: rgba(48, 233, 48, 0.33);
  box-shadow: 0px 0px 16px 8px rgba(48, 233, 48, 0.5);
  animation: bobbing 3s linear infinite; }

.golden-egg {
  box-sizing: border-box;
  border-radius: 50%;
  box-shadow: 0px 0px 12px 12px gold; }

.portal {
  margin-left: -24px;
  margin-bottom: -24px;
  height: 96px;
  width: 96px;
  filter: blur(1px);
  border-radius: 50%;
  z-index: 100;
  animation: spin 6s linear infinite reverse; }

.XP {
  animation: shinebox 1.5s ease-in-out alternate; }

.levelup {
  animation: shinebox 2.5s ease-in-out infinite alternate;
  font-size: 16px; }

.levelup-menu-shine {
  animation: shinebox 5s ease-in-out infinite alternate; }

.text {
  position: relative;
  z-index: 100; }

.prev-next-lvl {
  position: relative; }

.intro-shine {
  animation: shine 2.5s ease-in-out infinite alternate;
  position: relative; }

.achievement {
  background-color: black;
  padding: 4px;
  border: 1px solid whitesmoke;
  border-radius: 8px;
  animation: glow 1.5s ease-in-out infinite alternate;
  position: relative; }

.menu-achievement {
  text-decoration: line-through; }

.obituary {
  color: #e75b5b;
  background-color: black;
  padding: 4px;
  border: 1px solid whitesmoke;
  border-radius: 12px;
  animation: redglow 1.5s ease-in-out infinite alternate;
  z-index: 100;
  position: relative; }

.dead-player {
  position: absolute;
  z-index: 1000;
  animation: sink 1s linear 0.5s 1;
  animation-fill-mode: forwards; }

.restart-button {
  animation: redshinebox 2.5s ease-in-out infinite alternate;
  background-image: none;
  background-color: #cc3333; }

.rounded {
  border-radius: 50%;
  height: 16px; }

.pointer {
  position: absolute;
  opacity: 0.5;
  z-index: 2000;
  animation: horizontal-bobbing 5s cubic-bezier(0.7, 0.18, 0.24, 0.77) infinite alternate;
  transform: rotateY(180deg); }