html, body {
    height: 100%;
    margin: 0; padding: 0;
}

body {
    background-color:#ffffff;
}

#controls {
    font-family: monospace;
    background-color:#ffffff;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 3;
}

#beets {
    font-family: monospace;
    background-color:#ffffff;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 3;
}

#waifu {
    display: block;
    height: 100%;
    #margin-left: auto;
    #margin-right: auto;
    padding: 0;

    z-index: -10;
    opacity: 0;
}

#waifu.loaded {
    opacity: 1;
    animation-name: fadein;
    animation-duration: 0.5s;    
    -webkit-animation-name: fadein;
    -webkit-animation-duration: 0.5s;
}

#waifuColour {
    opacity: 0.7;
    mix-blend-mode: hard-light;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#blackout {
    background-color: #000; 
    display: none;
    pointer-events:none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

#preloader {
    background-color: #FFF; 
    width: 100%;
    height: 100%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-family: monospace;
    font-size: 30pt;
    
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

#preloader.loaded {
    opacity: 0;
    animation-name: fadeout;
    animation-duration: 3s;    
    -webkit-animation-name: fadeout;
    -webkit-animation-duration: 3s;
}

@keyframes fadein {
    from {opacity: 0;}
    to {opacity: 1;}
}
@keyframes fadeout {
    from {opacity: 1;}
    to {opacity: 0;}
}