@font-face { font-family: "Young Serif"; src: url(young-serif-400.6ba68b9927.woff2) format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Figtree"; src: url(figtree-400.8f98dd6429.woff2) format("woff2"); font-weight: 400; font-display: swap; } :root { --serif: "Young Serif", Georgia, "Times New Roman", serif; --sans: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif; --bund: #112242; --tal: #E3C77A; --tekst: #F6F4EE; --tekst-2: #C9CFDD; --boks: rgba(246, 244, 238, .08); --boks-kant: rgba(217, 181, 98, .35); --fokus: #E3C77A; color-scheme: dark; } :root[data-stil="papir"] { --bund: #F6F4EE; --tal: #B8202E; --tekst: #1E4A39; --tekst-2: #3D4559; --boks: rgba(28, 34, 51, .05); --boks-kant: rgba(184, 32, 46, .3); --fokus: #B8202E; color-scheme: light; } :root[data-stil="filt"] { --bund: #1E4A39; --tal: #B8202E; --tekst: #1C2233; --tekst-2: #3D4559; --boks: rgba(28, 34, 51, .05); --boks-kant: rgba(30, 74, 57, .3); --fokus: #F6F4EE; color-scheme: light; } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; margin: 0; } html { background: var(--bund); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { overflow: hidden; font-family: var(--sans); font-size: clamp(11px, min(4.2vw, 7vh), 160px); line-height: 1.25; color: var(--tekst); } :root[data-markoer="0"] body { cursor: none; } .w { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: .7em 1em 1.7em; isolation: isolate; } .w p { margin: 0; } .w-kort { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 100%; } .w-tekst { display: flex; flex-direction: column; align-items: center; } .w-tal { font-family: var(--serif); font-size: 4.6em; line-height: 1; color: var(--tal); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; } :root[data-ord="1"] .w-tal { font-size: 2.3em; letter-spacing: 0; } .w-enhed { font-family: var(--serif); font-size: 1.35em; margin-top: .12em; } .w-linje { font-size: 1em; color: var(--tekst-2); margin-top: .3em; } .w-ur { display: flex; justify-content: center; gap: .4em; margin-top: .65em; } .w-ur[hidden], .w-ur > [hidden] { display: none; } .w-ur > span { min-width: 3.3em; padding: .3em .45em .25em; border-radius: .45em; background: var(--boks); box-shadow: inset 0 0 0 1px var(--boks-kant); font-size: .85em; color: var(--tekst-2); display: flex; flex-direction: column; align-items: center; } .w-ur b { font-family: var(--serif); font-weight: 400; font-size: 1.5em; line-height: 1.1; color: var(--tekst); font-variant-numeric: tabular-nums; } .w-kilde { position: absolute; right: .7em; bottom: .45em; font-size: max(11px, .78em); color: var(--tekst-2); text-decoration: none; opacity: .9; z-index: 2; } .w-kilde:hover { text-decoration: underline; } .w-kilde:focus-visible, .w-fuld:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: 2px; } .w-fuld { position: absolute; left: .7em; bottom: .45em; z-index: 2; font: inherit; font-size: max(12px, .8em); padding: .3em .8em; border-radius: 999px; border: 1px solid var(--boks-kant); background: var(--boks); color: var(--tekst); cursor: pointer; } .w-fuld[hidden], :root[data-fuld="1"] .w-fuld { display: none; } :root[data-fuld="1"] .w-kilde { opacity: .55; } .sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .hjerte { display: none; } :root[data-stil="nat"] .w { background: radial-gradient(140% 70% at 50% 118%, #F6F4EE 0 34%, transparent 34.4%), radial-gradient(110% 90% at 50% 0%, #1A2D52, #112242 60%); } :root[data-stil="nat"] .w-kilde { color: #C9CFDD; text-shadow: 0 0 3px #112242, 0 0 2px #112242; } :root[data-stil="nat"] .w-fuld { color: #1C2233; background: rgba(246, 244, 238, .9); border-color: transparent; } :root[data-stil="nat"] .w-fuld:focus-visible { outline-color: #E3C77A; } :root[data-stil="nat"] .w::before, :root[data-stil="nat"] .w::after { content: ""; position: absolute; inset: 0 0 30% 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 8% 18%, #E3C77A 0 1.6px, transparent 2.4px), radial-gradient(circle at 23% 62%, #F6F4EE 0 1px, transparent 1.8px), radial-gradient(circle at 37% 12%, #F6F4EE 0 1.2px, transparent 2px), radial-gradient(circle at 71% 22%, #E3C77A 0 1.8px, transparent 2.6px), radial-gradient(circle at 86% 55%, #F6F4EE 0 1px, transparent 1.8px), radial-gradient(circle at 93% 12%, #F6F4EE 0 1.3px, transparent 2px); } :root[data-stil="nat"] .w::after { background: radial-gradient(circle at 14% 40%, #F6F4EE 0 1.2px, transparent 2px), radial-gradient(circle at 52% 8%, #E3C77A 0 1.4px, transparent 2.2px), radial-gradient(circle at 62% 48%, #F6F4EE 0 1px, transparent 1.8px), radial-gradient(circle at 80% 35%, #F6F4EE 0 1.1px, transparent 1.9px); animation: blink 4.5s ease-in-out infinite alternate; } :root[data-stil="nat"] .w-enhed { color: var(--tekst); } @keyframes blink { from { opacity: 1; } to { opacity: .25; } } :root[data-stil="nat"][data-visning="direkte"] { --by-h: min(40vh, 31.5vw); } :root[data-stil="nat"][data-visning="direkte"] .w { --rest: linear-gradient(to top, #F7F3ED, #EAE5DE calc(var(--by-h) * .4), rgba(234, 229, 222, 0) calc(var(--by-h) * .47)), radial-gradient(110% 90% at 50% 0%, #1A2D52, #112242 60%); padding-bottom: calc(var(--by-h) * .97); background: url(billeder-hero-by-1536.97f70dbb8e.webp) center bottom / auto var(--by-h) no-repeat, var(--rest); } :root[data-stil="nat"][data-visning="direkte"] .w::before, :root[data-stil="nat"][data-visning="direkte"] .w::after { inset: 0 0 50% 0; } :root[data-stil="nat"][data-visning="direkte"] .w-kilde { color: #1C2233; text-shadow: none; } :root[data-visning="direkte"] body { font-size: clamp(11px, min(4.2vw, 5.6vh), 160px); } :root[data-stil="nat"][data-visning="direkte"] body { font-size: clamp(11px, min(4.2vw, 4.8vh), 160px); } @media (max-aspect-ratio: 1/1) { :root[data-stil="nat"][data-visning="direkte"] { --by-h: min(32vh, 45.8vw); } :root[data-stil="nat"][data-visning="direkte"] .w { background-image: url(billeder-hero-by-m-1056.f5efb8afb1.webp), var(--rest); } } :root[data-stil="papir"] .w { background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, #F6F4EE; box-shadow: inset 0 0 0 .32em #F6F4EE, inset 0 0 0 calc(.32em + max(2px, .07em)) #B8202E; } :root[data-stil="papir"] .hjerte { display: block; position: absolute; left: .85em; top: .75em; width: max(18px, 1.5em); height: auto; } :root[data-stil="papir"] .w-enhed { color: #1E4A39; } :root[data-stil="papir"] .w-kilde { right: 1em; bottom: .75em; } :root[data-stil="papir"] .w-fuld { left: 1em; bottom: .75em; } :root[data-stil="papir"] .w { padding-bottom: 2.1em; } :root[data-stil="filt"] .w-linje { text-wrap: balance; } :root[data-stil="filt"] .w { background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, radial-gradient(120% 90% at 50% 25%, #25583F, #1E4A39 55%, #173B2D); padding: 1em 1.4em 1.9em; } :root[data-stil="filt"] .w-kort { background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, #F6F4EE; border-radius: .5em; padding: .55em 1.2em .7em; transform: rotate(-1.2deg); box-shadow: 0 1px 0 rgba(28, 34, 51, .1), 0 .5em 1.1em -.4em rgba(0, 0, 0, .55); position: relative; } :root[data-stil="filt"] .hjerte { display: block; position: absolute; right: .7em; top: .6em; width: max(16px, 1.3em); height: auto; transform: rotate(12deg); } :root[data-stil="filt"] .w-kilde, :root[data-stil="filt"] .w-fuld { color: #F6F4EE; } :root[data-stil="filt"] .w-fuld { background: rgba(246, 244, 238, .12); border-color: rgba(246, 244, 238, .35); } :root[data-stil="filt"] .w::after { content: ""; position: absolute; inset: -20% 0 0 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 10% 10%, rgba(246, 244, 238, .7) 0 1.5px, transparent 2.3px), radial-gradient(circle at 30% 40%, rgba(246, 244, 238, .55) 0 1.2px, transparent 2px), radial-gradient(circle at 55% 15%, rgba(246, 244, 238, .65) 0 1.6px, transparent 2.4px), radial-gradient(circle at 78% 45%, rgba(246, 244, 238, .55) 0 1.2px, transparent 2px), radial-gradient(circle at 90% 20%, rgba(246, 244, 238, .7) 0 1.5px, transparent 2.3px); background-size: 100% 50%; animation: sne 14s linear infinite; } @keyframes sne { from { transform: translateY(0); } to { transform: translateY(16.7%); } } @media (min-aspect-ratio: 13/5) { body { font-size: clamp(11px, min(2.2vw, 14vh), 64px); } .w { text-align: left; padding: .5em 5.5em .5em 1.2em; } .w-kort { flex-direction: row; gap: .9em; } .w-tekst { align-items: flex-start; } .w-tal { font-size: min(62vh, 5.2em); } :root[data-ord="1"] .w-tal { font-size: min(34vh, 2.6em); } .w-ur { justify-content: flex-start; margin-top: .35em; } .w-kilde { bottom: auto; top: 50%; transform: translateY(-50%); } :root[data-stil="filt"] .hjerte { display: none; } :root[data-stil="papir"] .w-kilde { right: 1em; } } @media (min-aspect-ratio: 13/5) and (max-height: 159px) { :root[data-ur="1"] .w-linje { display: none; } } @media (max-height: 159px) and (max-aspect-ratio: 13/5) { .w-linje, .w-ur { display: none; } .w { padding-bottom: 1.4em; } } @media (max-height: 100px) { .w-linje { display: none; } .w-ur > span { padding: .1em .35em; } } @media (min-width: 1100px) and (min-height: 600px) { .w-ur > span { font-size: .9em; } .w-kilde, .w-fuld { font-size: max(14px, .45em); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } @media (forced-colors: active) { .w-tal, .w-enhed { color: CanvasText; } }