@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-primary {
    @apply inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */


@keyframes bounceIn {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}


@keyframes flyFromRight {
  0% {
    left: 1200px;
    opacity: 0;
  }
  60% {
    left: -100px;
    opacity: 1;
  }
  100% {
    left: 0px;
  }
}

@keyframes flyFromLeft {
  0% {
    right: 1200px;
    opacity: 0;
  }
  60% {
    right: -100px;
    opacity: 1;
  }
  100% {
    right: 0px;
  }
}

.animated {
  animation-duration: 1s;
  position: relative;
}

.animated.bounceIn {
  animation-name: bounceIn;
}

.animated.flyFromRight {
  animation-name: flyFromRight;
}

.animated.flyFromLeft {
  animation-name: flyFromLeft;
}


/* game */
.arena {
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background: url(/Sprite/cave.png) 0px -700px;
}

.character {
  width: 126px;
  height: 126px;
  transform: scale(3) translatey(-5px);
  background-repeat: no-repeat;
/*  filter: drop-shadow(2px 2px 3px gray);*/
  /* background-color: rgba(134, 0, 0, 0.1); */
}

#player2 {
  transform: scale(-3, 3) translatey(-5px);
  margin-left: 100px;
/*  filter: drop-shadow(-2px 2px 3px gray);*/
}

@keyframes Idle {
  from {
    background-position: 0px;
  }

  to {
    background-position: -1260px;
  }
}

@keyframes Attack1 {
  from {
    background-position: 0px;
  }

  to {
    background-position: -882px;
  }
}

@keyframes Attack2 {
  from {
    background-position: 0px;
  }

  to {
    background-position: -756px;
  }
}

@keyframes Attack3 {
  from {
    background-position: 0px;
  }

  to {
    background-position: -1134px;
  }
}

@keyframes TakeHit {
  from {
    background-position: 0px;
  }

  to {
    background-position: -378px;
  }
}

@keyframes Death {
  from {
    background-position: 0px;
  }

  to {
    background-position: -1386px;
  }
}

.result {
  position: absolute;
  top: 10px;
  width: 100%;
  text-align: center;
  font-size: 24px;
}