* {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

#container {
    height: 100vh;
    position: relative;
}

#canvas {
    height: 100%;
}

nav {
    position: absolute;
    top: 10px;
    left: 10px;
}

.absolute {
    position: absolute;
    top: 0;
    left: 0;
}

.plot {
    position: absolute;
    top: 2vh;
    right: 2vw;
    width: 20vw;
    height: 10vw;
}

.sliders {
    position: absolute;
    top: 20vh;
    left: 2vw;
    width: 20vw;
}

#formula {
    position: absolute;
    top: 71.5vh;
    width: 90vw;
}

.score {
    position: absolute;
    top: 7vh;
    left: 2vw;
    width: 20vw;
}

.lightbox {
    padding: 2em;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    z-index: 10;
    width: 50%;
    height: 40%;
    background-color: #BBB;
    transition: all 1s;
}

.lightbox.active {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}