html,body {
    height: 100%;
}
body.platform {
    background-size: cover;
    background-position-y: bottom;
    background-position-x: center;
}
body.platform[data-template="template0"]{
    background-image: url('../Images/bg.jpg');
}
body.platform[data-template="template1"]{
    background-image: url('../Images/bg1.gif');
}
body.platform[data-template="template2"]{
    background-image: url('../Images/bg2.jpg');
}
body.platform[data-template="template3"]{
    background-image: url('../Images/bg3.jpg');
}
body.platform[data-template="template4"]{
    background-image: url('../Images/bg4.gif');
}
body.platform[data-template="template5"]{
    background-image: url('../Images/bg5.gif');
}
body.platform[data-template="template6"]{
    background-image: url('../Images/bg6.jpg');
}
body.platform[data-template="template7"]{
    background-image: url('../Images/bg7.jpg');
}
body.platform[data-template="template8"]{
    background-image: url('../Images/bg8.jpg');
}
body.platform[data-template="template9"]{
    background-image: url('../Images/bg9.jpg');
}
body.platform[data-template="template10"]{
    background-image: url('../Images/bg10.jpg');
}
body.platform[data-template="template11"]{
    background-image: url('../Images/bg11.jpg');
}
body.platform[data-template="template12"]{
    background-image: url('../Images/bg12.jpg');
}
body.platform[data-template="template13"]{
    background-image: url('../Images/bg13.jpg');
}
body.platform[data-template="template14"]{
    background-image: url('../Images/bg14.gif');
}
body.platform[data-template="template15"]{
    background-image: url('../Images/bg15.gif');
}

body.platform .heading{
    color: white;
}
body.platform[data-template="template0"] .heading,
body.platform[data-template="template13"] .heading{
    color: inherit;
}

body.platform[data-template="template2"] .heading{
    color: white;
    background-color: rgb(75 89 12 / 50%);
}
body.platform[data-template="template7"] .heading{
    color: white;
    background-color: rgb(31 25 115 / 50%);
}
.carousel-indicators li{
    height: 6px !important;
}

div.main {
    height: inherit;
}
div.volume-controls{
    z-index: 2;
}
div.volume-controls .music{
    filter: drop-shadow(0 0 10px white);}
div.volume-controls .sound{
    filter: drop-shadow(8px 0px 5px white);
}
div.game-arena {
    height: 85px;
    overflow: hidden;
    position: fixed;
    bottom: 56px;
}
.justify-content-space-evenly{
    justify-content: space-evenly;
}
div.hero {
    background: url('../Images/Hero.png') -2px -12px;
    width: 56px;
    height: 81px;
}

div.hero[data-level='1']{
    filter: contrast(900%) brightness(550%);
}

div.hero[data-level='2']{
    filter: drop-shadow(0px 0px 5px yellow) contrast(900%) brightness(550%);
}
div.hero-flip {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    background-position-x: -4px;
}

div.enemy {
    background: url(../Images/Hero.png) -11px -12px;
    width: 41px;
    height: 85px;
    filter: invert(1);
    display: inline-flex;
}

div.enemy[data-level='1']{
    filter: sepia(1) invert(1);
}

div.enemy[data-level='2']{
    filter: sepia(1) invert(1) drop-shadow(2px 2px 5px darkblue);
}

div.empty-enemy {
    background: none;
}

div.kick {
    background: url(../Images/Hero.png) -200px -217px;
    margin-top:-2px;
    width: 56px;
}
div.explode {
    background: url(../Images/explode.png);
    background-size: contain;
    background-repeat: no-repeat;
    filter: invert(0);
}

.fixed-right{
    right: 0;
}

.cursor-pointer {
    cursor: pointer;
}

.background-carousel img{
    height: 220px;
}

.disable-dbl-tap-zoom {
    touch-action: manipulation;
}

.time-span {
	height: 20px;
	width: 100%;
}

@media (max-width: 480px) {
    .background-carousel img{
        height: 150px;
    }
}

@media (orientation: landscape) and (max-height: 360px) {
 form.landscape-form {
    flex-direction: row !important;
    justify-content : space-around;
 }
 form.landscape-form button{
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    margin-left: 0.6rem;
    margin-right: 0.6rem;
 }
 .enemy-hit-time {
    height: 10px !important;
 }
 .list-group-item{
    padding: 0.2rem !important;
 }
 .modal .modal-header {
    padding: 0.2rem 1rem!important;
 }
 .modal .modal-body {
    padding: 0.2rem !important;
    margin-bottom: 0;
 }
 .modal .modal-footer{
    padding: 0 !important;
 }
}