*{padding:0;margin:0;box-sizing:border-box}:root{--bg-main-color: #1E2337;--second-color: #02040E;--main-white: #F7F9FB;--line-color: #ff8d3a}body{background-color:var(--second-color);width:100%;height:100vh;overflow:hidden;display:flex;justify-content:center;align-items:center;text-align:center}h2,p{font-family:Poppins,sans-serif;color:var(--main-white);font-weight:500;text-align:center;margin-top:20px;margin-bottom:20px}input{width:300px;height:50px;background-color:var(--bg-main-color);border:2px solid var(--line-color);border-radius:20px;font-family:Poppins,sans-serif;color:var(--main-white);padding:10px;outline:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{width:100px;height:45px;background:linear-gradient(to right,#ffcf23,#ff8d3a);color:#02040e;border-radius:20px;font-family:Poppins,sans-serif;font-size:1rem;font-weight:600;outline:none;border:none;transform:translate(10px)}.wonDiv{opacity:0;bottom:-100%;width:100%;height:100vh;position:absolute;left:0;background-color:var(--bg-main-color);display:flex;justify-content:center;align-items:center;color:var(--main-white);font-family:Poppins,sans-serif;flex-direction:column;transition:all .4s ease}.wonDiv.active{opacity:1;bottom:0%}.wonDiv h1{margin-top:30px;margin-bottom:60px}.guessBtn{opacity:.2;transition:all .1s ease}.guessBtn.active{opacity:1;box-shadow:0 3px 3px #02040e}.playAgainBtn{padding:0 20px;box-sizing:content-box}.fade-enter-active,.fade-leave-active{transition:opacity .2s}.fade-enter-from,.fade-leave-to{opacity:0}@media (max-width: 768px){body{height:100dvh;width:100%;display:flex;flex-direction:column;align-items:center;padding:7px}h2{margin-bottom:30px;font-weight:600}input{width:90%}button{margin-top:60px;width:60%;transform:translate(0)}}