body {
    background-color:#ffffff;
}

#waifu {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -10;
    
    opacity: 0;
    
    #-webkit-transform: scale(3);
    #transform: scale(3);
    #-webkit-transform-origin: top left;
    #transform-origin: top left;
}

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

.waifuImg {
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
    width: 100%;
    height: 100%;
    display: none;
}

.waifuImg.active {
    display: block;
}

#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;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#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;}
}