:root { --thickness: 1px; --background: #9fd3a8; --font: Arial, Helvetica, sans-serif; } html, body { margin: 0; background-color: var(--background); font-size: 24px; font-family: var(--font); height: 100vh; } /* .container { position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(-50%, -50%); display: flex; flex-direction: column; margin: 0 auto; justify-content: start; align-items: center; } .about-button { width: 200px; height: 200px; border: var(--thickness) solid currentColor; background-color: var(--background); border-radius: 50%; font-size: 48px; } .about-button:hover { background-color: white; cursor: pointer; } */ /* .title, */ .info { display: inline-block; padding: 8px; background-color: var(--background); border: var(--thickness) solid currentColor; margin: 0; } #sticker-container { position: fixed; left: 0; top: 0; bottom: 0; right: 0; z-index: 100; } .sticker { position: absolute; user-select: none; border: var(--thickness) solid currentColor; border-radius: 16px; box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); } .sticker.info { background-color: white; } .informations-list { display: none; } .sticker.deco { background-color: white; min-width: 64px; min-height: 64px; padding: 16px; } li { list-style: none; }