html,body {
    height: 100%;
}
body{
    background: linear-gradient(rgb(233, 138, 121),#93F);
}
.ball, .hero{
    width:50px;
    height:50px;
    border-radius: 100px;
}
.ball{
    filter: drop-shadow(0px 0px 10px #000);
}
.hero{
    bottom: 0;
    left: 0;
    right: 0;
    filter: drop-shadow(0px 0px 10px #fff);
}
.hero .score{
    margin-top: 0.8rem;
}
.hero img{
    bottom: 0;
    left: -20%;
    width: 150%;
}
.fixed-right{
    right: 0;
}

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);
}

.cursor-pointer {
    cursor: pointer;
}

[data-left="0"]{
    left: 0;
}
[data-left="1"]{
    left: 9%;
}
[data-left="2"]{
    left: 18%;
}
[data-left="3"]{
    left: 28%;
}
[data-left="4"]{
    left: 37%;
}
[data-left="5"]{
    left: 46%;
}
[data-left="6"]{
    left: 56%;
}
[data-left="7"]{
    left: 66%;
}
[data-left="8"]{
    left: 76%;
}
[data-left="9"]{
    left: 86%;
}
[data-left="10"]{
    left: 95%;
}
[data-color="white"]{
    background: white; 
}
[data-color="black"]{
    background: black; 
}