*{margin:0;padding:0;box-sizing:border-box;transition:all .3s}html{min-height:100%}body{background-image:linear-gradient(#1f3756,#141539);background-repeat:no-repeat;font-family:Barlow Semi Condensed,sans-serif}#root{position:relative;overflow-x:hidden;overflow-y:hidden;min-height:100vh}.main{margin:1rem 0;min-height:100%}@media (min-width: 700px){.main{margin:1rem auto;max-width:800px}}.rulesWrapper{position:absolute;background-color:#00000057;top:0;bottom:-15px;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:2}.rulesContainer{max-width:400px;background-color:#fff;padding:1rem 2rem;border-radius:5px;display:grid;grid-template-columns:1fr 1fr;grid-row-gap:10px}.textRules{font-size:2rem;font-weight:600;color:#3b4363;letter-spacing:-1px}.closeTab{color:#3b4363;font-weight:700;align-self:center;justify-self:end;cursor:pointer}.rulesImg{max-width:100%;grid-column:1 / 3}.footer{display:flex;justify-content:flex-end;padding-right:1.5rem;padding-bottom:1rem;position:relative;z-index:1}.rulesBtn{border:1px solid hsl(217,16%,45%);border-radius:5px;padding:.5rem 2rem;background-color:transparent;color:#fff;cursor:pointer}@media (max-width: 799px){.main{margin-left:1rem;margin-right:1rem}}@media (max-width: 450px){.rulesContainer{grid-template-columns:1fr;border-radius:0;height:100%;max-width:100%;width:100%}.textRules{justify-self:center;align-self:center}.closeTab{justify-self:center;grid-row:3 / 4}.rulesImg{grid-column:1;align-self:center;justify-self:center}.footer{text-align:center;justify-content:center;padding:0;margin-top:2rem}}.scoreBoard{border:1px solid hsl(217,16%,45%);border-radius:5px;padding:1rem;display:flex;justify-content:space-between}.scoreBoardLogo{max-width:100%}.scoresContainer{background-color:#fff;padding:.2rem 2.5rem;max-width:100%;border-radius:5px;display:flex;flex-direction:column;justify-content:center}.scoreParagraph{color:#2a46c0;font-weight:600;letter-spacing:1px;justify-items:start}.scores{font-weight:700;font-size:3rem;color:#3b4363;text-align:center;letter-spacing:-5px}@media (max-width: 500px){.scoreBoard{column-gap:1rem}.scoresContainer{padding:.2rem 1.5rem}.scoreBoardLogo{max-width:40%}.scores{font-size:2.5rem;letter-spacing:-1px}}.scoreStyleDelay{animation:zoom .2s ease-out}@keyframes zoom{0%{transform:scale(0)}to{transform:scale(1)}}.rockPaperScissorWrapper{margin-top:3rem;min-height:400px}.rockPaperScissorContainer{background-image:url("data:image/svg+xml,%3csvg%20width='313'%20height='278'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20stroke='%23000'%20stroke-width='15'%20fill='none'%20opacity='.2'%20d='M156.5%20262%20300%208H13z'/%3e%3c/svg%3e");background-repeat:no-repeat;background-size:250px;background-position:center;max-width:500px;margin:0 auto;display:flex;flex-direction:column;row-gap:5rem}.paperAndScissor{display:flex;justify-content:space-evenly;margin-top:1rem}.gameTools{background-color:#fff;border-radius:50%;max-width:9rem;max-height:9rem;padding:2rem;display:flex;justify-content:center;align-items:center;border:1rem solid;cursor:pointer}.gameTools:hover{transform:scale(1.2);transition:transform .3s}.gameTools img{width:100%}.paper{border-color:#4865f4}.scissor{border-color:#ec9e0e}.rock{border-color:#dc2e4e;align-self:center}.pickedContainer{display:grid;grid-template-columns:repeat(3,1fr);color:#fff}.youPickedContainer{justify-self:center;display:flex;flex-direction:column}.valuePicked{margin-bottom:2rem;text-align:center}.computerPickedContainer{display:flex;flex-direction:column}.computerPicked{align-self:center}.computerPickedDelay{height:75%;width:9rem;border-radius:50%;background-color:#14153942}.computerPickedContainer .gameTools,.winOrLose,.linkContainerBtn{animation:scale .5s}@keyframes scale{0%{transform:scale(0)}to{transform:scale(1)}}.winOrLoseContainer{justify-self:center;align-self:center;z-index:1}.winOrLose{text-align:center;margin-bottom:1rem;font-size:2rem;font-weight:700;letter-spacing:1px}.linkContainerBtn{display:block;width:100%}.youPickedText,.housePickedText{font-weight:700;letter-spacing:1px}.playAgainBtn{padding:1rem 2rem;border-radius:10px;border:none;cursor:pointer;letter-spacing:1.5px;font-weight:700;width:100%}.playAgainBtn:hover{color:#dc2e4e}@media (min-width: 700px){.rockPaperScissorWrapper{min-height:0}.rockPaperScissorContainer{row-gap:1rem;background-size:200px}.paperAndScissor{justify-content:space-around}.pickedContainer .gameTools{cursor:default;transform:scale(1.5)}.computerPickedContainer .gameTools{animation:min-scale .5s}@keyframes min-scale{0%{transform:scale(0)}to{transform:scale(1.5)}}.youPickedText,.housePickedText{z-index:1;margin-bottom:5rem}.winOrLoseContainer{width:100%}.linkContainerBtn{margin:0 auto;width:62%}}@media (min-width: 550px){.winnerAnimation .gameTools:before{content:"";position:absolute;background:radial-gradient(#fff3 40%,#ffffff26 0%,#ffffff26 50%,#ffffff1a 23%);min-width:400px;min-height:400px;border-radius:50%;animation:winner 1s;z-index:-1}@keyframes winner{0%{transform:scale(0)}to{transform:scale(1)}}.computerPickedContainer{display:flex}}@media (max-width: 550px){.winnerAnimation .gameTools:before{content:"";position:absolute;background:radial-gradient(#fff3 50%,#ffffff26 0%,#ffffff26 60%,#ffffff1a 23%);width:300px;height:300px;border-radius:50%;animation:winner 1s;z-index:-1;pointer-events:none}@keyframes winner{0%{transform:scale(0)}to{transform:scale(1)}}.pickedContainer{grid-template-columns:1fr 1fr;grid-gap:2rem 1rem}.youPickedContainer,.computerPickedContainer{display:flex;flex-direction:column-reverse}.youPickedText,.housePickedText{margin-top:2rem;margin-bottom:1rem;font-size:.7rem}.winOrLoseContainer{grid-row:2 / 3;grid-column:1 / 3;width:100%}.linkContainerBtn{display:block;width:60%;margin:0 auto}.playAgainBtn{width:100%}}@media (max-width: 450px){.main{margin:1rem .5rem}.paperAndScissor{justify-content:space-between}}