:root{--color-primary: #13141f;--color-secondary: #00bcd4;--color-text-light: #fff;--color-text-dark: #000}*{margin:0;padding:0;box-sizing:border-box}html{font-size:62.5%}body{background:linear-gradient(to right,#0738ea,#ff0000ac,#00ed14);font-size:1.6rem;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.2rem}.text{padding:2rem 0;font-size:3rem;color:#fff}.button{background:#000;color:#f0f8ff;font-style:bold;cursor:pointer;width:10rem;height:3rem;border-radius:20px;border:none;transition:.5s}.button:hover{background:#434141}.card__content{position:relative;width:100%;aspect-ratio:1/1;transform-style:preserve-3d;transition:transform .6s ease-in-out}.card__content--flipped{transform:rotateY(180deg)}.card__face{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;font-size:8rem;cursor:pointer}.card__face--front{background:var(--color-primary);color:var(--color-text-light)}.card__face--back{background:var(--color-secondary);color:var(--color-text-dark);transform:rotateY(180deg)}.app{max-width:640px;min-width:320px;margin:0 auto}