body {
    background-image:url("../images/bgnd.png");
}
.navbar {
    background-image:url("../images/bgnd.png");
}

#ball-field {
    box-shadow:inset 0pt 0pt 9pt 9pt rgba(19, 57, 38,0.3);
    position:relative;
    background-color:#2d8659;
    background-image: url("../images/fieldBgnd.png");
    border-radius:6pt;
}
#ball {
    transition-property:top,left;
    transition-timing-function:linear;
    position:absolute;
    background-size:100%;
    background-image:url("../images/sprites/player.png");
    z-index:9000;
}
.sprite {
    position:absolute;
    background-size:100%;
/*    transition-property:opacity;
    transition-timing-function:linear;
    transition-duration:1000ms;
    transition:opacity 1s ease-in-out; */
}
.monster {
    background-image:url("../images/sprites/monster.png");
}
.monster1 {
    background-image:url("../images/sprites/monster1.png");
}
.monster2 {
    background-image:url("../images/sprites/monster2.png");
}
.food {
    background-image:url("../images/sprites/food.png");
}
.angel {
    background-image:url("../images/sprites/angel.gif");
}
.love {
    background-image:url("../images/sprites/love.png");
}
.strawberry {
    background-image:url("../images/sprites/strawberry.png");
}
#scoreboard {
    font-size:200%;
    color:white;
    text-align:center;
}
#displayScore {
    color:yellow;
}

#gameDiv {
    z-index:5000;
    position:fixed;
    top:59px;
    left:0;
    width:100%;
    height:100%;
    background-color:#333333;
    display:none;
}

#gameControls {
    position:fix;
    top:20px;
    padding-right: 20px;
    text-align:right;
    padding-bottom: 2px;
}

.myButton,
#timerNumber {
    font-size:200%;
}
#timerBox {
    cursor:progress;
    min-width: 200px;
    text-align: right;
}
#timerNumber {
    width: 60px;
}
#dirButtons .myButton {
    padding-left: auto;
    padding-right: auto;
}



/* ---------------------------- */

/* rainbow animation */
@keyframes colorCycle {
    0% { color   : rgb(35, 139, 230); }
    12.5% { color: rgb(16, 184, 133); }
    25% { color  : rgb(64, 192, 87); }
    37.5% { color: rgb(252, 196, 23); }
    50% { color  : rgb(255, 146, 43); }
    62.5% { color: rgb(250, 82, 82); }
    75% { color  : rgb(240, 101, 149); }
    87.5% { color: rgb(132, 94, 246); }
    100% { color : rgb(35, 139, 230); }
}

.rainbow {
    animation: colorCycle 5s infinite linear;
}

/* currently not working in Safari - és máshol sem egyelőre :D
.rainbow .fa-secondary {
    animation: colorCycle 5s infinite linear;
} */