@import "synthwave.css";
html {
color-scheme: dark;
background: #111;
font-family: system-ui;
--gold: lch(80% 82.34 80.104);
--gold-text: lch(85% 82.34 80.104);
--gold-shadow: lch(80% 82.34 80.104 / .7);
}
@font-face {
font-family:"din-1451-lt-pro-engschrift";
src:url("https://use.typekit.net/af/7fa6e1/00000000000000007735bbcd/30/l?primer=388f68b35a7cbf1ee3543172445c23e26935269fadd3b392a13ac7b2903677eb&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/7fa6e1/00000000000000007735bbcd/30/d?primer=388f68b35a7cbf1ee3543172445c23e26935269fadd3b392a13ac7b2903677eb&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/7fa6e1/00000000000000007735bbcd/30/a?primer=388f68b35a7cbf1ee3543172445c23e26935269fadd3b392a13ac7b2903677eb&fvd=n4&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}
@font-face {
font-family:"urbane-rounded";
src:url("https://use.typekit.net/af/916187/00000000000000007735bfa0/30/l?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/916187/00000000000000007735bfa0/30/d?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/916187/00000000000000007735bfa0/30/a?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n6&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:600;font-stretch:normal;
}
header {
max-width: 800px;
width: 100%;
margin: 0 auto;
padding: 50px 0;
font-size: 16px;
background: radial-gradient(closest-side, lch(80% 82.34 80.104 / .25), transparent);
display: grid;
column-gap: 30px;
grid-area: header;
grid-template-areas: "logo header"
"logo subheader"
". links";
}
header svg {
filter: drop-shadow(0 0 5px var(--gold-shadow)) drop-shadow(0 0 15px var(--gold-shadow));
grid-area: logo;
place-self: center end;
width: 50px;
}
header svg .outer {
stroke-width: 30px;
stroke: var(--gold);
}
header svg .inner {
fill: lch(100% 82.34 80.104);
}
header .title {
font-family: urbane-rounded, ui-rounded;
font-size: 60px;
font-weight: 600;
-webkit-text-stroke: 2px var(--gold-text);
color: transparent;
filter: drop-shadow(0 0 3px var(--gold-shadow)) drop-shadow(0 0 10px var(--gold));
margin: 0;
letter-spacing: -0.02em;
text-decoration: none;
}
header .title::selection {
-webkit-text-stroke-color: #fffddd;
background-color: var(--gold-text);
}
h1, h2, h3 {
font-family: urbane-rounded, ui-rounded;
font-weight: 600;
color: lch(65% 85 35);
margin: 2em 0 .5em 0;
letter-spacing: -0.02em;
}
h1 {
margin-top: 0;
}
header p {
grid-area: links;
margin: 0;
}
header p a {
font-family: urbane-rounded, ui-rounded;
font-weight: 600;
font-size: 1em;
color: lch(90% 50.34 80.104);
filter: drop-shadow(0 0 8px lch(90% 50.34 80.104 / .7));
text-decoration-color: lch(90% 50.34 80.104 / 0);
text-decoration-style: wavy;
text-decoration-thickness: 2px;
text-underline-offset: 2px;
text-decoration-skip-ink: none;
transition: text-decoration-color 150ms;
}
header a:hover {
text-decoration-color: lch(90% 50.34 80.104);
}
@media (width < 500px) {
header {
grid-template-areas: "logo"
"header"
"subheader"
"links";
place-items: center;
text-align: center;
gap: 8px;
}
header .title {
font-size: 38px;
-webkit-text-stroke-width: 1.5px;
padding: 0;
}
header h2 {
font-size: 14px;
}
header p a {
font-size: 13px;
}
header svg {
place-self: center;
}
}
body {
--body-padding: 20px;
padding: 0 var(--body-padding);
margin: 0 auto;
width: fit-content;
display: grid;
grid-template-columns: 180px 1fr;
gap: 40px;
grid-template-areas: "header header"
"nav main"
"footer footer";
}
main {
max-width: 800px;
padding-right: 240px;
grid-area: main;
position: relative;
}
p, li {
line-height: 1.5em;
}
p:empty {
display: none;
}
a {
color: lch(85% 58 205);
}
nav {
grid-area: nav;
text-align: end;
padding-right: 20px;
border-right: 1px solid lch(90% 50.34 80.104 / .1);
height: fit-content;
position: sticky;
top: 40px;
}
nav h3,
.table-of-contents h3 {
margin-top: 0;
}
main > aside {
position: sticky;
top: 40px;
}
.table-of-contents {
position: absolute;
left: 100%;
margin-left: 40px;
border-left: 1px solid lch(90% 50.34 80.104 / .1);
padding-left: 20px;
overflow: auto;
max-height: calc(100vh - 80px);
}
.table-of-contents ul,
nav ul {
list-style: none;
padding-left: 2ch;
}
.table-of-contents > ul {
margin: 0;
padding: 0;
width: 180px;
}
nav > ul {
margin: 0;
padding: 0;
}
.table-of-contents li,
nav li {
margin: 6px 0;
line-height: 1em;
}
.table-of-contents a,
nav a {
color: lch(90% 50.34 80.104);
text-decoration: none;
font-family: urbane-rounded;
font-size: 14px;
}
.table-of-contents a:hover,
.table-of-contents a[aria-current],
nav a:hover,
nav a[aria-current] {
color: var(--gold-text);
}
a[aria-current] {
text-decoration: underline;
}
.features {
column-count: 2;
}
@media (width < 1040px) {
.table-of-contents {
display: none;
}
main {
padding-right: 0;
}
.features {
column-count: 1;
}
}
@media (width < 600px) {
body {
display: block;
width: auto;
}
nav {
text-align: start;
border-right: none;
border-bottom: 1px solid lch(90% 50.34 80.104 / .1);
padding-bottom: 20px;
position: static;
}
}
.warning {
border: 4px solid lch(70% 82.34 80.104);
background: lch(80% 82.34 80.104 / .15);
padding: 20px;
border-radius: 8px;
margin: 20px 0;
}
.warning > :first-child {
margin-top: 0;
}
.warning > :last-child {
margin-bottom: 0;
}
.warning pre {
background: rgb(0 0 0 / .65);
}
.warning :is(h1, h2, h3) {
color: white;
}
footer {
font-size: 12px;
color: #666;
text-align: center;
padding-bottom: 20px;
grid-area: footer;
}
