html, body{
    margin: 0;
    background-color: black;
    font-family: 'Helvetica', 'Calibri';
    font-size: 20px;
}
#layout {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
#layout canvas {
    align-self: center;
}
#layout div {
    align-self: center;
    text-align: center;
}
/*
The loaders use CSS custom properties (variables) to control the attributes of the loaders
*/
:root{
    --loader-width: 70px;
    --loader-height: 70px;
    --loader-color-primary: #ae2727;
    --loader-color-secondary: #eee;
    --line-width: 3px;
    --animation-duration: 2s;
    --loader-initial-scale: 0.1;
}
.loader,.loader:before,.loader:after{
    box-sizing: border-box;
    flex-grow: 0;
    flex-shrink: 0;
}
/*
In order to get optimal results, please only change the 
variables above and don't change anything in the actual loader code
*/
@keyframes circle-loader {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loader.simple-circle {
    transform-origin: center center;
    border: var(--line-width, 4px) solid var(--loader-color-secondary, #fff);
    border-right-color: var(--loader-color-primary, #00f);
    width: var(--loader-width, 100px);
    height: var(--loader-height, 100px);
    border-radius: 50%;
    animation: circle-loader var(--animation-duration, 1s) infinite ease-out;
}