intr0.com/public/css/style.css

@media screen and (prefers-color-scheme:dark) {
:root {
font-size:clamp(0.875rem,-webkit-calc(0.875rem + ((1vw - 0.1rem) * 0.7328)),3rem);
font-size:clamp(0.875rem,calc(0.875rem + ((1vw - 0.1rem) * 0.7328)),3rem);
min-height:0vw;
--mono-font-fallback:ui-monospace,"SF Mono","Cascadia Code","Segoe UI Mono","Roboto Mono","Liberation Mono","Noto Sans Mono",Menlo,monospace;
--sans-font-fallback:ui-sans-serif,"SF Pro Text","Segoe UI","Open Sans",Roboto,"Liberation Sans","Noto Sans",sans-serif;
--serif-font-fallback:ui-serif,"New York","Liberation Serif","Noto Serif","Roboto Slab",serif
}

a strong {
color:#696
}

a,nav ol li a,nav ul li a {
color:#696;
text-decoration:none
}

blockquote {
border-left:.25rem solid #eee;
font:400 1.3rem/2.6 var(--serif-font-fallback);
margin:1rem 0;
padding-left:1rem
}

body {
background:#2f2f2f;
color:#fdfdfd;
font:300 1.3rem/2.6 var(--sans-font-fallback);
height:100vh;
padding:env(safe-area-inset-top,1.25rem) env(safe-area-inset-right,1.25rem) env(safe-area-inset-bottom,1.25rem) env(safe-area-inset-left,1.25rem);
white-space:pre-line
}

button {
-moz-border-radius:.075rem;
-moz-box-shadow:3px 3px 12px -6px #000;
-webkit-border-radius:.075rem;
-webkit-box-shadow:3px 3px 12px -6px #000;
background:#363;
border:#000;
border-radius:.075rem;
box-shadow:3px 3px 12px -6px #000;
color:#fff;
display:inline-block;
font:400 1.15rem/1.4 var(--sans-font-fallback);
margin-left:.1rem;
margin-right:.1rem;
margin-top:0;
padding:.5rem 1rem;
text-align:center;
vertical-align:middle;
white-space:nowrap
}

code {
background:#000;
color:#fff;
font:400 1.15rem/2.6 var(--mono-font-fallback);
white-space:pre-wrap
}

footer {
text-align:center
}

h1 {
font-size:-webkit-calc(1rem + 5vmin);
font-size:calc(1rem + 5vmin);
margin:5vmin 0 2vmin
}

h1,h2,h3 {
font-family:var(--sans-font-fallback);
font-weight:200
}

h2 {
font-size:-webkit-calc(1rem + 4vmin);
font-size:calc(1rem + 4vmin);
margin:4vmin 0 1.5vmin
}

h3 {
font-size:-webkit-calc(1rem + 3vmin);
font-size:calc(1rem + 3vmin);
margin:3vmin 0 1vmin
}

hr {
border:#ccc solid .02rem
}

html {
-moz-box-sizing:border-box;
-ms-scroll-chaining:none;
-webkit-box-sizing:border-box;
box-sizing:border-box;
overscroll-behavior:none;
text-rendering:optimizeSpeed
}

nav ol li {
display:inline;
line-height:2.6;
list-style:none;
margin-left:-1rem;
margin-right:1.5rem;
overflow:scroll;
white-space:nowrap
}

nav ol li a,nav ul li a {
-moz-border-radius:.2rem;
-webkit-border-radius:.2rem;
background:#3a3a3a;
border:#333 outset .02rem;
border-radius:.2rem;
font:300 1.2rem var(--sans-font-fallback);
overflow:auto
}

nav ul li {
line-height:2.6;
list-style:none;
margin-bottom:1rem;
margin-left:-1rem;
margin-top:1rem
}

nav ul li p {
overflow:auto;
overflow-wrap:break-word;
white-space:pre-line
}

p {
clear:both;
text-align:left;
text-indent:.125rem
}

pre {
-moz-border-radius:.02rem;
-webkit-border-radius:.02rem;
background:#000;
border:#333 solid .02rem;
border-radius:.02rem;
color:#fff;
font:400 1.1rem/1.6 var(--mono-font-fallback);
overflow:auto;
padding:.5rem;
word-break:normal
}

strong {
background:#1f1f1f;
color:#fdfdfd;
font-weight:600;
position:relative
}

strong:before {
-moz-transform:skewX(1.65deg) rotate(-1.15deg);
-ms-transform:skewX(1.65deg) rotate(-1.15deg);
-o-transform:skewX(1.65deg) rotate(-1.15deg);
-webkit-transform:skewX(1.65deg) rotate(-1.15deg);
background:#6a6a6a;
bottom:0;
content:"";
display:inline-block;
height:102%;
left:0;
opacity:.3;
padding:.15rem;
position:absolute;
right:0;
top:0;
transform:skewX(1.65deg) rotate(-1.15deg);
width:102%;
z-index:-1
}

strong:nth-last-of-type(1) {
-ms-transform:skewX(-1.25deg) rotate(1.45deg);
-webkit-transform:skewX(-1.25deg) rotate(1.45deg);
transform:skewX(-1.25deg) rotate(1.45deg)
}

@media all and (display-mode: fullscreen) {
body {
border:.3rem solid #fff;
margin:0
}
}
}

@media screen and (prefers-color-scheme:light) {
:root {
font-size:clamp(0.875rem,-webkit-calc(0.875rem + ((1vw - 0.1rem) * 0.7328)),3rem);
font-size:clamp(0.875rem,calc(0.875rem + ((1vw - 0.1rem) * 0.7328)),3rem);
min-height:0vw;
--mono-font-fallback:ui-monospace,"SF Mono","Cascadia Code","Segoe UI Mono","Roboto Mono","Liberation Mono","Noto Sans Mono",Menlo,monospace;
--sans-font-fallback:ui-sans-serif,"SF Pro Text","Segoe UI","Open Sans",Roboto,"Liberation Sans","Noto Sans",sans-serif;
--serif-font-fallback:ui-serif,"New York","Liberation Serif","Noto Serif","Roboto Slab",serif
}

a strong {
color:#363
}

a,nav ol li a,nav ul li a {
color:#363;
text-decoration:none
}

blockquote {
border-left:.25rem solid #111;
font:400 1.3rem/2.6 var(--serif-font-fallback);
margin:1rem 0;
padding-left:1rem
}

body {
background:#f2f2f2;
color:#000;
font:300 1.3rem/2.6 var(--sans-font-fallback);
height:100vh;
padding:env(safe-area-inset-top,1.25rem) env(safe-area-inset-right,1.25rem) env(safe-area-inset-bottom,1.25rem) env(safe-area-inset-left,1.25rem);
white-space:pre-line
}

button {
-moz-border-radius:.075rem;
-moz-box-shadow:3px 3px 12px -6px #000;
-webkit-border-radius:.075rem;
-webkit-box-shadow:3px 3px 12px -6px #000;
background:#363;
border:#fff;
border-radius:.075rem;
box-shadow:3px 3px 12px -6px #000;
color:#fff;
display:inline-block;
font:400 1.15rem/1.4 var(--sans-font-fallback);
margin-left:.1rem;
margin-right:.1rem;
margin-top:0;
padding:.5rem 1rem;
text-align:center;
vertical-align:middle;
white-space:nowrap
}

code {
background:#fff;
color:#000;
font:400 1.15rem/2.6 var(--mono-font-fallback);
white-space:pre-wrap
}

footer {
text-align:center
}

h1 {
font-size:-webkit-calc(1rem + 5vmin);
font-size:calc(1rem + 5vmin);
margin:5vmin 0 2vmin
}

h1,h2,h3 {
font-family:var(--sans-font-fallback);
font-weight:200
}

h2 {
font-size:-webkit-calc(1rem + 4vmin);
font-size:calc(1rem + 4vmin);
margin:4vmin 0 1.5vmin
}

h3 {
font-size:-webkit-calc(1rem + 3vmin);
font-size:calc(1rem + 3vmin);
margin:3vmin 0 1vmin
}

hr {
border:#ccc solid .02rem
}

html {
-moz-box-sizing:border-box;
-ms-scroll-chaining:none;
-webkit-box-sizing:border-box;
box-sizing:border-box;
overscroll-behavior:none;
text-rendering:optimizeSpeed
}

nav ol li {
display:inline;
line-height:2.6;
list-style:none;
margin-left:-1rem;
margin-right:1.5rem;
overflow:scroll;
white-space:nowrap
}

nav ol li a,nav ul li a {
-moz-border-radius:.2rem;
-webkit-border-radius:.2rem;
background:#3a3a3a;
border:#333 outset .02rem;
border-radius:.2rem;
font:300 1.2rem var(--sans-font-fallback);
overflow:auto
}

nav ul li {
line-height:2.6;
list-style:none;
margin-bottom:1rem;
margin-left:-1rem;
margin-top:1rem
}

nav ul li p {
overflow:auto;
overflow-wrap:break-word;
white-space:pre-line
}

p {
clear:both;
text-align:left;
text-indent:.125rem
}

pre {
-moz-border-radius:.02rem;
-webkit-border-radius:.02rem;
background:#000;
border:#333 solid .02rem;
border-radius:.02rem;
color:#fff;
font:400 1.1rem/1.6 var(--mono-font-fallback);
overflow:auto;
padding:.5rem;
position:relative;
word-break:normal
}

strong {
background:#f1f1f1;
color:#000;
font-weight:600;
position:relative
}

strong:before {
-moz-transform:skewX(1.65deg) rotate(-1.15deg);
-ms-transform:skewX(1.65deg) rotate(-1.15deg);
-o-transform:skewX(1.65deg) rotate(-1.15deg);
-webkit-transform:skewX(1.65deg) rotate(-1.15deg);
background:#6a6a6a;
bottom:0;
content:"";
display:inline-block;
height:102%;
left:0;
opacity:.3;
padding:.15rem;
position:absolute;
right:0;
top:0;
transform:skewX(1.65deg) rotate(-1.15deg);
width:102%;
z-index:-1
}

strong:nth-last-of-type(1) {
-ms-transform:skewX(-1.25deg) rotate(1.45deg);
-webkit-transform:skewX(-1.25deg) rotate(1.45deg);
transform:skewX(-1.25deg) rotate(1.45deg)
}

@media all and (display-mode: fullscreen) {
body {
border:.3rem solid #000;
margin:0
}
}
}