html,body{width:100%;height:100%;padding:0;margin:0;overflow:hidden;font-family:Courier Prime,monospace}#root{width:100%;height:100%;background-color:#000;color:#fff;position:relative}main{width:100%;height:100%}main .cover{width:100%;height:100%;background-size:cover;background-repeat:no-repeat}@keyframes rotateAndAppear{0%{transform:scale(0) rotate(-90deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}main .photo-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;transform-origin:center center;animation:rotateAndAppear 1.5s ease forwards}main .photo{width:80%;background-color:#d3d3d3;background-size:cover;background-position:center;padding:20px;margin:auto;box-shadow:0 4px 8px #0003;position:absolute;top:0;left:0;right:0;bottom:0;transform:rotate(-10deg);transition:transform .5s ease,box-shadow .5s ease;transform-origin:center center}main .photo:hover{transform:rotate(0);box-shadow:0 12px 24px #0000004d}.controls{position:absolute;top:0;left:0;right:0;padding:16px;display:flex;align-items:center;justify-content:space-between}.controls button{text-shadow:0 0 12px rgba(0,0,0,.8)}.controls .music{display:block;width:32px;height:32px;margin-left:.5em}.popup{position:absolute;bottom:0;width:100%;padding:16px;background:linear-gradient(to bottom,#fff0,#000)}button{display:inline-flex;align-items:center;padding:1em;border-radius:.5em;font-size:1.5em;color:inherit;font-family:inherit;border:none;outline:none;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.options{padding-top:120px;height:120px;line-height:120px;text-align:center}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.slide-up-animation{animation-name:slideUp;animation-duration:.8s;animation-fill-mode:forwards}