@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;900&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");*{box-sizing:border-box;margin:0;padding:0}body{font-family:"Roboto",sans-serif;background-color:#f3f4f5;color:#202020}.header{grid-area:header;display:flex;justify-content:center;align-items:center;text-align:center;margin-bottom:15px;padding:1rem;background-color:#f3f4f5;border-bottom:3px solid black}@media all and (min-width: 768px){.header{margin-bottom:30px;padding:1.2rem}}.header__title{font-family:"Roboto",sans-serif;font-size:1.5rem;color:#202020}@media all and (min-width: 768px){.header__title{font-size:2.2rem}}@media all and (min-width: 1200px){.header__title{font-size:2.5rem}}.header__image{height:45px;width:auto;margin-right:10px}@media all and (min-width: 768px){.header__image{margin-right:25px;height:50px}}.main{grid-area:main;padding:0 16px}@media all and (min-width: 768px){.main{width:100%;margin:0 auto;padding:0 30px}}@media all and (min-width: 1200px){.main{display:grid;grid-template-areas:"options instructions"
 "table instructions";grid-template-columns:1fr 350px;grid-template-rows:auto 1fr;max-width:1100px;position:relative}}@media all and (min-width: 768px){.options{grid-area:options}}.options__container{display:flex;justify-content:space-around}.table-container{padding-top:15px}@media all and (min-width: 768px){.table-container{padding-top:30px}}.player-template{margin-bottom:10px;min-height:190px}@media all and (min-width: 768px){.player-template{margin-bottom:20px;min-height:270px}}@media all and (min-width: 1200px){.player-template{min-height:300px}}.player-template__container{padding-bottom:10px;display:flex;align-items:center;grid-area:table}.player-template__title{font-size:1.5rem;margin-right:5px}.player-template__points{margin-left:10px;font-weight:bold;padding:5px;width:100px;display:flex;justify-content:center;align-items:center;background-color:white;border-radius:3px;color:#202020}.instructions{font-size:1rem}@media all and (min-width: 768px){.instructions{margin:0 auto;max-width:800px}}@media all and (min-width: 1200px){.instructions{grid-area:instructions;margin:inherit;min-width:350px}}.instructions__title{font-size:1.2rem;padding-bottom:3px;border-bottom:2px solid white;margin:0 30px 8px 0}.instructions__container{padding:10px 0}@media all and (min-width: 1200px){.instructions__container{padding:15px;margin-left:10px}}.instructions__text{padding-bottom:10px}@media all and (min-width: 1200px){.instructions__text{padding-bottom:15px}}.instructions__text--highlighted{position:relative}.instructions__text--highlighted::after{content:" ";background-color:#ffd300;height:40%;position:absolute;left:0;top:50%;margin-left:-0.2rem;width:calc(100% + 0.4rem);z-index:-1;opacity:60%}.instructions__list{padding-bottom:10px}@media all and (min-width: 1200px){.instructions__list{padding-bottom:15px}}.instructions__list-item{margin-left:20px}.instructions__image{height:150px;width:auto}@media all and (min-width: 1200px){.instructions__image{height:180px;display:block;margin:0 auto;border:1px solid blue}}.collapsed{display:none}.hidden{display:none}.modal{position:fixed;top:0;left:0;height:100%;width:100%;background-color:rgba(32,32,32,0.5);text-align:center;padding:0 15px;display:flex;justify-content:center;align-items:center}.modal__container{background-color:#f3f4f5;width:100%;max-width:600px;padding:30px;border-radius:3px}.modal__title{margin-bottom:15px}.modal__image{height:180px;width:auto;margin-bottom:15px}.hidden{display:none}.footer{grid-area:footer;padding:16px;color:#f8f8f8;background-color:#202020}@media all and (min-width: 768px){.footer{padding-left:80px}}.page{height:100vh;display:grid;grid-template-rows:auto 1fr auto;grid-template-areas:"header"
 "main"
 "footer"}.btn{height:34px;width:100%;display:flex;justify-content:center;align-items:center;font-size:1rem;font-family:"Roboto",sans-serif;background-color:#3a10e5;color:#f8f8f8;padding:8px;cursor:pointer;border:0;box-shadow:2px 2px 2px 0px rgba(0,0,0,0.5);border-radius:5px;transition:all 0.3s ease-out;margin-right:10px}.btn:last-child{margin-right:0}.btn:hover{background-color:#542df0}.btn--primary{background-color:#ffd300;color:#202020;font-weight:bold}.btn--primary:hover{background-color:#ffda29}.btn-disabled{background-color:#363636}.btn-disabled:hover{background-color:#363636}.btn-instructions{display:flex;justify-content:center;align-items:center;height:34px;width:100%;font-size:1rem;padding:8px;cursor:pointer;color:#202020;font-family:"Roboto",sans-serif;background-color:#f3f4f5;border:2px solid #202020;border-radius:2px;font-weight:bold;transition:all 0.3s ease-out;margin-bottom:10px}@media all and (min-width: 1200px){.btn-instructions{margin-left:10px}}.btn-instructions::before{content:"➜";margin-right:10px;font-size:1rem}.btn-instructions:hover{background-color:#202020;color:#f8f8f8}.card{height:140px;width:auto;margin-right:-60px}@media all and (min-width: 768px){.card{height:220px}}@media all and (min-width: 1200px){.card{height:250px}}