body{margin:0;font-family:"Montserrat",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#88abe5}.title-front{width:75%;font-size:52px;font-style:italic;font-weight:500;color:#fff;margin:65px auto 50px}.logo-front img{margin-right:30px;margin-left:30px;width:50px;margin-bottom:25px}.button-1{padding:15px 30px;border:none;color:#3d3d3d}.button-1,.button-2{display:block;margin:35px auto 10px;font-size:18px;font-weight:600;cursor:pointer}.button-2{padding:13px 60px;border:5px solid #fff;color:#fff;background-color:transparent}.button-2:hover{border:5px solid #88abe5;background-color:#fff;color:#2e2e2e;-webkit-animation:buttonhov .2s linear forwards;animation:buttonhov .2s linear forwards}div.display{display:block}@-webkit-keyframes buttonhov{0%{opacity:0}to{opacity:1}}@keyframes buttonhov{0%{opacity:0}to{opacity:1}}.nav-icon{display:-webkit-flex;display:flex;position:absolute;top:-5px;right:20px}.nav-icon p{font-size:26px;font-weight:600;color:#494949;cursor:pointer}.nav-icon p:hover{color:#e96161}.rule-ico{width:25px;margin-right:20px;cursor:pointer}.rule-ico:hover{fill:#88abe5}.paper-rule{width:100%;z-index:5;background-color:#fff;position:absolute;top:0;display:none;height:100vh;padding-bottom:140px}.close-btn{position:absolute;font-size:30px;font-weight:600;top:25px;right:40px;color:#3d3d3d;cursor:pointer}.close-btn:hover{color:#e96161}.paper-rule nav{display:-webkit-flex;display:flex;margin-bottom:25px}.paper-rule nav p,.specialrule nav p{font-size:24px;font-weight:600;display:-webkit-flex;display:flex;color:#88abe5;margin:30px 0 0 25px}nav p.clickable{color:#3d3d3d;text-decoration:underline;cursor:pointer;margin-left:20px}.clickable:hover{color:#88abe5}.paper-rule img{width:85%;margin:20px 0 30px -15px;background:#fff;max-width:400px}.specialrule{width:100%;z-index:99;background-color:#fff;position:absolute;top:0;display:none}.specialrule nav{display:-webkit-flex;display:flex;margin-bottom:25px}.explain-1,.explain-2,.explain-3{border-bottom:2px solid #3d3d3d;width:92%;margin:20px auto}.explain-1 h1,.explain-2 h1,.explain-3 h1{text-align:left;padding:0;font-size:22px;font-weight:600;color:#3d3d3d;margin:10px 0 0 20px}.explain-1 img,.explain-2 img,.explain-3 img{width:90%;max-width:400px;margin:0 auto}.explain-1 p,.explain-2 p,.explain-3 p{text-align:center;font-size:18px;font-weight:500;color:#3d3d3d;width:100%;max-width:400px;margin:0 auto 20px}.play-mode{width:100%;z-index:4;background-color:#fff;position:absolute;top:0;display:none;height:100vh}.play-mode h1{font-size:20px;text-align:left;margin:25px;color:#494949}.historyboard{width:95%;height:65px;margin:0 auto;display:-webkit-flex;display:flex;position:relative;overflow-x:auto}.player{width:40px;font-weight:600;position:-webkit-sticky;position:sticky;top:0;left:0;background-color:#fff}.p1{border-bottom:2px solid #000;margin-top:7px}.p1,.p2{padding-bottom:5px}.p2{margin-top:-10px}.score-1{border-left:2px solid #000}.score-1 img{width:25px}.score-p1{border-bottom:2px solid #000}.score-p1,.score-p2{padding:3px 0;width:80px;display:-webkit-flex;display:flex}.score-p1 img,.score-p2 img{margin:0 5px 0 7px}.screenplay{width:100%;max-width:750px;outline:solid;height:200px;margin:20px auto;display:-webkit-flex;display:flex;position:relative;-webkit-justify-content:space-between;justify-content:space-between}.left-img{float:left}.right-img{float:right}.left-img,.right-img{width:50%;max-width:250px;object-fit:cover}.scoreboard{width:90%;height:100px;margin:0 auto;position:relative}.tie{width:100px;height:75px;position:absolute;top:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.tie h4{margin:0;font-weight:600}.tie h4,.tie h5{font-size:20px;color:#494949}.tie h5{margin:5px 0}.score-player{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;width:100%;margin:0 auto;max-width:700px}.play-1,.play-2{width:150px;margin:0;display:block}.play-1 h4,.play-2 h4{font-size:20px;font-weight:600;color:#88abe5;margin:10px 0 5px}.play-2 h4{color:#e96161}.play-1 h5,.play-2 h5{font-size:20px;color:#494949;margin:10px 0}.play-1 img,.play-2 img{width:25px}.infoboard{width:90%;height:75px;margin:20px auto}.infoboard p{font-size:20px;font-weight:600;color:#494949}.replace-item{display:-webkit-flex;display:flex;-webkit-justify-content:space-evenly;justify-content:space-evenly;display:none;max-width:600px;margin:0 auto}.replace-item span{font-size:18px;font-weight:500;width:25%;margin:10px;text-decoration:underline;color:#494949;cursor:pointer}.replace-item span:hover{color:#88abe5}div.displayFl{display:-webkit-flex;display:flex}.end-round{display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;display:none}.exit-btn,.playagain-btn{width:150px;padding:12px 0;border:none;color:#fff;background-color:#88abe5;font-size:16px;font-weight:600;margin:0 30px;border-radius:5px;cursor:pointer}.exit-btn{background-color:#e96161}.pick-play{position:absolute;bottom:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:100;width:100%;height:130px;display:-webkit-flex;display:flex;-webkit-justify-content:space-evenly;justify-content:space-evenly;max-width:475px}.hand-pick{width:75px;margin-top:10px;fill:#494949}.first-pick,.second-pick,.third-pick{border:none;width:150px;outline:solid;background-color:#fff;position:relative}.first-pick p,.second-pick p,.third-pick p{margin-left:7px;text-align:center}.border{position:absolute;width:100%;height:100%;outline:7px solid #88abe5;background:none;top:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);display:none}@media only screen and (max-width:512px){.f1:active .hand-pick,.s2:hover:active .hand-pick,.t3:hover:active .hand-pick{fill:#88abe5}.f1:hover:active,.s2:hover:active,.t3:hover:active{cursor:pointer;outline:4px solid #88abe5;color:#88abe5;font-weight:700}.title-front{font-size:36px;width:90%}}@media only screen and (min-width:512px){.f1:hover .hand-pick,.s2:hover .hand-pick,.t3:hover .hand-pick{fill:#88abe5}.f1:hover,.s2:hover,.t3:hover{cursor:pointer;outline:4px solid #88abe5;color:#88abe5;font-weight:700}}@media only screen and (min-width:1200px){.play-mode{overflow:hidden}.play-mode h1{margin:25px 50px}.historyboard{margin-left:50px}.nav-icon{top:0;right:50px}.infoboard{max-width:480px;position:absolute;top:170px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.infoboard p{font-size:20px;font-weight:600;color:#494949}.end-round{display:block;-webkit-justify-content:center;justify-content:center;display:none;-webkit-flex-direction:column;flex-direction:column}.exit-btn,.playagain-btn{margin:5px auto;border-radius:5px}.screenplay{height:210px;margin:50px auto;display:-webkit-flex;display:flex;position:relative;-webkit-justify-content:space-between;justify-content:space-between}.paper-rule{z-index:5;outline:2px solid;padding:0;margin:0}.paper-rule,.specialrule{width:420px;background-color:#fff;position:absolute;top:0;right:0;display:none;height:100vh;overflow-y:auto}.specialrule{z-index:99;outline:1px solid}}@media only screen and (max-height:750px){.play-mode h1{margin:25px 0 15px 20px}.historyboard{height:55px}.p1{margin-top:4px}.score-1 img{width:22px}.screenplay{height:150px;outline:2px solid}.scoreboard{width:97%;height:90px}.play-1 h4,.play-2 h4{margin:0 0 5px}.pick-play{height:120px}.hand-pick{width:70px}.infoboard{margin:0 auto}}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{-webkit-animation:App-logo-spin 20s linear infinite;animation:App-logo-spin 20s linear infinite}}.App-header{background-color:#282c34;min-height:100vh;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;font-size:calc(10px + 2vmin);color:#fff}.App-link{color:#61dafb}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}
/*# sourceMappingURL=main.e81bb1bf.chunk.css.map */