body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";background:#0e0e0e}main{display:flex;justify-content:center;align-items:center;flex-direction:column;position:fixed;height:100vh;width:100vw;background:black;background-image:url("https://images.unsplash.com/photo-1451187580459-43490279c0fa");background-size:cover}h1{color:white;background:#3E87F1;padding:20px 30px;border-radius:20px;background-image:linear-gradient(90deg, #5770EC, #08BAFE);text-shadow:0px 0 10px rgba(0,0,0,0.4)}.cards{display:grid;grid-template-columns:200px 200px 200px;grid-template-rows:200px 200px 200px;grid-gap:20px;padding:30px;background:rgba(255,255,255,0.781);backdrop-filter:blur(15px);border-radius:20px}.cards div{width:100%;height:100%}.cards div .card{position:relative;font-size:25px;color:white;transition:transform 1s linear;transform-style:preserve-3d;cursor:pointer}.cards div .card:hover{transform:rotateY(-180deg)}.cards div .card .front,.cards div .card .back{display:grid;place-items:center;text-align:center;position:absolute;width:100%;height:100%;border-radius:20px;text-shadow:0px 0 10px rgba(0,0,0,0.4);box-shadow:rgba(0,0,0,0.1) 0px 4px 12px}.cards div .card .front{z-index:2;background:#FFFFFF;background-image:linear-gradient(90deg, #ED6F9F, #ED8C6B);backface-visibility:hidden}.cards div .card .back{z-index:1;background-image:linear-gradient(90deg, #d46945, #db4880);backface-visibility:visible;transform:rotateY(180deg)}