@import url(https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed:400,600,700&display=swap);
*{margin:0;padding:0;box-sizing:border-box}html{height:100%}body{font-family:"Barlow Semi Condensed",sans-serif;background:linear-gradient(to bottom right, #1f3756, #141539) no-repeat fixed;background-size:cover;padding:0 20px}.header{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;margin:5vh auto;max-width:600px;height:120px;padding:10px 15px;border:2px solid #606e85;border-radius:10px}.logo{-o-object-fit:contain;object-fit:contain}.score-card{max-width:45%;width:100px;background-color:#fff;border-radius:5px;padding:10px 0;text-align:center;text-transform:uppercase}.score-card__text{color:#2a46c0;letter-spacing:1px;font-weight:600}.score-card__score{color:#3b4363;font-size:42px;font-weight:700}.main{min-height:calc(90vh - 120px);padding:10vh 0}.screen-one{position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;text-align:center;margin:0 auto}.screen-one-bg{max-width:100%}.character.one{cursor:pointer;position:absolute;background:#f0f0f0;height:120px;width:120px;border-radius:50%}.character.one img{max-width:40%}.scissors{border:10px solid #eca922;box-shadow:inset 0 5px 3px 1px rgba(0,0,0,0.4),0px 1px #ec9e0e,0px 2px #e3980d,0px 3px #d9910d,0px 4px #cf8b0c,0px 5px #c6840c,0px 6px #bc7e0b,0px 7px #b2780a,0px 8px #a9710a,0px 9px #9f6b09,0px 10px #956409,0 10px 5px 1px rgba(0,0,0,0.5)}.scissors.one{top:-10%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.spock{border:10px solid #52bed1;box-shadow:inset 0 5px 3px 1px rgba(0,0,0,0.4),0px 1px #40b9ce,0px 2px #38b6cc,0px 3px #33b1c7,0px 4px #31a9bf,0px 5px #2fa2b6,0px 6px #2d9bae,0px 7px #2b94a6,0px 8px #298d9e,0px 9px #278596,0px 10px #257e8e,0 10px 5px 1px rgba(0,0,0,0.5)}.spock.one{top:25%;left:-10%;-webkit-transform:translateY(-25%);transform:translateY(-25%)}.paper{border:10px solid #5671f5;box-shadow:inset 0 5px 3px 1px rgba(0,0,0,0.4),0px 1px #4865f4,0px 2px #3e5cf4,0px 3px #3554f3,0px 4px #2b4cf3,0px 5px #2144f2,0px 6px #183cf2,0px 7px #0e34f1,0px 8px #0d32e7,0px 9px #0d30de,0px 10px #0c2ed4,0 10px 5px 1px rgba(0,0,0,0.5)}.paper.one{top:25%;right:-10%;-webkit-transform:translateY(-25%);transform:translateY(-25%)}.lizard{border:10px solid #8c5de5;box-shadow:inset 0 5px 3px 1px rgba(0,0,0,0.4),0px 1px #834fe3,0px 2px #7c46e2,0px 3px #763de1,0px 4px #7034df,0px 5px #6a2bde,0px 6px #6422dd,0px 7px #6021d4,0px 8px #5c20cb,0px 9px #581ec2,0px 10px #541db9,0 10px 5px 1px rgba(0,0,0,0.5)}.lizard.one{bottom:-10%;left:1%}.rock{border:10px solid #dd405d;box-shadow:inset 0 5px 3px 1px rgba(0,0,0,0.4),0px 1px #dc2e4e,0px 2px #da2546,0px 3px #d12343,0px 4px #c92241,0px 5px #c0213e,0px 6px #b71f3b,0px 7px #ae1e38,0px 8px #a61c35,0px 9px #9d1b33,0px 10px #941930,0 10px 5px 1px rgba(0,0,0,0.5)}.screen-two{display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;max-width:800px;width:100%;margin:0 auto}.cpu-pick-placeholder{height:180px;width:180px;background:#000;border-radius:50%;margin-top:5vh;opacity:0.2}.character-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.two{position:relative;background:#f0f0f0;border-width:20px;height:180px;width:180px;border-radius:50%;margin-top:5vh}.two.winner::after{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;content:'';z-index:-1;box-shadow:0 5px 3px 80px rgba(96,110,133,0.1),0 5px 3px 140px rgba(96,110,133,0.1),0 5px 3px 200px rgba(96,110,133,0.1)}.screen-two-text{color:#f0f0f0;font-weight:700;letter-spacing:1px;text-transform:uppercase}.rock.one{bottom:-10%;right:1%}.verdict{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;margin:5vh 5vh 0 5vh}.verdict-text{color:#fff;font-weight:600;font-size:2.5rem;text-transform:uppercase;letter-spacing:2px;margin-bottom:2vh}.reset-btn{cursor:pointer;background:#f0f0f0;border:none;border-radius:5px;text-transform:uppercase;width:100%;padding:10px 0;color:#1f3756;font-family:inherit;font-weight:700;letter-spacing:2px}.rules-btn{position:absolute;bottom:5vh;right:20px;cursor:pointer;text-transform:uppercase;font-family:inherit;font-size:15px;font-weight:600;color:#fff;background:none;padding:8px 30px;border:2px solid #b8b8b8;border-radius:5px;letter-spacing:2px}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;opacity:0.5}.modal-overlay.close{display:none}.modal{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);z-index:1;background:#fff;padding:25px;border-radius:5px}.modal.close{display:none}.modal-image-wrapper{margin:15% 0}.modal-image-wrapper img{width:100%}.modal-text{position:absolute;top:5%;left:25px;color:#1f3756;text-transform:uppercase;font-size:32px;font-weight:700}.modal-close-btn{cursor:pointer;position:absolute;background:none;border:none;top:5%;right:25px;font-size:32px}@media screen and (max-width: 520px){.screen-one-bg{max-width:60%}.character.one{height:80px;width:80px}.rock.one{bottom:-15%;right:15%;-webkit-transform:translateX(-15%);transform:translateX(-15%)}.verdict{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);bottom:15vh;margin:0}.lizard.one{bottom:-15%;left:15%;-webkit-transform:translateX(15%);transform:translateX(15%)}.scissors.one{top:-20%;left:50%}.spock.one{top:25%;left:10%}.paper.one{top:25%;right:10%}.character-wrapper{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.character.two,.cpu-pick-placeholder{margin-bottom:5vh;margin-top:0;border-width:15px;height:120px;width:120px}.character.two img,.cpu-pick-placeholder img{max-width:50%}.two.winner::after{box-shadow:0 5px 3px 40px rgba(96,110,133,0.1),0 5px 3px 70px rgba(96,110,133,0.1),0 5px 3px 100px rgba(96,110,133,0.1)}.rules-btn{right:50%;-webkit-transform:translateX(50%);transform:translateX(50%)}.modal-overlay{display:none}.modal{width:100%;height:100%;border-radius:0}.modal-text{top:10vh;left:auto}.modal-close-btn{right:auto;bottom:5vh;top:auto}.modal-image-wrapper{margin:0}}@media screen and (max-height: 600px) and (max-width: 520px){.main{padding:5vh 0}.modal-text{top:5vh}.character.one{width:70px;height:70px;border-width:5px}.character.two,.cpu-pick-placeholder{border-width:10px;height:100px;width:100px}.rules-btn{bottom:2.5vh}.verdict{bottom:12vh}.verdict-text{font-size:2rem;margin-bottom:1vh}}