style.css

html, body
{
    width: 100%;
    height: 100%;
}

body
{
    margin: 0;
    overflow: hidden;
}

#background, #foreground, #foreground2, #foreground3
{
    position: absolute;
    left: 0;
    top: 0;
}

#background
{
    background-color: white;
}

#ball1, #ball2
{
    position: absolute;
    fill:rgb(255, 217, 0);
    r: 10px;
}

#ball12, #ball22
{
    position: absolute;
    fill:red;
    r: 10px;
}

#ball13, #ball23
{
    position: absolute;
    fill:blue;
    r: 10px;
}

#ball0, #ball02, #ball03
{
    position: absolute;
    fill: black;
    r: 15px;
}

#arm1, #arm2, #arm12, #arm22, #arm13, #arm23
{
    position: absolute;
    stroke-width: 5px;
    stroke: slategray;
}

#start, #draw
{
    position: absolute;
    top: 88%;
    
    height: 8%;
    width: 20%;
    border: 0;
    box-shadow: none;
    border-radius: 0px;
}

#start
{
    left: 20%;
}

#draw
{
    left: 60%;
}

#ui
{
    position: absolute;
    background-color: rgb(189, 205, 224);
    width: 40%;
    height: 70%;
    top: 15%;
    left: 1000px;
}

#Theta1, #Theta2, #dTheta1, #dTheta2
{
    align-self: center;
    text-align: center;
    position: absolute;
    width: 20%;
    height: 5%;
    left: 10%
    
}


#Theta1-2, #Theta2-2, #dTheta1-2, #dTheta2-2
{
    align-self: center;
    text-align: center;
    position: absolute;
    width: 20%;
    height: 5%;
    left: 40%
}

#Theta1-3, #Theta2-3, #dTheta1-3, #dTheta2-3
{
    align-self: center;
    text-align: center;
    position: absolute;
    width: 20%;
    height: 5%;
    left: 70%
}

/**/

#Theta1
{
    top: 15%;
} 
#Theta2
{
    top: 35%
}
#dTheta1
{
    top: 55%;
}
#dTheta2
{
    top: 75%;
}
#Theta1-2
{
    top: 15%;
} 
#Theta2-2
{
    top: 35%
}
#dTheta1-2
{
    top: 55%;
}
#dTheta2-2
{
    top: 75%;
}
#Theta1-3
{
    top: 15%;
} 
#Theta2-3
{
    top: 35%
}
#dTheta1-3
{
    top: 55%;
}
#dTheta2-3
{
    top: 75%;
}

#yp1, #yp2, #yv1, #yv2
{
    position: absolute;
    left: 10%;
}
#yp1
{
    top: 10%;
} 
#yp2
{
    top: 30%;
} 
#yv1
{
    top: 50%;
} 
#yv2
{
    top: 70%;
}
#rp1, #rp2, #rv1, #rv2
{
    position: absolute;
    left: 40%;
}
#rp1
{
    top: 10%;
} 
#rp2
{
    top: 30%;
} 
#rv1
{
    top: 50%;
} 
#rv2
{
    top: 70%;
}
#bp1, #bp2, #bv1, #bv2
{
    position: absolute;
    left: 70%;
}
#bp1
{
    top: 10%;
} 
#bp2
{
    top: 30%;
} 
#bv1
{
    top: 50%;
} 
#bv2
{
    top: 70%;
}