@import url("https://fonts.googleapis.com/css?family=VT323");
@import "animations.css";
@import "douche.css";
@import "gp.css";
@import "punk.css";
@import "sjw.css";
@import "hv.css";
@import "hydre.css";
@import "sb.css";

body {
  font-size: 1.5rem;
  font-family: "VT323", monospace;
  background: #000;
}

a,
a:hover,
a:visited {
  color: #fff;
}

.tiny {
  font-size: 12px;
}

.large {
    font-size: 2rem;
}

.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  -webkit-animation: color-change-2x 20s linear infinite alternate both;
  animation: color-change-2x 20s linear infinite alternate both;
}

#title {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9;
  background: url("../assets/images/title.jpg") no-repeat center center fixed;
  background-size: cover;
  opacity: 0;
  transition: opacity 3s ease;
}

#video-intro,
#video-sb-intro,
#video-ending {
  background: black;
  display: none;
}

#dialog-container {
  background-color: white;
  color: black;
  padding: 2rem;
}

#roster-dialog,
#hv-dialog,
#hydre-dialog,
#sb-dialog {
  position: absolute;
  width: 60%;
  margin: 0 20%;
  padding: 1rem;
  background-color: white;
  color: black;
  z-index: 100;
  display: none;
  text-align: center;
  opacity: 0.8;
}

/* BEGIN Hero Card */
.aligner {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aligner-item {
  max-width: 80%;
  padding: 2em;
  background: #536aa9;
  color: #fff;
}

#hero-card #image {
  float: left;
  width: 40%;
}
#hero-card #details {
  float: left;
  width: 60%;
}
#hero-card h1 {
  margin-top: 0;
  color: #fff;
}
#hero-card #description {
  margin-bottom: 2em;
  color: #fff;
}
#hero-card #buttons {
  text-align: center;
}
#confirm-age,
#confirm,
#cancel,
#try-again {
  border: solid 4px white;
  padding: 0.25rem 0.5rem;
  margin: 0 1rem;
  color: #fff;
}
/* END Hero Card */

#age-confirmation {
  text-align: center;
}
#confirm-age {
}

.hero-actions {
  display: none;
}

.user-input {
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms;
}

.text {
  margin-bottom: 1rem;
  text-align: left;
}

.next {
  position: relative;
  margin: 0 auto;
  border: solid 4px white;
  padding: 0.25rem 0.5rem;
}

.action:hover,
.next:hover,
#confirm:hover,
#cancel:hover,
#try-again:hover,
#confirm-age:hover {
  text-decoration: underline;
  cursor: pointer;
}

#hero-selection {
  display: none;
  width: 100%;
}

#heroes-container {
  position: absolute;
  bottom: 10vh;
  left: 0;
  width: 100%;
}

#hero-confirmation {
  display: none;
}

.hero-container {
  float: left;
  width: 25%;
  height: 50%;
}

.hero {
  width: 100%;
  height: 90%;
  cursor: pointer;
}

.hero:hover {
  -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
  animation: heartbeat 1.5s ease-in-out infinite both;
}

.hero-name {
  width: 100%;
  height: 10%;
  text-align: center;
}

#hero-cta {
  float: left;
  width: 100%;
  text-align: center;
}

#message {
  float: left;
  width: 300px;
  height: 200px;
  background-color: #cecece;
  padding: 2rem;
  display: none;
}

video.playing {
  opacity: 1;
  transition: opacity 3s ease;
}

video {
  width: 70vw;
  opacity: 0;
  transition: opacity 3s ease;
}

.fighter {
  position: absolute;
  left: 0;
  bottom: 50px;
  width: 500px;
  height: 500px;
}

#hero-life-label {
  position: absolute;
  left: 20px;
  bottom: 20px;
  font-size: 1.7rem;
  color: white;
}

#hero-life-container {
  position: absolute;
  left: 45px;
  bottom: 20px;
  width: 300px;
  height: 20px;
  background-color: white;
  border: 2px solid white;
}

#hero-life {
  width: 100%;
  height: 100%;
  background-color: #438e6f;
}

.fighter-actions {
  margin: 0;
  padding: 1rem;
  position: absolute;
  top: 10%;
  left: 30%;
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid white;
  display: none;
  z-index: 50;
}

p {
  margin: 0;
  padding: 0;
}

.villain {
  position: absolute;
  right: 0;
  bottom: 50px;
  width: 781px;
  height: 494px;
}

#villain-life-label {
  position: absolute;
  right: 20px;
  bottom: 20px;
  font-size: 1.7rem;
  color: white;
}

#villain-life-container {
  position: absolute;
  right: 45px;
  bottom: 20px;
  width: 300px;
  height: 20px;
  background: white;
  border: 2px solid white;
}

#villain-life {
  position: absolute;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #438e6f;
}

#video-intro .aligner-item,
#video-sb-intro .aligner-item,
#video-ending .aligner-item {
  background: #000;
}

#game-over,
#coupon {
  color: #fff;
  text-align: center;
  display: none;
}
#game-over .aligner-item {
  background: #a95354;
}

#hidden-video-loader {
    display: none;
}

.slide-in-left {
  -webkit-animation: slide-in-left 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-in-left 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.slide-in-right {
  -webkit-animation: slide-in-right 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-in-right 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.slide-in-bottom {
  -webkit-animation: slide-in-bottom 1s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    both;
  animation: slide-in-bottom 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.jello-horizontal {
  -webkit-animation: jello-horizontal 0.9s both;
  animation: jello-horizontal 0.9s both;
}

.wobble {
  animation: wobble 0.8s both;
}

.rotate-90-cw {
  -webkit-animation: rotate-90-cw 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: rotate-90-cw 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.rotate-180-cw {
  -webkit-animation: rotate-180-cw 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    both;
  animation: rotate-180-cw 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.rotate-90-ccw {
  -webkit-animation: rotate-90-ccw 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: rotate-90-ccw 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.bounce-out-top {
	-webkit-animation: bounce-out-top 1.5s both;
	        animation: bounce-out-top 1.5s both;
}

@media all and (orientation: landscape) and (max-device-width: 700px) {
  body {
    font-size: 1rem;
  }
  h1 {
    font-size: 1.5rem;
  }
  #roster-dialog,
  #hv-dialog,
  #hydre-dialog,
  #sb-dialog {
    width: 54%;
    margin: 0 23%;
    font-size: 0.9rem;
  }
}

@media all and (max-device-width: 500px) {
  body {
    font-size: .8rem;
  }
  h1 {
    font-size: 1.2rem;
  }
  #roster-dialog,
  #hv-dialog,
  #hydre-dialog,
  #sb-dialog {
    width: 54%;
    margin: 0 23%;
    font-size: 0.9rem;
  }
}