html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; } body { background-color:#ffffff; } .ui { background-color:#ffffff; font-family: monospace; position: absolute; left: 50%; transform: translate(-50%, 0); z-index: 3; } #controls { bottom: 0px; } #beets { top: 0px; } .beetView { float: left; } #beetAccent { font-size: 50px; opacity: 1; } #beetAccent.fade { animation-name: fadeout; animation-duration: 0.2s; opacity: 0; } #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; } #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;} }