*{padding:0;margin:0;box-sizing:border-box}.body-container{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#494d5f;width:100vw;height:100vh}h1{color:azure;margin:10px;bottom:0}h2{color:#dedede}.title{display:flex;justify-content:end;flex-direction:column;align-items:center;height:0vh}.flip-card{background-color:transparent;width:180px;height:180px;perspective:1000px}.flip-card-inner{position:relative;width:100%;height:100%;text-align:center;transition:transform .6s;transform-style:preserve-3d;box-shadow:0 4px 8px #0003}.flip-card-inner.flipped{transform:rotateY(180deg)}.flip-card-front,.flip-card-back{position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}.flip-card-front{color:#000}.flip-card-back{transform:rotateY(180deg);display:flex;justify-content:center;align-items:center}.grid-mapping{width:fit-content;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;grid-gap:20px}.main-container{display:flex;justify-content:center;align-items:center;gap:20px;width:100%;height:100%;margin:auto 0}.buttons-container{display:flex;flex-direction:column;align-self:center;gap:5px;font-size:large;color:#dcdcdc}.circle{border-radius:50%;border:4px solid gainsboro;background-color:#7f7f7f;width:50px;height:50px;text-align:center;display:flex;justify-content:center;align-items:center}.start-page-container{display:flex;justify-content:center;align-items:center;height:100vh;background:linear-gradient(135deg,#494d5f,#ddd)}.start-button{padding:15px 30px;font-size:1.5rem;font-weight:700;color:#000;background-color:#fff;border:none;border-radius:8px;cursor:pointer;transition:transform .2s ease,background-color .3s ease}.start-button:hover{background-color:#0d0404;color:#fff;transform:scale(1.05)}.start-button:active{transform:scale(.95)}