body{
    background-color: black;
}

#formula {
    color: white;
    margin-left:30px;
    font-size:20px;
    white-space:nowrap;
}
.box {
    display:flex;
    border: 2px solid white;
    margin-left: 200;
    width: 700px;
    height: 300px;
    align-items: center;
    justify-content: center;
}

#lengthValue{
    color: wheat;
}
label{
    color:white;
    margin-left:10px;
    
}
.animation {
    border: 2px solid whitesmoke;
    width: 50%;
    height: 100%;
    position: relative;
}
.control {
    width:50%
}
.pendulum {
    position: relative;
    width:100%;
    height: 100%;
    transform-origin: 50% 30px;

}
.string{
    width: 3px;
    height: 150px;
    background-color: white;
    position : absolute;
    top: 30px;
    left: 50%;
}
.bob {
    width : 30px;
    height: 30px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    top:180px;
    left: calc(50% - 13px);
}

#pauseButton {
    background-color: cadetblue;
    color: wheat;
    border: 1px solid white;
    margin-left: 30px;
    margin-top: 40px;
}
#period{
    color: white;
}