#box,
#sidePanel {
    /*puts the box and side panel side by side*/
    display: inline-block;

    /*makes the box and side panel aligned at the top*/
    vertical-align: top;
}

#box {
    /*gives dimensions and a border to the box*/
    width: 350px;
    height: 350px;
    border: 3px solid black;
    background-color: blue;

    /*puts empty space to the right of the box to separate it from the side panel*/
    margin-right: 30px;
    position: relative;
}

.ball {
    width: 25px;
    height: 25px;
    border-radius: 10px;
    position: absolute;
}
h1 {
    color:blue;
    font-family: cursive;
}
#realAmount {
    display:none;
}
#restart {
    display:none;
    border-radius: 300px;
}
body {
    background-color: yellow;
}
#off {
    display:none;
}
button {
    border-radius: 300px;
    color:yellow;
    background-color: blue;
}
#resultParagraph {
    display:block;
}