/* You can add global styles to this file, and also import other style files */ @config "../tailwind.config.js"; @import "tailwindcss"; .display-none { @apply hidden; } :root { --scroll-height: 4px; } html, body { height: 100%; } body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } img { max-width: 100%; } /* section { font-size: 1.5rem; margin-inline: auto; padding-block: var(--scroll-height); width: min(60ch, 100%); } */ .img-hiddenShow { animation: reveal 1ms ease-in-out both; animation-timeline: view(); animation-range: entry 25% cover 50%; } .c-indicator { bottom: 0; animation: scroll 1ms ease-in-out; animation-timeline: scroll(root); /* background-color: rgb(156 163 175); */ transform-origin: left; height: var(--scroll-height); inset: 0; position: fixed; z-index: 20; } @keyframes scroll { from { scale: 0 1; } to { scale: 1 1; } } /* ::-webkit-scrollbar { background: currentcolor; width: 8px; } ::-webkit-scrollbar-track { background: currentcolor; } ::-webkit-scrollbar-thumb { background: #fefefe; border-radius: 10px; } */ /* .c-indicator { margin-top: 50px; animation: scroll 1ms ease-in-out; animation-timeline: scroll(root); background-color: rgb(221, 246, 204); transform-origin: left; height: var(--scroll-height); inset: 0; position: fixed; } */ /* @keyframes scroll { from { scale: 0 1; } to { scale: 1 1; } } */ @keyframes reveal { from { opacity: 0; clip-path: inset(45% 20% 45% 20%); } to { opacity: 1; clip-path: inset(0% 0% 0% 0%); } }