@import"https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@400;600;800&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{font-family:Barlow Semi Condensed,sans-serif}.game-container{display:flex;flex-direction:column;height:100vh;background-image:radial-gradient(hsl(214,47%,23%),hsl(237,49%,15%));padding:50px 40px}.game-container .game-score{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;width:60vw;margin:0 auto;border:3px solid rgb(96,110,133);border-radius:.75rem}.game-container .game-score .brand-logo{width:150px}.game-container .game-score .brand-logo img{width:100%;height:auto}.game-container .game-score .score-board{display:flex;flex-direction:column;justify-content:center;padding:10px 50px;background:hsl(0,0%,100%);border-radius:1rem}.game-container .game-score .score-board .score-title{font-weight:600;letter-spacing:3px;color:#2a46c0}.game-container .game-score .score-board .score-count{margin:0 auto;font-size:3.25rem;font-weight:600;color:#3b4363}.game-container .game-play{flex-grow:1;position:relative;margin:150px auto;background-position:center;background-repeat:no-repeat}.game-container .game-play .background-image{width:400px}.game-container .show-result-mobile{display:none}.game-container .select-title{font-size:1.5rem;font-weight:600;letter-spacing:2px;text-wrap:nowrap;color:#fff;margin-bottom:3rem}.game-container .play-again{cursor:pointer;padding:1rem 3.5rem;border-radius:.85rem;border:none;font-size:1rem;text-wrap:nowrap;letter-spacing:2px;font-weight:700;transition:all .3s}.game-container .play-again:hover{color:#e41010}.game-container .result-title{font-weight:600;font-size:3rem;letter-spacing:2px;color:#fff;text-wrap:nowrap;padding:25px 0;text-align:center}.game-container .result{display:flex;width:60vw;justify-content:center;align-items:center;text-align:center}.game-container .rules-btn{float:right;cursor:pointer;padding:.75rem 2.5rem;background:transparent;border-radius:.5rem;color:#fff;letter-spacing:3px;border:1px solid hsl(0,0%,100%);text-transform:uppercase}.game-container .select-button{cursor:pointer;position:absolute;height:190px;width:190px;border-radius:100%;flex-grow:1;flex-shrink:0;border:none}.game-container .select-button.selected{margin:0 50px}.game-container .select-button .button-icon{height:150px;width:150px;background:white;display:flex;border-radius:100%;margin:auto;align-items:center;justify-content:center;box-shadow:0 3px 0 3px #b7c3d6 inset;transition:all .3s}.game-container .select-button:active .button-icon{box-shadow:none}.game-container .select-button.paper{top:-20%;left:-10%;box-shadow:0 4px 0 1px #2240d0;background:-webkit-linear-gradient(left top,hsl(230,89%,62%) 0%,rgb(86,113,245) 100%)}.game-container .select-button.scissor{top:-20%;right:-10%;box-shadow:0 4px 0 1px #b87f0f;background:-webkit-linear-gradient(left top,hsl(39,89%,49%) 0%,hsl(40,84%,53%) 100%)}.game-container .select-button.rock{bottom:0;right:calc(50% - 80px);box-shadow:0 4px 0 1px #b51e39;background:-webkit-linear-gradient(left top,hsl(349,71%,52%) 0%,hsl(349,70%,56%) 100%)}.game-container .paper.selected,.game-container .scissor.selected,.game-container .rock.selected{position:static}.game-container .rules-container{position:absolute;display:flex;align-items:center;justify-content:center;inset:0;z-index:99;background:rgba(20,21,57,.5)}.game-container .rules-container .rules-box{padding:30px;border-radius:1rem;background:#ffffff}.game-container .rules-container .rules-box .rules-header{display:flex;margin-bottom:1rem;align-items:center;justify-content:space-between}.game-container .rules-container .rules-box .rules-header img{cursor:pointer}@media only screen and (max-width: 768px){.game-container .game-score,.game-container .result{width:90vw}.game-container .result .computer-pick{text-align:center}.game-container .game-play .show-result{display:none}.game-container .game-play .show-result-mobile{display:block;margin:4rem auto 0}.game-container .game-play .show-result-mobile .result-button-mobile{display:flex;justify-content:center}.game-container .select-button{height:160px;width:160px}.game-container .select-button .button-icon{height:130px;width:130px}}@media only screen and (max-width: 556px){.game-container{padding:30px}.game-container .game-score{width:90vw}.game-container .game-score .brand-logo{width:120px}.game-container .game-score .score-board .score-count{font-size:2.5rem}}