50 lines
1.8 KiB
CSS
50 lines
1.8 KiB
CSS
@font-face {
|
|
font-family: "DotGothic16";
|
|
src: url("/fonts/DotGothic16.woff2") format("woff2");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: "VT323";
|
|
src: url("/fonts/VT323.woff2") format("woff2");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: "ReenieBeanie";
|
|
src: url("/fonts/ReenieBeanie.woff2") format("woff2");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html, body { margin: 0; padding: 0; }
|
|
body {
|
|
background:
|
|
radial-gradient(ellipse at 20% 0%, #ff3ea522 0%, transparent 45%),
|
|
radial-gradient(ellipse at 80% 30%, #5ef7ff14 0%, transparent 45%),
|
|
radial-gradient(ellipse at 50% 100%, #a78bff22 0%, transparent 50%),
|
|
var(--plum);
|
|
color: var(--cream);
|
|
font-family: var(--f-mono);
|
|
min-height: 100vh;
|
|
font-variant-emoji: text;
|
|
}
|
|
body::before {
|
|
content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
|
|
opacity: 0.07; mix-blend-mode: overlay;
|
|
}
|
|
body::after {
|
|
content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 99;
|
|
background: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 3px);
|
|
opacity: 0.5;
|
|
}
|
|
a { color: var(--cyan); text-decoration: none; }
|
|
a:hover { color: var(--cream); text-decoration: underline; }
|
|
::selection { background: var(--pink); color: var(--ink); }
|
|
|
|
.page { max-width: 1200px; margin: 0 auto; padding: 24px 28px 0; position: relative; z-index: 1; }
|