@import url(https://fonts.googleapis.com/css2?family=Cute+Font&display=swap);@font-face{font-family:Handlee;font-style:normal;font-weight:400;src:url(http://rockpaperscissors.katieloesch.co.uk/static/media/handlee-regular.8ddf7e17e3acd9d2582a.woff) format("woff")}:root{--black:#000;--white:#fff;--offwhite:#ffe7ba;--orange:#b38159;--red:#d4380d;--red-dark:#732727;--rust:#b83700}@supports (color:rgb(0 0 0/0)){:root{--red-dark:#892b2b}}*{box-sizing:border-box;font-family:Handlee,Trebuchet MS,Lucida Sans Unicode,Lucida Grande,Lucida Sans,Arial,sans-serif;margin:0;padding:0}body{align-items:center;background:#e68333;background:radial-gradient(circle,#e68333 0,#b38159 0,#e68333 100%);display:flex;flex-direction:column;justify-content:space-around;min-height:100vh;min-width:100vw;@media screen and (max-width:600px){justify-content:center;min-height:auto}}button:hover{cursor:pointer}.App{align-items:center;display:flex;flex-direction:column;justify-content:space-between;min-height:100vh;width:100%}@media screen and (max-width:1500px){.App{justify-content:center}}@media screen and (max-width:900px){.App{align-items:center;height:auto;justify-content:flex-start}}.App .title-container h1{color:var(--black);font-size:3.2rem;margin-bottom:80px}@media screen and (max-width:600px){.App .title-container h1{font-size:2rem}}@media screen and (max-width:500px){.App .title-container h1{margin-bottom:45px;margin-top:15px}}.App .game-container{align-items:center;display:flex;flex-direction:row;height:200px;justify-content:space-between;margin-bottom:100px}@media screen and (max-width:500px){.App .game-container{gap:20px;margin-bottom:25px}}.App .game-container .computer-section,.App .game-container .player-section{border-radius:10px}.App .game-container .computer-section .computer-score,.App .game-container .computer-section .player-score,.App .game-container .player-section .computer-score,.App .game-container .player-section .player-score{align-items:center;background-color:var(--red);border-top-left-radius:10px;border-top-right-radius:10px;color:var(--offwhite);display:flex;flex-direction:column;font-size:1.25rem;justify-content:center;padding-bottom:20px;width:185px}@media screen and (max-width:700px){.App .game-container .computer-section .computer-score,.App .game-container .computer-section .player-score,.App .game-container .player-section .computer-score,.App .game-container .player-section .player-score{width:155px}}@media screen and (max-width:325px){.App .game-container .computer-section .computer-score,.App .game-container .computer-section .player-score,.App .game-container .player-section .computer-score,.App .game-container .player-section .player-score{width:140px}}@media screen and (max-width:300px){.App .game-container .computer-section .computer-score,.App .game-container .computer-section .player-score,.App .game-container .player-section .computer-score,.App .game-container .player-section .player-score{width:120px}}.App .game-container .computer-section .computer-score h3,.App .game-container .computer-section .player-score h3,.App .game-container .player-section .computer-score h3,.App .game-container .player-section .player-score h3{background-color:var(--red);border-radius:10px;font-size:1.5rem;padding-top:20px;text-align:center;width:100%}.App .game-container .computer-section .computer-score p,.App .game-container .computer-section .player-score p,.App .game-container .player-section .computer-score p,.App .game-container .player-section .player-score p{font-family:Cute Font,sans-serif;font-size:2.5rem}.App .game-container .computer-section .computer-hand,.App .game-container .computer-section .player-hand,.App .game-container .player-section .computer-hand,.App .game-container .player-section .player-hand{align-items:center;background-color:var(--offwhite);border-bottom-left-radius:10px;border-bottom-right-radius:10px;display:flex;flex-direction:column;gap:10px;height:200px;justify-content:center;width:185px}@media screen and (max-width:700px){.App .game-container .computer-section .computer-hand,.App .game-container .computer-section .player-hand,.App .game-container .player-section .computer-hand,.App .game-container .player-section .player-hand{width:155px}}@media screen and (max-width:500px){.App .game-container .computer-section .computer-hand,.App .game-container .computer-section .player-hand,.App .game-container .player-section .computer-hand,.App .game-container .player-section .player-hand{height:130px}}@media screen and (max-width:325px){.App .game-container .computer-section .computer-hand,.App .game-container .computer-section .player-hand,.App .game-container .player-section .computer-hand,.App .game-container .player-section .player-hand{width:140px}}@media screen and (max-width:300px){.App .game-container .computer-section .computer-hand,.App .game-container .computer-section .player-hand,.App .game-container .player-section .computer-hand,.App .game-container .player-section .player-hand{width:120px}}.App .game-container .computer-section .computer-hand .player-shake,.App .game-container .computer-section .player-hand .player-shake,.App .game-container .player-section .computer-hand .player-shake,.App .game-container .player-section .player-hand .player-shake{animation:playerShake .8s ease-in-out infinite}.App .game-container .computer-section .computer-hand .comp-shake,.App .game-container .computer-section .player-hand .comp-shake,.App .game-container .player-section .computer-hand .comp-shake,.App .game-container .player-section .player-hand .comp-shake{animation:compShake .8s ease-in-out infinite}@keyframes compShake{0%,to{transform:rotate(100deg)}50%{transform:rotate(80deg)}}@keyframes playerShake{0%,to{transform:scaleY(-1) rotate(-80deg)}50%{transform:scaleY(-1) rotate(-100deg)}}.App .btns-container .btns-options-container{align-items:center;display:flex;flex-direction:row;gap:50px;justify-content:center}@media screen and (max-width:500px){.App .btns-container .btns-options-container{gap:15px}}.App .btns-container .btns-play-container{align-items:center;display:flex;justify-content:center}.App .btns-container .btns-play-container #btn-play{background-color:var(--red-dark);border:1px solid var(--black);border-radius:10px;color:var(--offwhite);font-size:1.4rem;font-weight:700;margin-top:50px;padding:10px 30px;transition:.4s ease-in-out}@media screen and (max-width:500px){.App .btns-container .btns-play-container #btn-play{margin-bottom:20px;margin-top:15px}}.App .btns-container .btns-play-container #btn-play:hover{background-color:#982f2f;scale:1.02}#rock-icon{transform:rotate(90deg)}#rock-icon-mirror{transform:scaleY(-1) rotate(-90deg)}.btn-option{align-items:center;background-color:var(--red);border:none;border-radius:50%;color:var(--offwhite);display:flex;flex-direction:column;font-size:1rem;gap:5px;height:6.5rem;justify-content:center;padding:1rem;transition:.2s ease-in-out;width:6.5rem}@media screen and (max-width:325px){.btn-option{height:5.5rem;width:5.5rem}}@media screen and (max-width:300px){.btn-option{height:5rem;width:5rem}}.btn-option.selected{background-color:var(--red-dark)}.btn-option:hover{transform:translateY(-15px)}.btn-option svg{fill:var(--offwhite)}.results-section.large-screen{color:#fff45e;padding:20px;text-align:center;width:280px}@media screen and (max-width:700px){.results-section.large-screen{padding:5px;width:155px}}@media screen and (max-width:500px){.results-section.large-screen{display:none}}.results-section.large-screen .timer{color:var(--offwhite);font-family:Cute Font,sans-serif;font-size:100px}.results-section.large-screen .results-winner{font-size:2.4rem;font-weight:700;margin-bottom:50px}@media screen and (max-width:700px){.results-section.large-screen .results-winner{font-size:2rem}}.results-section.large-screen .results-message{font-size:1.7rem}@media screen and (max-width:700px){.results-section.large-screen .results-message{font-size:1.3rem}}.results-section.mobile{color:#fff45e;display:none;padding:20px;text-align:center;width:280px}@media screen and (max-width:500px){.results-section.mobile{align-items:center;display:flex;flex-direction:column;justify-content:center}}.results-section.mobile .timer{color:var(--offwhite);font-family:Cute Font,sans-serif;font-size:80px}.results-section.mobile .results-winner{font-size:2.2rem;font-weight:700;margin-bottom:10px}.results-section.mobile .results-message{font-size:1.5rem}
/*# sourceMappingURL=main.eeeedd16.css.map*/