#title {
    position: absolute;           
    left: 50%;                     
    top: 4%;                     
    width: 75%;
    height: 8%;
    transform: translate(-50%, 0);
    margin: 0;
    padding: 0;
    background-image: url(../img/title-desktop.svg);
    background-repeat: no-repeat;
    background-size: 60% 100%;
    background-position: center;
    /*border-bottom: 2px dashed #334455;*/
}
#container {
    position: absolute;           
    left: 50%;                     
    top: 55%;                     
    width: 92%;
    height: 80%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
    background-color: rgba(200, 200, 200, 0.9);
    border: 10px solid #aabbcc;
}
#paper {
    position: absolute;           
    left: 39%;                     
    top: 50%;                     
    width: 75%;
    height: 92%;
    transform: translate(-50%, -50%);
    margin-left: auto;
    margin-right: auto;
    box-shadow: 10px 10px 5px #888888;
    background-color: rgba(240, 240, 240, 0.8);
    border: 5px solid rgb(100, 150, 180);
}
#symbols {
    position: absolute;           
    left: 88%;                     
    top: 50%;                     
    width: 20%;
    height: 90%;
    transform: translate(-50%, -50%);
    vertical-align:middle;
    margin: 0;
    padding: 0;
    padding-right: 20px;
    background-color: rgb(200, 200, 200);
    box-shadow: 10px 10px 5px #888888;
    border: 3px solid #ff9900;
    line-height: 1em;
    font-size: 3em;
    font-family: Courier New;
    text-align: right;
}
#note {
    display: block;
}
#do_fixed {
    display: block;
}
#do_movable {
    display: block;
}
#halfsteps {
    display: block;
}
circle {
    stroke: rgb(95, 176, 228);
    stroke-width: 2;
    fill: rgba(205, 246, 255, 0.3);
}
line {
    stroke: rgb(60, 60, 60);
    stroke-width: 4px;
    shape-rendering: crispEdges;
}
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    position: relative;
}
* {
    box-sizing: border-box;
}