:root {
    font-family: Arial, Helvetica, sans-serif;
    
    --shape-color: white;
    --point-color: gray;
    /* For the degree circles */
    --radius: 30px;

    --footer-height: 3vh;
}
:root.picking {
    --shape-color: #2d3059 !important;
    --point-color: rgb(54, 51, 73) !important;
}

body {
    background-color: rgb(36, 36, 36);
    margin: 0;
    overflow: hidden;
    transition: background-color ease-in-out .4s;
}

main {
    width: 100vw;
    height: calc(100vh - var(--footer-height));
}
#canvas {
    width: 100%;
    height: 100%;
    position: relative;
}


footer {
    z-index: 10;
    opacity: .7;
    
    position: relative;
    bottom: -7px;


    border-radius: 6px 6px 0;

    background-color: white;
    width: calc(100vw - 10px);
    height: var(--footer-height);
    padding: 4px 5px;

    transition: all ease-in-out .15s;
}
footer:hover {
    bottom: 5px;
    opacity: 1;
}

footer > * {
    height: 100%;
}


footer * {
    display: inline-block;
    margin: 0 1px;
}
footer .alt {
    transform: translateY(-30%);
}


/* No link underline */
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }