body {
    background-color:#ffffff;
    height: 100%;
    min-height: 100%;
    margin: 0px;
}

#waifu {
    width: 100%;
    
    #position: absolute;
    padding: 0;
    top: 0;
    left: 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: -5;
}

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

#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;
    pointer-events:none;
    animation-name: fadeout;
    animation-duration: 3s;    
    -webkit-animation-name: fadeout;
    -webkit-animation-duration: 3s;
}

#controls {
    font-family: monospace;
    background-color:#ffffff;
    width:800px;
    #position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
}

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