@font-face { font-family: IBM_Plex; src: url("/static/fonts/IBM_Plex/IBMPlexSans-VariableFont_wdth\,wght.ttf"); font-weight: 400; } @font-face { font-family: redaction-10; src: url("/static/fonts/redaction/webfonts/Redaction_10-Bold.woff2"); } @font-face { font-family: redaction-20; src: url("/static/fonts/redaction/webfonts/Redaction_20-Bold.woff2"); } @font-face { font-family: redaction-35; src: url("/static/fonts/redaction/webfonts/Redaction_35-Bold.woff2"); } @font-face { font-family: redaction-50; src: url("/static/fonts/redaction/webfonts/Redaction_50-Bold.woff2"); } @font-face { font-family: redaction-70; src: url("/static/fonts/redaction/webfonts/Redaction_70-Bold.woff2"); } @font-face { font-family: redaction-100; src: url("/static/fonts/redaction/webfonts/Redaction_100-Bold.woff2"); } :root { --c-bg: #08080a; --c-fg: #e6e1f2; --c-link: #d7ffea; --c-link-glow: #53f49e; --f-text: "IBM_Plex", sans-serif; } html { font-family: var(--f-text); color: var(--c-fg); background-color: var(--c-bg); font-size: 1.4rem; padding-bottom: 10rem; } body { max-width: 60dvw; padding-left: 1rem; padding-right: 1rem; margin: auto; } footer { margin-top: 5rem; text-align: center; } h1, h2, h3, h4, h5, h6 { margin-top: 1rem; margin-bottom: 0.5rem; a { text-decoration: none; &:visited { color: var(--c-link); } } } a, .title, .bunt { color: var(--c-link); text-shadow: 0 0 5px var(--c-link-glow); } a:hover { color: var(--c-link-glow); } .title { animation: redact 1s infinite; animation-direction: alternate; animation-timing-function: linear; font-size: 6rem; margin-top: 1em; } .glow { text-shadow: 0 0 50px var(--c-link-glow) !important; } @keyframes redact { 0% { font-family: "redaction-10"; } 20% { font-family: "redaction-20"; } 40% { font-family: "redaction-35"; } 60% { font-family: "redaction-50"; } 80% { font-family: "redaction-70"; } 100% { font-family: "redaction-100"; } }