@import url(https://use.fontawesome.com/releases/v5.13.0/css/all.css);body,html{font-family:Barlow Semi Condensed,sans-serif;font-weight:600;margin:0;color:#fff;background:radial-gradient(#1f3756,#141539)}.body.rules,body,html{height:100%;width:100%}.body.rules{position:absolute;background-color:#09091a;color:grey}.header-container{display:flex;flex-direction:row;justify-content:space-between;border:3px solid #606e85;border-radius:7px;padding:10px;margin:35px auto;width:75%;max-width:900px;margin-bottom:80px}.header-container h2{margin:0;line-height:18px;margin:10px}.header-container .scoreboard{display:flex;flex-direction:column;align-items:center;background:#e9ecf2;padding:5px 25px;border-radius:7px;line-height:26px}.header-container .scoreboard.rules{background:grey}.header-container .scoreboard h1,.header-container .scoreboard h5{margin:0;color:#141539}.header-container .scoreboard h1{font-size:2.5em}@media only screen and (min-width:1366px){.header-container{border-radius:15px;margin:50px auto;padding:20px;margin-bottom:120px}.header-container h2{font-size:3em;line-height:38px}.header-container .scoreboard{line-height:48px;padding:5px 50px}.header-container .scoreboard h5{font-size:1.4em}.header-container .scoreboard h1{font-size:5em}}.paper-circle,.rock-circle,.scissors-circle{position:absolute;height:140px;width:140px;border-radius:50%;box-shadow:inset 0 -6px 0 0 rgba(74,74,74,.48);cursor:pointer}.paper-circle.rules,.rock-circle.rules,.scissors-circle.rules{background:#adafb4;cursor:unset}.paper-circle.rules img,.rock-circle.rules img,.scissors-circle.rules img{opacity:.5}@media only screen and (min-width:1366px){.paper-circle,.rock-circle,.scissors-circle{height:200px;width:200px}.paper-circle img,.rock-circle img,.scissors-circle img{height:80px;margin:40px!important}}.paper-circle img,.scissors-circle img{margin:26px}.paper-circle{background:radial-gradient(#4865f4,#5671f5)}.scissors-circle{background:radial-gradient(#ec9e0e,#eca922)}.rock-circle{background:radial-gradient(#dc2e4e,#dd405d)}.rock-circle img{margin:30px}.circle{display:inline-block;height:110px;width:110px;margin:15px;border-radius:50%;background:#e9ecf2;box-shadow:inset 0 5px 3px 0 rgba(94,92,92,.69)}.circle.empty{background:#141539;box-shadow:none}@media only screen and (min-width:1366px){.circle{height:160px;width:160px;margin:20px}}.options-container{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:50px}.options-container .triangle-img{width:280px}.options-container .paper-circle{margin:-97px}.options-container .scissors-circle{margin:-97px 97px}.options-container .rock-circle{margin:60px 0}.options-container .paper-arrow,.options-container .rock-arrow,.options-container .scissors-arrow{position:relative}.options-container .paper-arrow p,.options-container .rock-arrow p,.options-container .scissors-arrow p{font-size:1em;color:rgba(94,92,92,.43);margin:0}@media only screen and (min-width:1366px){.options-container .paper-arrow p,.options-container .rock-arrow p,.options-container .scissors-arrow p{font-size:1.6em}}.options-container .paper-arrow{bottom:36px}.options-container .scissors-arrow{right:56px;bottom:21px}.options-container .scissors-arrow p{position:relative;top:42px;right:38px}.options-container .scissors-arrow img{transform:rotate(-130deg)}.options-container .rock-arrow{left:58px;bottom:92px}.options-container .rock-arrow p{position:relative;top:42px;left:38px}.options-container .rock-arrow img{transform:rotate(130deg)}@media only screen and (min-width:1366px){.options-container .triangle-img{width:400px}.options-container .paper-circle{margin:-160px}.options-container .scissors-circle{margin:-160px 160px}.options-container .rock-circle{margin:80px 0}.options-container .paper-arrow{bottom:58px}.options-container .scissors-arrow{right:94px;bottom:46px}.options-container .scissors-arrow p{top:66px;right:60px}.options-container .rock-arrow{left:94px;bottom:155px}.options-container .rock-arrow p{top:66px;left:60px}}.rule-btn{border:1px solid #fff;border-radius:10px;margin:0 auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding:10px 45px;margin-top:50px;cursor:pointer}.rule-btn h3{margin:0;font-weight:100;letter-spacing:.08em}.rules-container{position:absolute;height:100%;width:100%;top:0;background:#fff;display:flex;flex-direction:column;justify-content:space-between;align-items:center}.rules-container h1{margin-top:90px;color:#3b4363}.rules-container a{margin-bottom:40px}.rules-container a:after{content:"\f00d";font-family:Font Awesome\ 5 Free;font-weight:900;color:rgba(94,92,92,.43);font-size:36px;cursor:pointer}@media only screen and (min-width:1366px){.rules-container{position:fixed;height:70%;width:45%;top:16%;left:27%;border-radius:15px}.rules-container h1{margin:20px 0 100px 50px;font-size:2.5em;align-self:flex-start}.rules-container a{align-self:flex-end}.rules-container a:after{font-size:50px;position:absolute;top:16px;right:50px}}.hand-container{display:flex;flex-direction:row;justify-content:space-around;margin:0 auto;max-width:1000px}.hand-container div{width:50%;display:flex;justify-content:center}.hand-container h3{margin-top:150px;font-weight:200}.hand-container .empty-circle{position:absolute;height:140px;width:140px;border-radius:50%}@media only screen and (min-width:1366px){.hand-container h3{margin-top:230px}.hand-container .empty-circle{height:200px;width:200px}}.result-container{display:flex;flex-direction:column;align-items:center}.result-container h1{font-size:3.6em;margin:0}.result-container a{background:#fff;color:#3b4363;letter-spacing:.1em;border-radius:7px;padding:13px 55px;margin-top:10px;cursor:pointer}