@import url(https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap);body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.header{align-items:center;border:3px solid #4f5d79;border-radius:1rem;display:flex;justify-content:space-between;margin:0 auto 5rem;min-height:11rem;padding:4.2rem;width:98rem}.logo{height:9.9rem;width:16.2rem}.score{align-items:center;background-color:#f9f9f9;border-radius:1.2rem;display:flex;flex-direction:column;justify-content:center;padding-bottom:1.8rem;padding-top:2.4rem;width:18rem}.score-title{color:#3141b2;font-size:1.8rem;letter-spacing:2px;text-transform:uppercase}.score-counter,.score-title{font-family:Roboto Condensed,sans-serif;font-weight:700}.score-counter{color:#5a566d;font-size:7rem;letter-spacing:-.7rem;line-height:7rem;margin-left:-1rem}.game{margin:0 auto;min-height:30rem;position:relative;width:80rem}.game-subtitle{align-items:center;display:flex;justify-content:space-between;margin:0 auto 1rem;opacity:0;width:68rem}.game-subtitle p{color:#fff;font-family:Roboto Condensed,sans-serif;font-size:2.4rem;font-weight:700;letter-spacing:2px;margin:0;text-transform:uppercase;width:35%}.game-field{width:90%}.game-field,.game-your-choice{margin:0 auto;position:relative}.game-your-choice{height:59rem;width:70rem}.game-triangle{background-image:url(/rock-paper-scissors/static/media/bg-triangle.c0c30b562fdb08766659.svg);background-position:50%;background-repeat:no-repeat;background-size:44rem 40rem;height:60rem;left:0;opacity:1;position:absolute;top:0;width:70rem;z-index:-1}.game-computer-choice{height:35rem;pointer-events:none;position:absolute;right:0;top:0;width:50%}.variant{background-color:#e3e3e3;background-position:50%;background-repeat:no-repeat;background-size:50% 50%;border-radius:50%;cursor:pointer;height:27.2rem;position:absolute;width:27.2rem}.variant--paper{background-image:url(/rock-paper-scissors/static/media/icon-paper.8b57a6b108c1b8ae8293.svg);border:3.3rem solid #5472ee;box-shadow:0 12px #2845bf,inset 0 1rem #bbc0d6;left:0;top:0}.variant--scissors{background-image:url(/rock-paper-scissors/static/media/icon-scissors.3b1a5d7eb0b2f1fd3e95.svg);border:3.3rem solid #eca823;box-shadow:0 12px #cb6d1a,inset 0 1rem #bbc0d6;right:0;top:0}.variant--rock{background-image:url(/rock-paper-scissors/static/media/icon-rock.476e90a9646a87bb3645.svg);border:3.3rem solid #e0425f;bottom:0;box-shadow:0 12px #981736,inset 0 1rem #bbc0d6;left:50%;margin-left:-141px}.variant--selected{bottom:auto;left:auto;left:0;margin:0;right:auto;top:auto;top:6rem;-webkit-transform:scale(1.2);transform:scale(1.2)}.variant-wins{background-image:url(/rock-paper-scissors/static/media/wins.6a4acb056a43666b269c.svg);background-position:50%;background-size:100rem 100rem;border-radius:50%;height:27.2rem;left:0;opacity:0;position:absolute;top:6rem;width:27.2rem;z-index:-2}.variant-wins--computer-choice{left:auto;right:0}.variant--computer-choice{bottom:auto;left:auto;margin:0;opacity:0;pointer-events:none;right:auto;right:0;top:auto;top:6rem}.game-result{left:50%;margin-left:-20rem;opacity:0;pointer-events:none;position:absolute;top:16rem;width:40rem}.game-result-text{color:#fff;font-size:5.6rem;letter-spacing:1px;margin:0 0 .5rem}.game-btn,.game-result-text{font-family:Roboto Condensed,sans-serif;font-weight:700;text-transform:uppercase}.game-btn{background-color:#fafafa;border:0;border-radius:.8rem;color:#3141b2;cursor:pointer;font-size:1.8rem;letter-spacing:2px;line-height:1.8rem;opacity:0;outline:none;padding:2.6rem 8rem;pointer-events:none;-webkit-transform:scale(1.2);transform:scale(1.2)}.game-btn:hover{background-color:#dadada}.modal{left:0;overflow:auto;position:fixed;top:0;z-index:100}.modal,.overlay{height:100vh;width:100%}.overlay{background-color:rgba(0,0,0,.7);content:"";position:absolute}.modal-body{background:#fff;border-radius:1rem;height:46rem;left:50%;margin-left:-28rem;margin-top:-28rem;padding:4rem 3rem;position:absolute;top:50%;width:46rem}.modal-header{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:2rem;margin-top:-1rem}.modal-title{color:#273655;font-family:Roboto Condensed,sans-serif;font-size:3.2rem;font-weight:700;letter-spacing:2px;margin:0;padding:0;text-transform:uppercase}.modal-close-btn{border:0;cursor:pointer;font-size:0;height:3.6rem;outline:none;position:relative;width:3.6rem}.modal-close-btn>span{background-color:#e1e4ed;height:.4rem;left:0;opacity:1;position:absolute;top:0;-webkit-transform:translateY(1.5rem) rotate(-45deg);transform:translateY(1.5rem) rotate(-45deg);transition:background-color .3s;width:3.6rem}.modal-close-btn>span:first-child{-webkit-transform:translateY(1.5rem) rotate(45deg);transform:translateY(1.5rem) rotate(45deg)}.modal-close-btn:hover>span{background-color:#b9bbcc}.rules-img{display:block;margin:0 auto;width:38rem}*{box-sizing:border-box;outline:none}html{font-size:58%;max-width:100%;padding:0;transition:all .3s}@media (max-width:1400px){html{font-size:45%}}body{background-image:radial-gradient(at top,#1e3555,#14171c);background-size:cover;margin:0;overflow-x:hidden;overflow-y:scroll;padding:0;position:relative}body.modal-open{overflow:hidden}img{height:auto;max-width:100%}.App{color:#fff;min-height:100vh;overflow:hidden;padding-bottom:7rem;padding-top:2.5rem;position:relative;text-align:center;width:100%}.App,.rules-btn{font-family:Roboto Condensed,sans-serif}.rules-btn{background:none;border:2px solid #fafafa;border-radius:.8rem;bottom:2rem;color:#fafafa;cursor:pointer;font-size:1.8rem;font-weight:700;letter-spacing:2px;line-height:1.8rem;outline:none;padding:1.4rem 8rem;position:absolute;right:4rem;text-transform:uppercase}.rules-btn:hover{background-color:#dadada;color:#1e3555}