*{margin:0;box-sizing:border-box}.App{display:flex;justify-content:center;align-items:center;min-height:100vh;background:url(https://images.unsplash.com/photo-1503264116251-35a269479413?auto=format&fit=crop&w=1950&q=80) no-repeat center center fixed;background-size:cover;padding:20px}.item{width:6rem;height:6rem;perspective:1000px;position:relative}.item>div{position:relative;width:100%;height:100%;transform-style:preserve-3d}.face{height:6rem;width:6rem;position:absolute;transform:rotateY(90deg);transition:all ease-in .25s;background:#ffffff26;border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border-radius:10px;object-fit:cover}.toggled .face{transform:rotateY(0);transition-delay:.25s}.back{height:6rem;width:6rem;position:absolute;transition:all ease-in .25s;transition-delay:.25s;background-color:#fddaaf;color:#3d1515;border:1px solid black;border-radius:50%;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.toggled .back{transform:rotateY(90deg);transition-delay:0s}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Poppins,sans-serif;background:url(https://images.unsplash.com/photo-1503264116251-35a269479413?auto=format&fit=crop&w=1950&q=80) no-repeat center center fixed;background-size:cover;color:#fff;min-height:100vh;display:flex;justify-content:center;align-items:center}.container{background:#ffffff1a;border-radius:15px;padding:30px;min-width:100%;width:90%;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);box-shadow:0 8px 32px #1f26875e}.header{text-align:center;margin-bottom:20px}.header h1{font-size:2rem;text-shadow:0 2px 4px rgba(0,0,0,.3)}.board{display:grid;grid-gap:20px;justify-content:center;margin:20px auto;grid-template-columns:repeat(2,6rem)}@media (min-width: 576px) and (max-width: 767.98px){.board{grid-template-columns:repeat(3,6rem)}}@media (min-width: 768px) and (max-width: 991.98px){.board{grid-template-columns:repeat(4,6rem)}}@media (min-width: 992px) and (max-width: 1199.98px){.board{grid-template-columns:repeat(5,6rem)}}@media (min-width: 1200px){.board{grid-template-columns:repeat(6,6rem)}}.card{background:#ffffff26;border-radius:10px;border:1px solid rgba(255,255,255,.3);padding:20px;text-align:center;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);transition:transform .2s ease,box-shadow .2s ease;font-weight:600}.card:hover{transform:scale(1.05);box-shadow:0 8px 32px #1f26875e}.comments{text-align:center;font-size:1.2rem;margin:20px 0}.button{display:block;margin:0 auto;padding:10px 20px;font-size:1rem;font-weight:600;color:#fff;background:#ffffff40;border:1px solid rgba(255,255,255,.18);border-radius:10px;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);cursor:pointer;transition:background-color .3s ease,transform .2s ease}.button:hover{background:#ffffff59;transform:scale(1.05)}