body{margin:0;padding:0;font-size:63.25%;position:relative;z-index:-1;background-color:#282828;overflow-x:hidden}.top{position:relative;top:0;transform:translateX(-500rem)}@media only screen and (max-width: 120rem){body{font-size:50%}}#Welcome-screen{position:relative;font-size:.9rem;clip-path:polygon(17% 16%, 100% 0, 78% 81%, 0 100%);z-index:1;display:flex;width:60vw;color:#edf5e1;height:80vh;margin:4.5rem auto;background-color:#3500d3;flex-direction:column;flex-wrap:nowrap;justify-content:space-around;align-items:center;transition:clip-path 0.4s ease-in-out}#Welcome-screen h1{font-size:3.2rem;margin-top:16rem;transform:translateX(16rem) !important;transition:ease-in .25s transform}#Welcome-screen h1 .inner-text{opacity:0}#Welcome-screen:hover h1{transform:translateX(0) !important}#Welcome-screen:hover h1 .inner-text{opacity:1}#Welcome-screen p{transform:translateY(-2rem);font-size:1.8rem;opacity:0;transition:all .25s ease-in}#Welcome-screen:hover p{transform:translateY(-6rem);font-size:1.8rem;opacity:1}#Welcome-screen ul{list-style:none;display:flex;flex-direction:row;width:120%;margin-bottom:-4rem;margin-right:-4rem;transform:translate(-3rem, -4rem)}#Welcome-screen ul li{margin:1rem;cursor:pointer;width:6rem;padding:1rem;font-size:1.2rem;border-radius:10%;transition:transform 1s ease-in;transition-delay:1s;opacity:0.1;display:none}#Welcome-screen ul li:hover{background-color:#edf5e1;color:#05386b}#Welcome-screen:hover ul li{display:inline-block;opacity:1}.mainDiv{position:relative;z-index:5;display:grid;margin:auto;height:100vh;width:100vw;max-width:160rem}.menu{font-size:1.3rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-around;width:100%;height:20vh}.menu ul{list-style:none;display:flex;width:100%;flex-direction:row;justify-content:space-around}.menu ul li{display:inline-block;width:80%;text-align:center;height:2rem;padding:0.4%;color:#ddd;background-color:#3500d3;cursor:pointer;-webkit-box-shadow:0.6rem 1rem 3.2rem -1rem rgba(0,0,0,0.75);-moz-box-shadow:0.6rem 1rem 3.2rem -1rem rgba(0,0,0,0.75);box-shadow:0.6rem 1rem 3.2rem -1rem rgba(0,0,0,0.75)}.menu ul li.in-active-btn{background-color:#0c0032;color:#615e5e !important;box-shadow:none !important;cursor:not-allowed}.menu ul li.in-active-btn:hover{box-shadow:none !important}.menu ul li:not(:last-child){margin:0 9%}.menu ul li:last-child{margin-right:6rem !important}.menu ul li:hover{-webkit-box-shadow:0.1rem 1.1rem 3.6rem -0.1rem rgba(0,0,0,0.75);-moz-box-shadow:0.1rem 1.1rem 3.6rem -0.1rem rgba(0,0,0,0.75);box-shadow:0.1rem 1.1rem 3.6rem -0.1rem rgba(0,0,0,0.75);color:white}.menu ul li:nth-of-type(3){margin:0;margin-left:20%;width:35%}.menu ul li:nth-of-type(4){margin:0;width:30%}#play-area{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:grid;grid-template-columns:repeat(6, 1fr);column-gap:30px;margin:auto auto;row-gap:30px;width:85vw;max-width:1400px;justify-content:center;align-items:center;perspective:120rem}.Card{position:relative;display:grid;width:90%;pointer-events:none;justify-content:center;align-items:center;transform-style:preserve-3d;background-color:#3500d3;-webkit-box-shadow:0.6rem 1rem 3.2rem -1rem rgba(0,0,0,0.75);-moz-box-shadow:0.6rem 1rem 3.2rem -1rem rgba(0,0,0,0.75);box-shadow:0.6rem 1rem 3.2rem -1rem rgba(0,0,0,0.75)}.CardIn{position:relative;width:100%;display:grid;grid-template-columns:auto;height:100%;transform-style:preserve-3d;background-color:#3500d3}.card-front,.card-back{position:relative;display:grid;backface-visibility:hidden !important}.card-front{background-color:blue;color:blue}.card-back{transform:rotateY(180deg)}.card-back img{width:200px;height:250px}.result-screen{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:60%;height:55%;background-color:#240090;color:white}.result-screen h2{display:block;text-align:center;font-size:2.8rem}.result-screen h2 .span-cong{display:inline-block;margin:8rem 0 12rem 6rem;text-align:center;letter-spacing:.5rem;line-height:-1;background:-webkit-linear-gradient(#8A2387, #E94057, #F27121);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.result-screen h2 .span-res{text-align:center;margin:1rem;margin-top:-4rem;display:block;font-size:1.3rem}
