/* Hingrundbild */
.scroll-content {
    background: url("../images/background.svg");
    background-size: cover;
    color: #333;
    font: 100% Arial, Sans Serif;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Bildgrößen für Tierkarten */
.imagesizebig{
  width:128px;
  height:128px;
}

.imagesizemedium{
  width:96px;
  height:96px;
}

/* Runder Rahmen für Tierkarten*/
.myborder{
    display: inline-block;
    border-radius: 6px;
    color: black;
    border-style: solid;
    border-color: black;
    border-width: 2px;
 }

/* Rahmen für Elemente am unteren Rand, Mentorenhilfe, timer, Punkte */
.statusbar{
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 64px;
  overflow: hidden; 
  text-align: center;
}

/* Neon Effekt für Spieltimer */
 .neon {
    font-family: sans-serif;
    text-transform: uppercase;
    font-size: 60px;
    font-weight: bold;
    font-style: italic;
    letter-spacing: .1em;
    color: white;
    text-shadow: 0 0 5px white,
                 0 0 10px white,
                 0 0 20px yellow,
                 0 0 40px yellow,
                 0 0 60px yellow,
                 0 0 90px yellow,
                 0 0 120px yellow,
                 0 0 160px yellow;
}

.spieltimer {
    font-family: sans-serif;
    text-transform: uppercase;
    font-size: 40px;
    font-weight: bold;
    font-style: italic;
    letter-spacing: .1em;
    color: white;
    text-shadow: 0 0 5px white,
                 0 0 10px white,
                 0 0 20px yellow,
                 0 0 40px yellow,
                 0 0 60px yellow,
                 0 0 90px yellow,
                 0 0 120px yellow,
                 0 0 160px yellow;
}


.spieltimerdiv {
  position: absolute;  
  bottom:0px;
  left:0px;  
  width: 100%;
  height: 50px;
  overflow: hidden;
}

.punktestand {
  position: absolute;  
  bottom:-15px;
  right:0px;  
  width: 100%;
  height: 50px;
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 30px;
  font-weight: bold;
  font-style: italic;
  letter-spacing: .1em;
  color:white;
  text-align: right;
  overflow: hidden;
}

/* Roter Rahmen für Spielauflösung, noch ungenutzt */
 .redborder{
    display: inline-block;
    border-radius: 6px;
    color: black;
    border-style: solid;
    border-color: red;
    border-width: 2px;
 }


/* Standbild-Mentor in Statusbar */
.mentorhilfe {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 64px;
  height: 64px;
  overflow: hidden;
  background:  url('../images/Mentor/mentorhelp_64px.png');
}

/* Animierter-Mentor in Statusbar */
.mentorborder {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 64px;
  height: 64px;
  overflow: hidden;
  background:  url('../images/Mentor/mentorhelp_64px.png');
}

.mentor {
  width: 64px;
  height: 640px;
  background:  url('../images/Mentor/mentor_64px.png') left center;
  -webkit-animation: mentorsprite 4s steps(10) infinite;
}

@-webkit-keyframes mentorsprite {
    100% { background-position: 0 -640px; }
}

/* Grosser Mentor bei Erfolg */
.mentorborderbravo {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 256px;
  height: 256px;
  margin-left: -128px;
  margin-top: -128px;
  overflow: hidden;
}

.mentorbravo {
  width: 256px;
  height: 1024px;
  background:  url('../images/Mentor/mentor_bravo.png') left center;
  -webkit-animation: mentorspritebravo 2.8s steps(4) infinite;
}

@-webkit-keyframes mentorspritebravo {
    100% { background-position: 0 -1024px; }
}