body{
}
#container{
position: absolute;
width: 800px;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 25px;
    color: black;

}
#canvas1{
       transform: translate(-50%); /*اخليها فنص الشاشه*/
    position: relative;
text-align: center;
top: 50%;
left: 50%;
    color: black;

}
.controls{
    position: absolute;
    z-index: 10; /*متختفيش وورا الكلب*/
    top: 50px;
    left: 50%;
    transform: translate(-50%); /*اخليها فنص الشاشه*/
  width: 80px;
    height: 70px;
        color: black;

}
.controls ,select ,option{
    font-size: 20px;

}
#slider {
    width: 100%;
        color: black;


}
p{
    color: black;
}
.label{
    position: absolute;
    margin-left: -200px;
}