/* setting background attributes */
body {
   background-image: url("image.1.jpg");
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: 100% 100%;
   overflow: hidden;
}
/* setting player attributes */
.player {
    background-repeat: no-repeat; 
    background-size: cover;
    height: 10px;
    width: 100px; 
    position: absolute;
    bottom: 215;
    left: 60;
    
    }
/* Styling score Card */
#scoreCard{
    text-align: center;
    text-decoration: solid;
    text-decoration-color: crimson;
    font-weight: 400;
    font-family: fantasy ;
    text-underline-position: below;
}
#restart{

    border: 1px solid coral;
    background-color: darkcyan;
    position:fixed;
    left:48%;
    font-family: fantasy;
    text-decoration-color: red;
}
/* styling info */
#info{
    text-align:right;
    left:1%;
    top:1%;
    background-color: darkkhaki;
    position: absolute;
    font-size: .6em;
}
/* setting hurdle attributes */
.hurdle {

    height: 10px;
    position: absolute;
    bottom: 185;
    left: 500;
    
}
/* styling game over */
.gameOver{
    visibility: hidden;
    text-align: center;
    font-family: cursive ;
    color: crimson;
    font-size:xxx-large
}
.gameWon{
    visibility: hidden;
    text-align: center;
    font-family: cursive ;
    color: crimson;
    font-size:xxx-large
}
/* #restart{
    visibility: hidden;
} */

/* Red character animation */
.animatePlayer{
    animation: player;
    animation-duration:1.2s ; 
    animation-timing-function:linear;
}

@keyframes player{
    0%{
        bottom: 208;
    }
    50%{
         bottom: 500;
    }
    100%{
          bottom: 208;
          transform: rotate(360deg); 

    }
}
/* Greeen character animation */
.animateDragon{
    animation: animateDragon;
    animation-duration: 2.4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    /* animation-direction: alternate; */
}

@keyframes animateDragon{
    0%{
        left: 100vw
    }
    100%{
        left: -10vw;
    }
}
/* media queries */
@media (min-width: 768px) {
    body {
      background-color: tomato;
    }
  }