/* Theme Name: Doki-Doki */ @import url("https://use.typekit.net/xot3cib.css"); @font-face { font-family: "Monigue Regular"; src: url("assets/fonts/monigue-regular.woff2") format("woff2"), url("assets/fonts/monigue-regular.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } :root { /* Colors */ --color-white: #fff8ef; --color-cream: #f8dcc5; --color-dark: #451a0a; --color-green: #45998d; --color-primary: var(--color-white); --color-secondary: var(--color-cream); --color-tertiary: var(--color-dark); --color-quaternary: var(--color-green); /* Spacing */ --spacing-2xs: 8px; --spacing-xs: 12px; --spacing-s: 16px; --spacing-m: 20px; --spacing-l: 24px; --spacing-xl: 32px; --spacing-2xl: 64px; --spacing-3xl: 80px; --round-sm: 8px; --round-md: 12px; --round-lg: 16px; /* Heading */ --heading-size-1: 40px; --heading-line-1: 42px; --heading-size-2: 36px; --heading-line-2: 38px; --heading-size-3: 28px; --heading-line-3: 32px; --heading-size-4: 20px; --heading-line-4: 24px; --paragraph-size: 16px; --paragraph-line: 22px; --font-family-title: "Monigue Regular", "Inter", "Rubik", "Barlow", "IBM Plex Sans", "Segoe UI", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-family: "input-mono-compressed", monospace; } /* Reset */ *, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; } html:where([lang]) { /* Hyphens n’a d’effet qu’avec lang correct (ex: ) */ hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; } body { font-family: var(--font-family); font-size: var(--paragraph-size); line-height: var(--paragraph-line); color: var(--color-tertiary); background: var(--color-primary); font-optical-sizing: auto; font-kerning: normal; font-variant-ligatures: common-ligatures contextual; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } section.container { padding: 10px clamp(50px, 10vw, 300px); } body { font-synthesis-weight: none; font-synthesis-style: none; font-synthesis-small-caps: none; } main { padding-top: var(--spacing-m); } @media (max-width: 1200px) { section.container { padding: 10px clamp(20px, 3vw, 300px); } } h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-title); font-weight: 400; letter-spacing: 0.35rem; } h1 { font-size: var(--heading-size-1); line-height: var(--heading-line-1); } h2 { font-size: var(--heading-size-2); line-height: var(--heading-line-2); } h3 { font-size: var(--heading-size-3); line-height: var(--heading-line-3); } h4 { font-size: var(--heading-size-4); line-height: var(--heading-line-4); } p { white-space: pre-line; text-wrap: pretty; overflow-wrap: break-word; word-break: normal; margin: 0 0 0.8em; font-size: var(--paragraph-size); line-height: var(--paragraph-line); } a { color: inherit; text-decoration: none; text-decoration-thickness: from-font; text-decoration-skip-ink: auto; } :where(h1, h2, h3, h4, h5, h6) { line-height: 1.2; letter-spacing: -0.005em; text-wrap: balance; font-kerning: normal; font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "calt" 1; } img { width: 100%; height: auto; object-fit: cover; } ul { list-style: none; } .icon { display: flex; align-items: center; justify-content: center; height: 25px; width: 25px; } .btn-primary { padding: 8px 12px; background-color: var(--color-quaternary); } @supports (hanging-punctuation: first) { p, li, blockquote { hanging-punctuation: first last; } } @supports (leading-trim: both) { :where(h1, h2, h3) { leading-trim: both; text-edge: cap alphabetic; } } svg, svg * { text-rendering: geometricPrecision; font-feature-settings: normal; } input { } input::placeholder { } input::placeholder, textaera::placeholder, textarea { }