@import"https://fonts.googleapis.com/css2?family=Exo+2&display=swap";:root{--color-primary: rgb(232, 227, 255)}html,body{height:100%;margin:0}body{display:flex;flex-direction:column;min-height:100vh}#root{flex:1 1 auto;display:flex;flex-direction:column}main{flex:1 1 auto;display:flex;flex-direction:column}#footer-root{flex-shrink:0}body{background:var(--color-primary);font-family:"Exo 2",Arial,Helvetica,sans-serif;font-size:20px;margin:0;min-height:100%;display:flex;flex-direction:column}@media screen and (max-width: 1024px){body{font-size:16px}}@media screen and (max-width: 376px){body{font-size:14px}}.btns{display:flex;justify-content:space-between;width:100%}.btn-container{display:flex}.btn--reset{margin:20px;display:block;font-family:"Exo 2",Arial,Helvetica,sans-serif;font-size:1.2rem;cursor:pointer;color:red;border:red .125em solid;text-decoration:none;padding:.25em 1.25em;border-radius:.25em;background:var(--color-primary);text-shadow:0 0 .125em hsl(0 0% 100% / .3),0 0 .45em var(--color-primary);box-shadow:inset 0 0 .25em red,0 0 .25em red;position:relative;transition:background-color .3s;width:200px;height:45px}.btn--reset:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;box-shadow:0 0 .5em .25em red;transition:all .3s}.btn--reset:hover,.btn--reset:focus{background:red;color:var(--color-primary);text-shadow:none}.btn--reset:hover:after{opacity:1}.btn--reset>span{position:absolute;background:red;transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;animation:animate .5s linear infinite}@keyframes animate{0%{width:0;height:0;opacity:.5}to{width:200px;height:200px;opacity:0}}.btn--dark{margin:20px;display:block;font-family:"Exo 2",Arial,Helvetica,sans-serif;font-size:1.2rem;cursor:pointer;color:#00008b;border:darkblue .125em solid;text-decoration:none;padding:.25em 1.25em;border-radius:.25em;background:var(--color-primary);text-shadow:0 0 .125em hsl(0 0% 100% / .3),0 0 .45em var(--color-primary);box-shadow:inset 0 0 .25em #00008b,0 0 .25em #00008b;position:relative;transition:background-color .3s;width:200px;height:45px}.btn--dark:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;box-shadow:0 0 .5em .25em #00008b;transition:all .3s}.btn--dark:hover,.btn--dark:focus{background:#00008b;color:var(--color-primary);text-shadow:none}.btn--dark:hover:after{opacity:1}h1{text-align:center;font-size:50px;margin-top:0}.selections{display:flex;justify-content:center}.selection{background:none;outline:none;border:none;font-size:100px;cursor:pointer;margin:0 20px;opacity:.5;transition:all .3s}.selection:hover{opacity:1;transform:scale(1.15)}.scores{display:grid;grid-template-columns:repeat(2,1fr);font-size:30px;margin-top:30px}.result-column{display:flex;flex-direction:column;align-items:center;gap:.5rem}.score{font-size:150%;margin-left:5px}.result{opacity:.3;font-size:40px;padding:10px}.result.winner{font-size:50px;padding:0;opacity:1}@media screen and (max-width: 1024px){.btn--reset,.btn--dark{margin:16px;font-size:1rem;padding:.2em 1em;width:160px;height:35px}h1{font-size:40px}.selection{font-size:80px;margin:0 16px}.scores{font-size:24px;margin-top:24px}}@media screen and (max-width: 768px){.btn--reset,.btn--dark{margin:12px;padding:.2em .5em;font-size:.8rem;width:100px;height:30px}h1{font-size:32px}.selection{font-size:45px;margin:0}}@media screen and (max-width: 428px){.btns{flex-direction:column;align-items:center}.btn--dark{margin:8px}.btn--reset{margin:8px auto}.btn-container{justify-content:center}h1{font-size:24px}.selection{font-size:36px}.scores{font-size:20px;margin-top:20px}.score{margin-left:0}}@media screen and (max-width: 376px){.selection{font-size:30px}}@media screen and (max-width: 324px){.scores{font-size:16px;margin-top:16px}}.rules-modal{display:none;background:#00008b;border:4px solid var(--color-primary);border-radius:20px;color:#fff;display:block;padding:20px;position:fixed;top:50%;transform:translateY(-50%);width:max-content;z-index:1;max-height:80vh;overflow-y:auto}.rules-modal.open{display:block}h2{text-align:center;color:#fff;margin:0}.rules{display:flex;justify-content:space-around;align-items:center}.rules-list{list-style:none;margin:0;padding:20px}.icon{font-size:150%}.modal-image{width:300px;padding-left:20px}.rules-text{font-style:italic;text-align:center;font-weight:700;padding-top:20px;margin:0}.rules-text>p{margin:0 auto}.btn{margin:40px auto 20px;display:block;font-family:"Exo 2",Arial,Helvetica,sans-serif;font-size:1.2rem;cursor:pointer;color:var(--color-primary);border:var(--color-primary) .25em solid;text-decoration:none;padding:.25em 1.25em;border-radius:.25em;background:#00008b;text-shadow:0 0 .125em hsl(0 0% 100% / .3),0 0 .45em var(--color-primary);box-shadow:inset 0 0 .5em 0 var(--color-primary),0 0 .5em 0 var(--color-primary);position:relative;transition:background-color .3s}.btn:before{pointer-events:none;content:"";position:absolute;background:var(--color-primary);top:120%;right:0;width:100%;height:100%;transform:perspective(1em) rotateX(40deg) scaleY(.35);filter:blur(1em);opacity:.7}.btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;box-shadow:0 0 2em .75em var(--color-primary);transition:all .3s}.btn:hover,.btn:focus{background:var(--color-primary);color:#00008b;text-shadow:none}.btn:hover:before,.btn:focus:before{opacity:1}.btn:hover:after,.btn:focus:before{opacity:1}.game-scores-modal{display:none;background:#00008b;border:4px solid var(--color-primary);border-radius:20px;color:#fff;padding:40px;position:fixed;top:50%;transform:translateY(-50%);width:max-content;z-index:1}.game-scores-modal.open{display:block}.game-scores{display:flex;justify-content:center;align-items:center;gap:30px;font-size:24px;margin-top:20px}.player-game-score{color:#01cf01}.computer-game-score{color:red}.player-game-score,.computer-game-score{margin-left:5px}@media screen and (max-width: 1024px){.rules-modal.open{padding:16px;max-height:70vh}.modal-image{width:200px;padding-left:16px}.btn{font-size:1rem}}@media screen and (max-width: 768px){.rules-modal.open p{max-width:320px}.rules{margin:0 auto;flex-direction:column;max-width:360px;text-align:center}.modal-image{padding-left:0}}@media screen and (max-width: 428px){.rules-modal.open{padding:8px}.rules-modal.open p{padding:10px}.rules{max-width:300px}.rules-list{padding:10px}.rules-text{padding-top:10px}.btn{font-size:.8rem;margin-top:16px}.game-scores{flex-direction:column;gap:0}}@media screen and (max-width: 376px){.rules-modal.open{padding:5px}.rules-modal.open p,.rules{max-width:280px}.game-scores-modal{padding:20px}}@media screen and (max-width: 324px){.rules-modal.open p,.rules{max-width:240px}.game-scores-modal{padding:12px}}.overlay.open{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;background-color:#000;display:block;opacity:.5}.overlay{display:none}footer{border-top:1px solid rgb(0,255,191);color:#fff;background:#00008b;display:flex;justify-content:center;align-items:center;margin-top:auto;padding:10px}footer p{margin:0;text-align:center}.github-link i{width:max-content;border-radius:10px;font-size:20px;transition:all .5s;margin-left:10px;color:#fff}.github-link i:hover{transform:scale(1.2);color:var(--color-primary)}