:root{--primary-color: #5A9CFF;--secondary-color: #423966;--border-color: #747475;--main-bg: #FFFFFF;--text-color: #2c3e50}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:var(--text-color)}nav{padding:30px}nav a{font-weight:700;color:var(--text-color)}nav a.router-link-exact-active{color:#42b983}label{font-size:1.4rem;margin-top:1rem;margin-bottom:.2rem;display:block}input{font-size:1.4rem;padding:.4rem .8rem;border-radius:.6rem;border:2px solid var(--border-color);margin-bottom:1rem;color:#222}button{font-size:1.4rem;padding:.6rem 1.6rem;border-radius:.8rem;border:2px solid var(--border-color);margin:.4rem;cursor:pointer;transition:all .2s;background-color:transparent;box-shadow:2px 2px 4px #0003}button:hover{background-color:#333;color:#fff}button:active{box-shadow:0 0 #0003;transform:translateY(2px)}#default-layout .header{display:flex;justify-content:space-between}.bandarole{position:fixed;display:block;bottom:0;left:0;width:200px;height:200px;overflow:hidden;text-decoration:none}.bandarole .text{background-color:#333;color:#ccc;font-size:1.6rem;text-transform:uppercase;padding:10px 0;transform:rotate(45deg) translateY(130px) translate(50px)}.bandarole .gif{position:absolute;top:0;left:0;height:200px;width:200px;z-index:2;background-image:url(https://media4.giphy.com/media/wFmAaA333ZXOwTA7d8/giphy.gif?cid=de9bf95exiehfty0u3ykk3qnpihs4f682cxg9kt4fs75u8d1&amp;ep=v1_gifs_search&amp;rid=giphy.gif&amp;ct=g);background-repeat:no-repeat;background-position:50% 50%;background-size:cover;transform:translateY(200px);transition:transform .25s ease-out}.bandarole:hover .gif{transform:translateY(0)}.table{position:absolute;top:20vh;left:20vw;right:20vw;height:25vh;border:5px solid #AAA;border-radius:100px;background-color:#fefefe;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center}#results{display:flex;gap:20px;justify-content:center}#results .result{display:flex;flex-direction:column;align-items:center}#results .result .bar{position:relative;width:30px;height:80px;background-color:#ccc}#results .result .bar .perc{position:absolute;bottom:0;left:0;right:0;background-color:var(--primary-color)}#results .result .bar .num{font-weight:700;position:absolute;bottom:0;left:0;right:0;font-size:1.2rem}#results .result .subline{font-size:.8rem}#results .avg{display:flex;align-items:center;font-size:2rem}#results .avg img{height:34px;fill:var(--text-color)}.result-card{transition:transform .5s;transform-style:preserve-3d;position:relative;width:60px;height:90px;margin-bottom:.5rem}.result-card.show{transform:rotateY(180deg)}.result-card .face{position:absolute;height:100%;width:100%;backface-visibility:hidden;border-radius:10px;vertical-align:baseline;font-size:2rem;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 3px #0003;border:2px solid #999}.result-card .back{background-color:#f2f2f2;color:#eee}.result-card.voted .back{background-color:#333}.result-card .front{background-color:#f2f2f2;transform:rotateY(180deg)}.player{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center}.avatar{display:inline-block;width:40px;height:40px;border:2px solid #AAA;border-radius:50px;background-color:#ccc;box-shadow:0 5 10px #0003;padding-top:10px}.username{font-weight:700}#room{position:relative;perspective:1200px;height:calc(100vh - 100px)}#room .room-url{position:absolute;bottom:0;width:100%}#room .players{position:absolute;top:5vh;left:12vw;right:12vw;height:60vh}#room .vote-buttons{position:fixed;bottom:40px;left:20px;right:20px;text-align:center;display:flex;justify-content:center}#room .vote-buttons a{display:flex;justify-content:center;align-items:center;font-size:2rem;width:60px;height:90px;margin:5px;cursor:pointer;transition:all .2s;border-radius:5px;text-align:center;text-decoration:none;border:2px solid var(--border-color);color:#222}#room .vote-buttons a:hover{transform:translateY(-10px)}#room .vote-buttons a.voted{background-color:#333;color:#ccc;transform:translateY(-20px)}.user-icon{vertical-align:middle;margin-right:.5rem;margin-bottom:3px}.room-url>div{cursor:pointer;display:flex;justify-content:center;align-items:center;gap:5px;fill:#0ea70e}
