#day-text,#endgame,#intro,#left,#timer,#top{top:0;left:0;position:absolute}#game,body,html{margin:0;background:#000}*{font-family:monospace}#day-text,#endgame,#intro{bottom:0;right:0;pointer-events:none;background-color:#000;transition:opacity .5s;color:#fff;text-align:center;padding:100px;font-size:5rem;z-index:500}#day-text,.fade-out{opacity:0}.fade{opacity:1!important}#endgame{font-size:2rem;opacity:0}#end{position:absolute;width:100%;bottom:0}.show{opacity:1!important;pointer-events:all!important}#game{width:1000px;height:750px;margin:50px auto;background-color:#ddd;display:flex;align-items:flex-end;position:relative}.title{height:20px;width:100%;text-align:center;font-size:20px;background-color:#74d2e7;padding-top:8px}#left,#top{background:#000}#left{bottom:0;width:calc(50% - 500px)}#top{height:50px;right:0}.grabbing{cursor:grabbing}.table{height:50%;width:100%;display:flex}.table .report-section,.table .work-table{width:50%;height:100%}.table .work-table{background-color:#48d62b;display:flex;position:relative}.table .work-table .page:hover{cursor:grab}.table .report-section .in-progress .holder .page,button{cursor:pointer}.table .report-section .in-progress{background-color:#74d2e7;display:flex;height:185px;justify-content:center;align-items:center}.table .report-section .in-progress .holder{margin:8px;background:#702f8a;width:100px;height:140px;border:2px inset;text-align:center}.table .report-section #final{background-color:#53c7e1;height:162px;display:flex;align-items:center}.table .report-section #final .page{transition:250ms}.table .report-section #final .page.cover{z-index:1}.page{height:140px;width:100px;position:absolute;background-color:#fff;box-shadow:3px 3px 5px 0 rgba(0,0,0,.75);border:1px solid #000;text-align:center;user-select:none;text-transform:capitalize}.page svg{pointer-events:none;width:75%;color:#444}.page.v-1{background:#fbb756}.page.v-2{background:#f7addd}.page.v-3{background:#86da98}.page.v-4{background:#e5888a}#timer{height:10px;width:100%}#timer.done{animation:done;animation-duration:.5s;animation-iteration-count:infinite;animation-direction:alternate;animation-timing-function:ease-in-out}.enter,.leave{animation-name:guy-enters;animation-duration:2s;animation-fill-mode:both}@keyframes done{from{background-color:#1062a4}to{background-color:#1a8ce9}}.green{background-color:#29873d}.yellow{background-color:#fcc600}.red{background-color:#cb2c30}#guy{border-radius:50%;position:absolute;background-color:#000;width:400px;height:900px;top:-100px}#tie-bottom,#tie-bottom:after{width:0;height:0;border:70px solid transparent}#tie-top{margin-left:100px;margin-top:100px;width:0;height:0;border-style:solid;border-width:50px 100px 0;border-color:#fff transparent transparent}#tie-bottom{margin-left:130px;border-bottom:300px solid #fff;position:relative;top:-100px}#tie-bottom:after{content:'';position:absolute;left:-70px;top:300px;border-top:70px solid #fff}#text-container{position:absolute;left:500px;top:50px;width:450px;height:300px;font-size:2rem}.transition{transition:all .5s}.leave{animation-direction:reverse}@keyframes guy-enters{0%{left:-500px;top:-100px}12%,37%,75%{top:-120px}25%,50%{top:-100px}100%{left:0;top:-100px}}.placeholder{transform-origin:top left;transform:translate(25px,5px) rotate(60deg);font-size:20px;color:rgba(255,255,255,.2);text-align:left;position:absolute;pointer-events:none}button{border:0;box-shadow:none;border-radius:0;background:#1377c8;padding:.5rem;color:#fff}button:hover{background:#116cb6}button:focus{background:#0f61a4}