@font-face { font-family: PingLCG; src: url('7dba.woff2') format('woff2'); } @font-face { font-family: PingLCG-Bold; src: url('6404.woff2') format('woff2'); } @font-face { font-family: ThinkFood; src: url('6975.ttf') format('truetype'); } /* https://www.freepik.com/free-photo/plate-with-toast-office-breakfast-with-copy-space_8623231.htm#fromView=keyword&page=1&position=35&uuid=5ecfa4e0-e020-48f3-bbc8-ca647be64c8d&query=Food+White+Background */ :root { --font-family: 'PingLCG'; --tsf-base-brand-color: #d14545; --tsf-transition-time: 0.0s; --color: #567; --text-emphasis-color: #000; --hover-emphasis-color: #000; --hover-emphasis-background-color: #00000016; --link-color: #456; --font-size: 16px; --error-color: red; --focused-color: #007BFF; --hover-color: #000; --selected-color: #fff; --selected-background-color: #526D82; --section-background-color: #f4f4f4; --section-padding: 1rem; --border-radius: 0.25rem; --intro--page-clamp-min: 22rem; --intro--page-clamp-bet: 50vw; --intro--page-clamp-max: 38rem; color: var(--color); } * { padding: 0; font-size: var(--font-size); box-sizing: border-box; font-family: var(--font-family), 'Arial', sans-serif; } html, body { height: 100%; margin: 0; } .spinner { display: inline-block; width: 1rem; height: 1rem; border: 0.2rem solid rgba(0, 123, 255, 0.2); border-top-color: rgba(0, 123, 255, 1); /* The lighter quarter */ border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 100% { transform: rotate(360deg); } } small, sub, sup { font-size: .83rem } sub { vertical-align: sub } sup { vertical-align: super } @keyframes bg-pulse { 0%, 100% { background-size: 100%; } 50% { background-size: 210%; } } /* Scrollbar track */ ::-webkit-scrollbar { width: 8px; /* Width of the vertical scrollbar */ height: 8px; /* Height of the horizontal scrollbar */ } /* Scrollbar thumb */ ::-webkit-scrollbar-thumb { background-color: rgba(80, 80, 80, 0.5); /* Color of the scrollbar thumb */ border-radius: 8px; /* Optional: Rounded corners */ } /* Scrollbar track */ ::-webkit-scrollbar-track { background-color: transparent; /* Color of the scrollbar track */ } ::-webkit-scrollbar-thumb:hover { background-color: #000; } ::-webkit-scrollbar-thumb:active { background-color: #888; } ::-webkit-scrollbar-track { background-color: transparent; } ::-webkit-scrollbar-track-piece { background-color: transparent; } .full-width { width: 100%; } .max-width-20 { width: 100%; max-width: 20rem; } .max-width-30 { max-width: 30rem; } .max-width-40 { max-width: 40rem; } .flex-container { display: flex; column-gap: 1rem; } single-line-space { min-height: 1rem; display: block; } double-line-space { min-height: 2rem; display: block; } /* tutorial */ .tutorial-pointer { position: absolute; width: 20px; height: 20px; background: rgba(255, 193, 7, 0.9); border: 3px solid #ffc107; border-radius: 50%; pointer-events: none; z-index: 1000; transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); opacity: 0; left: 50%; top: 50%; transform: translateX(-50%); } .tutorial-pointer.active { opacity: 1; animation: pulse 2s infinite; } .tutorial-pointer::before { content: ''; /*top: 50%; left: 50%;*/ /*width: 20px; height: 20px;*/ background: #ffc107; /*border-radius: 50%; transform: translate(-50%, -50%);*/ } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); } 50% { box-shadow: 0 0 0 20px rgba(255, 193, 7, 0); } }