style.css

body, html, #main {
    height:100%;
}

#sidebar {
    overflow-y:scroll;
}

#expressionRendering {
    font-size: 1.5em !important;
    margin:1em;
}

@media only screen and (min-width : 960px) {
    a[href='#sidebar'] {
        display: none;
    }
}

#plotBox {
    margin: 0 auto;
}

.navbar-group{
    text-align: center;
}

.nav-title{
    font-size: 24px;
    margin-bottom: 10px;
}

#loadingScreen {
    position:fixed;
    text-align:center;
    width:100%;
    height:100%;
    z-index:100000;
    background-color:rgba(0,0,0,.2);

    justify-content:center;
    align-content:center;
    flex-direction:column;
}

.modal {
    display:flex !important;
    opacity:0 !important;
    z-index:100;

    transition: width 0.4s, height 0.4s, top 0.4s, left 0.4s, opacity 0.5s;
    width:0px;
    height:0px;
    top:50px;

    left:calc(100% - 100px);
}

.modal.active {
    width:100% !important;
    height:100% !important;
    left: 0 !important;
    top: 0 !important;
    opacity:1 !important;
}

@keyframes fadeIn {
    0%, 40% { opacity: 0; }
    100% { opacity: 1; }
}

.modal.active .modal-overlay {
    animation: fadeIn 1s ease-in;
    animation-fill-mode: forwards;
}