:root{--red:#e31e24;--black:#000;--white:#e3e3e3;--yellow:#fc0;--shadow:rgba(0,0,0,0.5) 0px 5px 5px 2px;--top-bar-height:75px}*{margin:0;padding:0;box-sizing:border-box}.wrapper{height:100vh;background-image:url(/images/gloves.jpg?fc3db2a2174bc6196395aa4996ea0610);background-position:bottom;background-size:cover;background-repeat:no-repeat;display:grid;grid-template-areas:"top-bar top-bar top-bar" "left main right" "left main right" "left main right";grid-template-columns:auto 1fr auto;grid-template-rows:auto auto 1fr auto;font-family:Saira Semi Condensed,sans-serif;font-weight:600}.wrapper:before{content:"";position:absolute;height:100%;width:100%;background:rgba(0,0,0,.5)}.wrapper #main{height:100%;display:grid;grid-area:main;grid-template-areas:"main-top" "main-center" "main-bottom";grid-template-columns:1fr;grid-template-rows:auto 1fr auto}.prompt{background:rgba(0,0,0,.8);color:#fff;padding:1rem;border-radius:1rem;border:1px solid #000;font-size:1.5rem}.hidden{display:none}#keyboard{-webkit-animation:fadeIn .4s ease-in;animation:fadeIn .4s ease-in;width:100%}@-webkit-keyframes fadeIn{0%{opacity:0;top:100px;transform:scale(.4)}to{opacity:1;top:0;transform:scale(1)}}@keyframes fadeIn{0%{opacity:0;top:100px;transform:scale(.4)}to{opacity:1;top:0;transform:scale(1)}}#top-bar{grid-area:top-bar;background:#000;z-index:5}#top-bar .wrap{display:flex;justify-content:space-between;align-items:center}#top-bar #clock,#top-bar h1{color:var(--white);font-variant:small-caps;font-size:3rem;padding:0 1rem}#top-bar #clock{min-width:180px;padding:0;margin-right:1rem}#left{grid-area:left;width:200px;z-index:5;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}#left img{width:168px;padding:1.5rem 1rem;transition:transform .5s ease-in-out}#right{z-index:5;grid-area:right;width:200px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;color:var(--white);font-size:1rem;text-align:right}#right #user-count{color:var(--red)}#right h1{padding:1rem}#back-button,#ready-button{border:none;padding:1rem 2rem;font-size:2rem;border-radius:0 0 41px 0;font-family:Saira Semi Condensed,sans-serif;font-weight:600;font-variant:small-caps;-webkit-animation:fadeIn .3s ease-in;animation:fadeIn .3s ease-in}.back-button-member{background:var(--red);color:var(--white)}#ready-button,.back-button-staff{background:var(--yellow);color:var(--black)}#back-button{border-radius:0 0 41px 0}#ready-button{border-radius:0 0 0 41px}#main-top{z-index:5;grid-area:main-top;text-align:center;color:var(--white)}#main-top h1{font-size:3rem;font-variant:small-caps}#main-center{z-index:5;margin:1rem 0;grid-area:main-center;align-content:center}#main-center,#main-center #input-wrap{display:flex;flex-direction:column;justify-content:center;align-items:center}#main-center #input-wrap h1{color:var(--white);font-size:3rem;font-variant:small-caps;-webkit-animation:fadeIn .3s ease-in;animation:fadeIn .3s ease-in}#main-center input{border:3px solid var(--white);margin-bottom:1rem;height:3rem;width:40rem;padding:0 1rem;border-radius:2rem;font-size:1.8rem;box-shadow:var(--shadow);-webkit-animation:fadeIn .3s ease-in;animation:fadeIn .3s ease-in}#main-center input:active,#main-center input:focus{outline:none;border:3px solid var(--red)}#main-center #button-wrap{margin:2rem;display:flex;align-items:center;justify-content:center;flex-wrap:wrap}#main-center #button-wrap img{height:500px;-webkit-animation:fadeIn .3s ease-in;animation:fadeIn .3s ease-in;filter:drop-shadow(0 5px 2px rgba(0,0,0,.5))}#main-center .staff-button,#main-center .user-button{position:relative;height:260px;width:260px;border-radius:130px;box-shadow:var(--shadow);display:flex;justify-content:center;align-items:center;margin:0 2rem;text-align:center}#main-center .staff-button h1,#main-center .user-button h1{line-height:3rem;font-variant:small-caps;font-size:3rem}#main-center #list-wrap{display:flex;justify-content:center}#main-center ol{max-height:675px;padding:0 3rem;position:relative;top:-100px;-moz-column-count:4;column-count:4;-moz-column-gap:20px;column-gap:20px}#main-center li{color:var(--white);font-size:3rem;font-variant:small-caps;margin:0 2rem;-webkit-animation:fadeIn .3s ease-in;animation:fadeIn .3s ease-in}#main-center .staff-button{background:radial-gradient(circle,#fc0 -20%,rgba(255,204,0,.6) 100%);color:var(--black)}#main-center .user-button{background:radial-gradient(circle,#e31e24 0,rgba(227,30,36,.7) 100%);color:var(--white)}#main-center .staff-button:first-child,#main-center .user-button:first-child{-webkit-animation:fadeIn .4s ease-in;animation:fadeIn .4s ease-in}#main-center .staff-button:nth-child(2),#main-center .user-button:nth-child(2){-webkit-animation:fadeIn .6s ease-in;animation:fadeIn .6s ease-in}#main-center .staff-button:nth-child(3),#main-center .user-button:nth-child(3){-webkit-animation:fadeIn .8s ease-in;animation:fadeIn .8s ease-in}#main-center .staff-button:nth-child(4),#main-center .user-button:nth-child(3){-webkit-animation:fadeIn 1s ease-in;animation:fadeIn 1s ease-in}#main-center .submitButton{border-radius:5rem;width:100%;border:1px solid #960000;outline:none;background:red;color:#fff;font-size:1.8rem;padding:.5rem}#main-center .submitButton:active,#main-center .submitButton:focus,#main-center .submitButton:hover{border-color:#470000;background:#c40000}#main-bottom{grid-area:main-bottom;z-index:5;display:flex;justify-content:center;padding-bottom:2rem}