.App{width:100%;height:100vh;display:flex;flex-direction:column;align-items:center;position:relative}.header{display:flex;justify-content:space-between;align-items:center;width:100%;margin:4em 1em 5em;padding:1em 1.5em .5em 1em;border:3px solid var(--header-outline);border-radius:15px}.logo{width:90px}.score-container{display:flex;flex-direction:column;align-items:center}.score-board{background:#fff;color:var(--score-text);padding:.5rem 2rem;border-radius:10px;text-align:center}.score-title{text-transform:uppercase;letter-spacing:1.8px;font-size:.8rem;color:var(--score-text);font-weight:700}.score{color:var(--dark-text);font-size:4rem;font-weight:700;line-height:.9}.reset-score-btn{margin-top:.5em;color:#fff;border:none;text-transform:uppercase;letter-spacing:1.8px;font-family:Barlow Semi Condensed,sans-serif;padding:5px 10px;cursor:pointer;font-size:.7rem;background-color:transparent}.reset-score-btn:hover,.reset-score-btn:focus{background-color:#ffffff1a;border-radius:5px}.main-content{width:100%;height:100vh;display:flex;flex-direction:column;justify-content:space-around;align-items:center}.game-section{width:100%;display:flex}.rules-btn{display:flex;justify-content:center;align-items:center}.rules-btn>button{background:transparent;color:#fff;padding:.6rem 2.5rem;border:1px solid #fff;border-radius:5px;text-transform:uppercase;letter-spacing:1.8px;cursor:pointer;font-size:.9rem;font-weight:600;transition:background .3s;font-family:Barlow Semi Condensed,sans-serif}.rules-btn>button:hover,.rules-btn>button:focus{background:#ffffff1a;transform:scale(1.05)}.error-overlay{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:#00000080;z-index:1000}.error-message{background-color:#fff;padding:20px;border-radius:5px;box-shadow:0 0 10px #0000004d;text-align:center}@media screen and (min-width: 700px){.header{max-width:700px}.logo{width:110px}}@media screen and (min-width: 1200px){.game-section{width:100%}.header{max-width:1000px}.logo{width:130px}.rules-btn{align-self:flex-end}.rules-btn>button{margin-right:2em;padding:1rem 3rem;font-size:1rem}}.choices{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;place-items:center;max-width:300px;margin:0 auto;position:relative;transition:opacity .5s ease}.choices:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='329'%20height='313'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-width='15'%20d='M164.5%209.27L9.26%20122.06l59.296%20182.495h191.888L319.74%20122.06%20164.5%209.271z'%20opacity='.2'/%3e%3c/svg%3e");background-size:contain;background-repeat:no-repeat;width:329px;height:313px;z-index:-1;width:80%}.choice-container{position:relative}.choice-container:before{content:"";position:absolute;top:-10px;left:-10px;right:-10px;bottom:-10px;border-radius:50%;z-index:-1;box-shadow:inset 0 -9px 0 -3px #0003}.choice-container.rock:before{background-image:var(--rock-gradient)}.choice-container.paper:before{background-image:var(--paper-gradient)}.choice-container.scissors:before{background-image:var(--scissors-gradient)}.choice-container.lizard:before{background-image:var(--lizard-gradient)}.choice-container.spock:before{background-image:var(--spock-gradient)}.choice{width:70px;height:70px;border-radius:50%;background:#fff;border:none;box-shadow:inset 0 6px #0003;cursor:pointer;display:flex;position:relative;z-index:1;align-items:center;justify-content:center;transition:transform .2s}.choice-container:hover{transform:scale(1.05)}.choice-container.scissors{top:-120px;left:90px}.choice-container.paper{top:-40px;left:100px}.choice-container.rock{top:70px;left:-20px}.choice-container.lizard{top:-15px;left:30px}.choice-container.spock{top:-130px;left:-100px}.choice img{width:40%}.choice-container.lizard .choice img,.choice-container.scissors .choice img{width:50%}@media screen and (min-width: 500px){.choices:before{width:329px}.choice{width:110px;height:110px}.choice-container.scissors{top:-90px;left:100px}.choice-container.paper{top:35px;left:110px}.choice-container.rock{top:210px;left:-60px}.choice-container.lizard{top:85px;left:0}.choice-container.spock{top:-90px;left:-180px}}@media screen and (min-width: 1200px){.choices{width:auto}.choice-container:before{top:-15px;left:-15px;right:-15px;bottom:-15px}.choice-container.scissors{top:-90px;left:100px}.choice-container.paper{top:35px;left:110px}.choice-container.rock{top:210px;left:-60px}.choice-container.lizard{top:85px;left:0}.choice-container.spock{top:-90px;left:-180px}}.result{display:flex;align-items:center;position:relative;flex-wrap:wrap;width:90%;margin:0 auto}.choices-container{display:flex;width:100%;justify-content:space-around;flex-wrap:wrap}.user-result,.computer-result{display:flex;flex-direction:column;align-items:center;position:relative}.choices-container.reveal-outcome .user-result{transform:translate(-40%);transition:transform .5s ease}.choices-container.reveal-outcome .computer-result{transform:translate(40%);transition:transform .5s ease}.result-container{position:relative}.result-container:before{content:"";position:absolute;top:-10px;left:-10px;right:-10px;bottom:-10px;border-radius:50%;z-index:-1;box-shadow:inset 0 -9px 0 -3px #0003}.result-container.rock:before{background-image:var(--rock-gradient)}.result-container.paper:before{background-image:var(--paper-gradient)}.result-container.scissors:before{background-image:var(--scissors-gradient)}.result-container.lizard:before{background-image:var(--lizard-gradient)}.result-container.spock:before{background-image:var(--spock-gradient)}.choice-result{width:80px;height:80px;border-radius:50%;background:#fff;border:none;box-shadow:inset 0 6px #0003;display:flex;position:relative;z-index:1;align-items:center;justify-content:center}.choice-result>img{width:40%}.choice-result.lizard img,.choice-result.scissors img{width:50%}.result .user-result>h3,.result .computer-result>h3{display:flex;justify-content:center;margin-top:3em;color:#fff;font-size:.7rem;letter-spacing:2px;text-transform:uppercase}.computer-result .result-container{transition:opacity .5s ease}.computer-result.show .result-container{opacity:1}.computer-result:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-75%);width:80px;height:80px;background-color:#192845;border-radius:50%;z-index:-1}.outcome-container{position:static;transform:none;margin-top:2em;opacity:0;transition:opacity .5s ease;order:3;width:100%}.outcome-container.show{opacity:1}.outcome-text{display:flex;justify-content:center;flex-direction:column;width:70%;color:#fff;text-align:center;margin:0 auto}.outcome-text>h2{font-size:2.1rem;margin-bottom:.3em;text-transform:uppercase;font-weight:700;font-size:2.9rem}.play-again-btn{border-radius:5px;background:#fff;border:none;cursor:pointer;display:flex;position:relative;z-index:1;align-items:center;justify-content:center;padding:1em 2em;margin:0 auto;text-transform:uppercase;font-weight:500;font-family:Barlow Semi Condensed,sans-serif;letter-spacing:1px;font-size:1rem;transition:transform .3s}.play-again-btn:hover,.play-again-btn:focus{transform:scale(1.05);color:#b52222;font-weight:700}.result-container.reveal-ripple{animation:ripple 2.5s infinite;border-radius:50%;z-index:-1}@keyframes ripple{0%{box-shadow:0 0 #ffffff4d,0 0 #ffffff4d,0 0 #ffffff4d}80%{box-shadow:0 0 0 50px #fff0,0 0 0 70px #fff0,0 0 0 90px #fff0}to{box-shadow:0 0 #fff0,0 0 #fff0,0 0 #fff0}}@media screen and (min-width: 500px){.result{justify-content:space-around}.choice-result{width:110px;height:110px}.result-container:before{top:-15px;left:-15px;right:-15px;bottom:-15px}.result .user-result>h3,.result .computer-result>h3{font-size:1rem;font-weight:600}.computer-result:before{width:110px;height:110px;transform:translate(-50%,-80%)}.play-again-btn{width:70%}}@media screen and (min-width: 768px){.choices-container{gap:4em}.choice-result{width:150px;height:150px}.result-container:before{top:-20px;left:-20px;right:-20px;bottom:-20px}.computer-result:before{width:110px;height:110px;transform:translate(-50%,-80%)}.play-again-btn{width:50%}@keyframes ripple{0%{box-shadow:0 0 #ffffff4d,0 0 #ffffff4d,0 0 #ffffff4d}80%{box-shadow:0 0 0 70px #fff0,0 0 0 130px #fff0,0 0 0 170px #fff0}to{box-shadow:0 0 #fff0,0 0 #fff0,0 0 #fff0}}@keyframes ripple{0%{box-shadow:0 0 #ffffff4d,0 0 #ffffff4d,0 0 #ffffff4d}80%{box-shadow:0 0 0 70px #fff0,0 0 0 120px #fff0,0 0 0 160px #fff0}to{box-shadow:0 0 #fff0,0 0 #fff0,0 0 #fff0}}}@media screen and (min-width: 1200px){.result{margin-top:-10em;width:80%;justify-content:space-between}.choices-container{gap:0;justify-content:space-around;width:100%}.choice-result{width:200px;height:200px}.user-result,.computer-result{width:40%;flex-direction:column-reverse}.computer-result:before{width:150px;height:150px;transform:translate(-50%)}.result .user-result>h3,.result .computer-result>h3{margin-bottom:4em;font-size:1.3rem}.outcome-container{position:absolute;left:50%;top:40%;transform:translate(-50%);opacity:0;transition:opacity .5s ease}.outcome-text{width:50%}.outcome-container.show{opacity:1}@keyframes ripple{0%{box-shadow:0 0 #ffffff4d,0 0 #ffffff4d,0 0 #ffffff4d}80%{box-shadow:0 0 0 90px #fff0,0 0 0 150px #fff0,0 0 0 210px #fff0}to{box-shadow:0 0 #fff0,0 0 #fff0,0 0 #fff0}}}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000}.modal-content{margin-top:10em;height:100vh;display:flex;flex-direction:column;gap:10em;width:100%}.modal-content img{width:90%;margin:0 auto}.modal-content>h2{font-size:2rem;color:var(--dark-text);display:flex;justify-content:center;align-items:center;text-transform:uppercase}.close{display:flex;justify-content:center;color:#d0d0d0;font-size:5rem;cursor:pointer}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}@media screen and (min-width: 500px){.modal-content{margin-top:5em;gap:7em}}@media screen and (min-width: 600px){.modal-content img{width:70%}}@media screen and (min-width: 850px){.modal-content img{width:60%}}@media screen and (min-width: 1000px){.modal-content img{width:50%}}@media screen and (min-width: 1200px){.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999}.modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:550px;height:550px;background-color:#fff;border-radius:10px;padding:20px;box-shadow:0 0 5px #0000001a}.modal-content{margin-top:0;width:100%;display:block;position:relative}.modal-content>h2{justify-content:flex-start}.modal-content img{width:90%;display:flex}.close{position:absolute;top:-40px;right:0}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100vh;margin:0;padding:0}body{font-family:Barlow Semi Condensed,sans-serif;background:radial-gradient(circle at top,#1f3756,#141539);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff}#root{flex-grow:1;display:flex;flex-direction:column;align-items:center;width:100%;max-width:1440px;padding:1rem}footer{width:100%;padding:1rem;background:#fff}.attribution{font-size:11px;text-align:center}.attribution a{color:#3e52a3}:root{--scissors-gradient: linear-gradient( to right, hsl(39, 89%, 49%), hsl(40, 84%, 53%) );--paper-gradient: linear-gradient( to right, hsl(230, 89%, 62%), hsl(230, 89%, 65%) );--rock-gradient: linear-gradient( to right, hsl(349, 71%, 52%), hsl(349, 70%, 56%) );--lizard-gradient: linear-gradient( to right, hsl(261, 73%, 60%), hsl(261, 72%, 63%) );--spock-gradient: linear-gradient( to right, hsl(189, 59%, 53%), hsl(189, 58%, 57%) );--dark-text: hsl(229, 25%, 31%);--score-text: hsl(229, 64%, 46%);--header-outline: hsl(217, 16%, 45%)}@media screen and (min-width: 500px){#root{padding:2rem}}