.flip-box{background-color:transparent;width:200px;height:200px;border:1px solid #f1f1f1;perspective:1000px}.flip-box-inner{position:relative;width:100%;height:100%;text-align:center;transition:transform .8s;transform-style:preserve-3d}.flip-box-back,.flip-box:hover .flip-box-inner{transform:rotateY(180deg)}.flip-box-back,.flip-box-front{position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}.flip-box-front{background-color:#bbb;color:#000}.flip-box-back{background-color:#1e90ff;color:#fff}
.guesser{width:95%;background:#ccfbe5;}.guesser h4{font-size:25px;font-weight:500;padding:20px 25px;border-bottom:1px solid #ccc}.guesser .gontent{margin:25px 25px 35px}.gontent .inputs{display:flex;flex-wrap:wrap;justify-gontent:center}.inputs input{height:57px;width:56px;margin:4px;font-size:24px;font-weight:500;color:#1ba98c;text-align:center;border-radius:5px;background:0 0;pointer-events:none;text-transform:uppercase;border:1px solid #b5b5b5}.typing-input{opacity:0;z-index:-999;position:absolute;pointer-events:none}.inputs input:first-child{margin-left:0}.gontent .details{margin:20px 0 25px}.details p{font-size:19px;margin-bottom:10px}@media screen and (max-width:460px){.guesser{width:100%}.guesser h1{font-size:22px;padding:16px 20px}.guesser .gontent{margin:25px 20px 35px}.inputs input{height:51px;width:50px;margin:3px;font-size:22px}.details p{font-size:17px}}