body {
    background-image: url("image/bg.png");
}

.box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 470px;
    height: 470px;
    
}


#box1 {
    background: radial-gradient(#fca83b, #ff7300);
    width: 150px;
    height: 150px;
    border-radius: 20px;  
    position: absolute;
    left: 0%;
    top: 0%;
}


#box2 {
    background: radial-gradient(#fca83b, #ff7300);
    width: 150px;
    height: 150px;
    border-radius: 20px;  
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    
}

#box3 {
    background: radial-gradient(#fca83b, #ff7300);;
    width: 150px;
    height: 150px;
    border-radius: 20px;  
    position: absolute;
    right: 0%;
    
}

#box4 {
    background: radial-gradient( #e65f8c, #f8115e);
    width: 150px;
    height: 150px;
    border-radius: 20px;  
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);  
}

#box5 {
    background: radial-gradient( #e65f8c, #f8115e);
    width: 150px;
    height: 150px;
    border-radius: 20px; 
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
 
}

#box6 {
    background: radial-gradient( #e65f8c, #f8115e);
    width: 150px;
    height: 150px;
    border-radius: 20px;   
    position: absolute;
    right: 0%;
    top: 50%;
    transform: translate(0, -50%);
}

#box7 {
    background: radial-gradient( #e65f8c, #f8115e);
    width: 150px;
    height: 150px;
    border-radius: 20px;   
    position: absolute;
    left: 0%;
    bottom: 0%;
}

#box8 {
    background:radial-gradient(#ee2222, #b90000);
    width: 150px;
    height: 150px;
    border-radius: 20px;  
    position: absolute;
    left: 50%;
    bottom: 0%;
    transform: translate(-50%,0);
}

#box9 {
    background:radial-gradient(#ee2222, #b90000);
    width: 150px;
    height: 150px;
    border-radius: 20px;
    position: absolute;
    right: 0%;
    bottom: 0%;
}

#imgplay {
    width: 150px;
    height: 150px;
    border-radius: 20px;
    position: absolute;
    left: 50%;
    bottom: 0%;
    transform: translate(-50%, 0%);
}

#box1:active, #box2:active, #box3:active{
    background: radial-gradient(#f3ab4ee1, #ff8827dc);
}

#box4:active, #box5:active, #box6:active, #box7:active{
    background: radial-gradient( #eb7ba0, #fc3b7b);
}

#box8:active, #box9:active{
    background:radial-gradient(#f05656e1, #af1b1b);
}



.wrapper {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translate(-50%, 0%);
}

#playBtn {
    color: #000000 !important;
    font-size: 350%;

}

#playBtn:hover {
    filter: drop-shadow(0px 0px 10px#d39115);
    }

#stopBtn {
    color: #000000 !important;
    font-size: 350%;
   
}

#stopBtn:hover {
    filter: drop-shadow(0px 0px 10px#d39115);
    }

#deleteBtn {
    color: #000000 !important;
    font-size: 350%;
    
}

#deleteBtn:hover {
    filter: drop-shadow(0px 0px 10px#d39115);
    }

#recordBtn {
    color: #000000 !important;
    font-size: 350%;
}

#recordBtn:hover {
    filter: drop-shadow(0px 0px 10px#d39115);
    }

.hideIt {
    display: none !important;
}

.Erklaerung {
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
}