.main { display: flex; flex-direction: column; justify-content: space-around; align-items: center; margin: 10vh 10vw; } .begin { margin: 25vh 0; padding: 1rem 1.2rem; border-radius: var(--border-radius); background: rgba(var(--card-rgb), 0.3); border: 1px solid rgba(var(--card-border-rgb), 0); transition: background 200ms, border 200ms; } .description { font-family: var(--font-sans); width: 100%; display: flex; justify-content: space-between; } /* Enable hover only on non-touch devices */ @media (hover: hover) and (pointer: fine) { .begin:hover { background: rgba(var(--card-rgb), 0.1); border: 1px solid rgba(var(--card-border-rgb), 0.15); } .begin:hover span { transform: translateX(4px); } } @media (prefers-reduced-motion) { .begin:hover span { transform: none; } }