html {font-size:62.5%;}
body {background-color:#222;box-sizing:border-box;color:#fff;font-family:'Vollkorn',serif;font-size:1.9rem;margin:0;padding:1rem;}

html, body {height:100%;}

main {display:flex;height:calc(100% - 6rem);max-height:calc(100% - 6rem);justify-content:center;align-items:center;}
main:before {background:transparent url('https://cards.scryfall.io/art_crop/front/3/6/36506caa-2630-46ec-9aa0-e1885749ad90.jpg?1592709177') top center no-repeat;background-size:cover;content:'';opacity:0.1;position:absolute;top:0;bottom:0;left:0;right:0;z-index:-1;}

main > :first-child {padding-bottom:4rem;padding-right:25vw;}

fieldset {border:none;margin:0;padding:1rem 0;}
fieldset#playerlist:before {content:'Players';display:block;opacity:0.5;}

.cubeShow {display:none;}

input#link {background-color:rgba(255,255,255,0.125);border:none;box-sizing:border-box;color:#fff;font-size:0.8em;height:4rem;padding:1rem 1.5rem;width:100%;}

input[type="number"] {margin-bottom:0.5rem;margin-right:0.75rem;width:6rem;}
input[type="file"] {margin-top:0.5rem;padding-left:7.25rem;}

h2 {margin:3rem 0 1rem;}
input[type="submit"] {height:2em;line-height:2em;margin:3rem 0 1rem;padding:0 1em;}

#stats {margin-top:3rem;}

#info {display:flex;justify-content:space-between;position:absolute;top:2vw;left:3.5vw;right:3.5vw;}
#timer {font-family:sans-serif;font-size:0.9em;}
#timer.paused {opacity:0.4;}

#cards {display:flex;flex-wrap:wrap;justify-content:center;min-height:6rem;min-width:6rem;}
#cards:empty {background:transparent url('https://mtgplay.thethirdman.de/img/loader.svg') center center no-repeat;background-size:6rem;}
#cards[data-count]:empty:before {content:'waiting for other players ('attr(data-count)')';margin-top:10rem;}

#zoom {background-color:rgba(255,255,255,0.3);box-shadow:0 0 20vw 10vw rgba(0,0,0,0.75) inset;display:flex;align-items:center;justify-content:center;position:fixed;top:0;bottom:0;left:0;right:0;}
#zoom:empty {display:none;}

#cards img {cursor:pointer;border-radius:0.75vw;margin:0.5vw;width:12.75vw;}
#cards img.marked {box-shadow:0 0 0 4px #fff;}
#zoom img {border-radius:2vw;margin:1vw 1vw 3vw;pointer-events:none;}
#cards img.foil, #zoom img.foil {animation:rainbow 6s steps(36) infinite;}

#cards[data-cardcount="15"] img,
#cards[data-cardcount="16"] img {width:11.125vw;}
#cards[data-cardcount="17"] img,
#cards[data-cardcount="18"] img {width:9.875vw;}

@keyframes rainbow {
 from { filter:hue-rotate(0deg) saturate(1) grayscale(0); }
  25% { filter:hue-rotate(45deg) saturate(2) grayscale(0.25); }
  50% { filter:hue-rotate(0deg) saturate(1) grayscale(0); }
  75% { filter:hue-rotate(-45deg) saturate(2) grayscale(0.25); }
 100% { filter:hue-rotate(0deg) saturate(1) grayscale(0); } 
}

footer {font-family:sans-serif;font-size:1.5rem;text-align:center;position:fixed;bottom:1.5rem;width:100%;}
footer a {color:#fff;}