Untitled
unknown
css
2 years ago
1.2 kB
3
Indexable
html, body { background: var(--default); } :root { --default: white; --empty: #3a3a3c; --wrong: #b59f3b; --right: #538d4e; } #game { display: flex; justify-content: center; align-items: start; margin-top: 5rem; width: 100%; height: 72vh; } .grid { display: grid; grid-template-rows: repeat(4, auto); grid-template-columns: repeat(4, auto); } .box { width: 60px; height: 60px; border: 2px solid var(--empty); margin: 4px; color: black; text-transform: uppercase; display: grid; place-items: center; font-family: Arial, Helvetica, sans-serif; font-size: 2.4rem; } .box.empty { background: var(--empty); } .box.wrong { background: var(--wrong); } .box.right { background: var(--right); } .animated { animation: flip 0.5s ease; } @keyframes flip { 0% { transform: scaleY(1); } 50% { transform: scaleY(0); } 100% { transform: scaleY(1); } } .title { color: black; text-align: center; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 3rem; margin-bottom: 0; position: relative; }
Editor is loading...