@font-face {
font-family: "Goofburst";
src: url("GOOFBURST.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--gold: #ffd700;
--black: #000;
--stroke: 3px;
  --header_h: 4.75rem;
  --pc_outer: 0px calc(100% - 10px), 2px calc(100% - 10px), 2px calc(100% - 6px), 4px calc(100% - 6px), 4px calc(100% - 4px), 6px calc(100% - 4px), 6px calc(100% - 2px), 10px calc(100% - 2px), 10px 100%, calc(100% - 10px) 100%, calc(100% - 10px) calc(100% - 2px), calc(100% - 6px) calc(100% - 2px), calc(100% - 6px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 6px), calc(100% - 2px) calc(100% - 6px), calc(100% - 2px) calc(100% - 10px), 100% calc(100% - 10px), 100% 10px, calc(100% - 2px) 10px, calc(100% - 2px) 6px, calc(100% - 4px) 6px, calc(100% - 4px) 4px, calc(100% - 6px) 4px, calc(100% - 6px) 2px, calc(100% - 10px) 2px, calc(100% - 10px) 0px, 10px 0px, 10px 2px, 6px 2px, 6px 4px, 4px 4px, 4px 6px, 2px 6px, 2px 10px, 0px 10px;
  --pc_inner: 2px 10px, 4px 10px, 4px 6px, 6px 6px, 6px 4px, 10px 4px, 10px 2px, calc(100% - 10px) 2px, calc(100% - 10px) 4px, calc(100% - 6px) 4px, calc(100% - 6px) 6px, calc(100% - 4px) 6px, calc(100% - 4px) 10px, calc(100% - 2px) 10px, calc(100% - 2px) calc(100% - 10px), calc(100% - 4px) calc(100% - 10px), calc(100% - 4px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) calc(100% - 4px), calc(100% - 10px) calc(100% - 4px), calc(100% - 10px) calc(100% - 2px), 10px calc(100% - 2px), 10px calc(100% - 4px), 6px calc(100% - 4px), 6px calc(100% - 6px), 4px calc(100% - 6px), 4px calc(100% - 10px), 2px calc(100% - 10px);
  --pc_border: 0px calc(100% - 10px), 2px calc(100% - 10px), 2px calc(100% - 6px), 4px calc(100% - 6px), 4px calc(100% - 4px), 6px calc(100% - 4px), 6px calc(100% - 2px), 10px calc(100% - 2px), 10px 100%, calc(100% - 10px) 100%, calc(100% - 10px) calc(100% - 2px), calc(100% - 6px) calc(100% - 2px), calc(100% - 6px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 6px), calc(100% - 2px) calc(100% - 6px), calc(100% - 2px) calc(100% - 10px), 100% calc(100% - 10px), 100% 10px, calc(100% - 2px) 10px, calc(100% - 2px) 6px, calc(100% - 4px) 6px, calc(100% - 4px) 4px, calc(100% - 6px) 4px, calc(100% - 6px) 2px, calc(100% - 10px) 2px, calc(100% - 10px) 0px, 10px 0px, 10px 2px, 6px 2px, 6px 4px, 4px 4px, 4px 6px, 2px 6px, 2px 10px, 0px 10px, 0px 50%, 2px 50%, 2px 10px, 4px 10px, 4px 6px, 6px 6px, 6px 4px, 10px 4px, 10px 2px, calc(100% - 10px) 2px, calc(100% - 10px) 4px, calc(100% - 6px) 4px, calc(100% - 6px) 6px, calc(100% - 4px) 6px, calc(100% - 4px) 10px, calc(100% - 2px) 10px, calc(100% - 2px) calc(100% - 10px), calc(100% - 4px) calc(100% - 10px), calc(100% - 4px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) calc(100% - 4px), calc(100% - 10px) calc(100% - 4px), calc(100% - 10px) calc(100% - 2px), 10px calc(100% - 2px), 10px calc(100% - 4px), 6px calc(100% - 4px), 6px calc(100% - 6px), 4px calc(100% - 6px), 4px calc(100% - 10px), 2px calc(100% - 10px), 2px 50%, 0px 50%;
  --pixel_corners: polygon(var(--pc_outer));
}
html {
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
}
html::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
body {
background: var(--black);
color: #fff;
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
overflow-x: hidden;
}
.scroller {
position: fixed;
inset: 0;
z-index: 0;
background-image: url("musics/stuff/goober.png");
background-repeat: repeat;
background-size: 128px 128px;
background-color: #000;
opacity: 0.16;
animation: scroll_uv 2s linear infinite;
pointer-events: none;
}
header {
font-family: "Goofburst", system-ui, sans-serif;
text-transform: uppercase;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 20;
padding: 0.75rem 3.5rem;
text-align: center;
color: var(--gold);
font-size: clamp(1rem, 3vw, 2rem);
letter-spacing: 0.02em;
white-space: nowrap;
background: rgba(0, 0, 0, 0.75);
border-bottom: 2px solid var(--gold);
-webkit-text-stroke: var(--stroke) #000;
paint-order: stroke fill;
}
@media (min-width: 900px) {
body.toc_open .page {
margin-left: 230px;
}
}
.page {
position: relative;
z-index: 10;
max-width: 900px;
margin: 0 auto;
padding: 5rem 1.25rem 8rem;
}
.banner {
display: block;
width: min(500px, 100%);
height: auto;
margin: 0 auto 1rem;
}
h2 {
font-family: "Goofburst", system-ui, sans-serif;
text-transform: uppercase;
text-align: center;
color: var(--gold);
letter-spacing: 0.02em;
-webkit-text-stroke: var(--stroke) #000;
paint-order: stroke fill;
text-shadow: 0 4px 24px rgba(0, 0, 0, 0.9);
font-size: clamp(1.4rem, 4vw, 2.25rem);
margin: 2.5rem 0 0.75rem;
}
h3 {
font-family: "Goofburst", system-ui, sans-serif;
text-transform: uppercase;
text-align: left;
color: var(--gold);
letter-spacing: 0.02em;
-webkit-text-stroke: var(--stroke) #000;
paint-order: stroke fill;
text-shadow: 0 4px 24px rgba(0, 0, 0, 0.9);
font-size: clamp(1.1rem, 3vw, 1.6rem);
margin: 1.75rem 0 0.5rem;
}
section,
article {
scroll-margin-top: calc(var(--header_h) + 1rem);
}
p,
li {
font-family: "Goofburst", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
text-transform: uppercase;
font-size: clamp(0.95rem, 2.2vw, 1.1rem);
line-height: 1.7;
color: #fff;
text-shadow:
 0 0 3px #000,
 1px 1px 2px #000,
 -1px -1px 2px #000;
margin: 0.6rem 0;
}
img {
max-width: 100%;
height: auto;
border: none;
border-radius: 0;
vertical-align: middle;
}
.snippet_img {
display: block;
margin: 1.5rem auto;
width: min(320px, 100%);
height: auto;
}
.inline_img {
display: inline-block;
margin: 0 0.35rem;
vertical-align: middle;
}
.hl_yellow {
color: var(--gold);
font-size: 1.15em;
font-weight: 700;
}
.big_date {
font-family: "Goofburst", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
text-transform: uppercase;
font-size: clamp(1.2rem, 4vw, 2rem);
color: var(--gold);
-webkit-text-stroke: var(--stroke) #000;
paint-order: stroke fill;
}
ul {
padding-left: 1.5rem;
}
li {
margin: 0.35rem 0;
}
.toc_btn,
.link_btn,
.burger,
.calm_btn,
.mute_btn,
.player {
position: relative;
border: 2px solid transparent;
background: rgba(0, 0, 0, 0.85);
color: #fff;
clip-path: var(--pixel_corners);
}
.toc_btn::after,
.link_btn::after,
.burger::after,
.calm_btn::after,
.mute_btn::after,
.player::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: -2px;
display: block;
background: var(--edge, var(--gold));
clip-path: polygon(var(--pc_border));
pointer-events: none;
}
.burger {
position: absolute;
top: 50%;
left: 0.5rem;
transform: translateY(-50%);
z-index: 40;
width: 46px;
height: 44px;
cursor: pointer;
}
.bar {
position: absolute;
left: 50%;
transform: translateX(-50%);
display: block;
width: 22px;
height: 3px;
background: var(--gold);
}
.bar:nth-child(1) {
top: 12px;
}
.bar:nth-child(2) {
top: 20px;
}
.bar:nth-child(3) {
top: 28px;
}
.burger:hover {
--edge: var(--gold);
background: var(--gold);
}
.burger:hover .bar {
background: #000;
}
.calm_btn:hover {
--edge: var(--gold);
background: var(--gold);
}
.calm_btn:hover .calm_icon {
color: #000;
}
.toc_panel {
position: fixed;
top: var(--header_h);
left: 0;
z-index: 35;
width: 210px;
max-height: calc(100vh - 5rem);
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 0.75rem;
background: rgba(0, 0, 0, 0.92);
border-right: 2px solid var(--gold);
border-bottom: 2px solid var(--gold);
}
.toc_panel::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
.toc_panel.hidden {
display: none;
}
.toc {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.4rem;
margin: 0;
}
@media (min-width: 1100px) {
.toc_panel {
width: 230px;
}
}
.toc_btn {
width: 100%;
text-align: left;
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 0.85rem;
color: #fff;
background: rgba(0, 0, 0, 0.7);
padding: 0.5rem 0.9rem;
cursor: pointer;
text-shadow: 1px 1px 2px #000;
transition: background 0.15s, color 0.15s, transform 0.15s;
}
.toc_btn:hover,
.toc_btn:focus-visible {
--edge: var(--gold);
background: var(--gold);
color: #000;
text-shadow: none;
transform: translateY(-1px);
outline: none;
}
.mute_btn {
position: fixed;
bottom: 1.25rem;
right: 1.25rem;
z-index: 40;
width: 46px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
color: var(--gold);
}
.icon_muted {
display: none;
}
.mute_btn[aria-pressed="true"] .icon_sound {
display: none;
}
.mute_btn[aria-pressed="true"] .icon_muted {
display: block;
}
.mute_btn[aria-pressed="true"] {
--edge: var(--gold);
background: var(--gold);
color: #000;
}
.mute_btn:hover {
--edge: var(--gold);
background: var(--gold);
}
.mute_btn:hover .mute_icon {
color: #000;
}
.calm_btn {
position: absolute;
top: 50%;
right: 0.5rem;
transform: translateY(-50%);
z-index: 40;
width: 46px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
color: var(--gold);
}
.calm_icon {
flex: 0 0 auto;
}
.icon_eye {
display: none;
}
.calm_btn[aria-pressed="true"] .icon_wave {
display: none;
}
.calm_btn[aria-pressed="true"] .icon_eye {
display: block;
}
.calm_btn[aria-pressed="true"] {
--edge: var(--gold);
background: var(--gold);
color: #000;
}
body.calm .scroller {
animation-play-state: paused;
}
.toc_sub {
--edge: #6f6f6f;
margin-left: 0.75rem;
width: calc(100% - 0.75rem);
color: #dcdcdc;
}
.toc_sub:hover,
.toc_sub:focus-visible {
--edge: #fff;
background: #fff;
color: #000;
}
.player {
--edge: #8a8a8a;
width: min(420px, 100%);
margin: 0.75rem 0;
padding: 0.85rem 1rem 1rem;
background: #000;
font-family: "Goofburst", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
.player_title {
display: block;
color: #ececec;
text-transform: uppercase;
font-size: 1.1rem;
line-height: 1.3;
letter-spacing: 0.01em;
}
.player_head {
border-bottom: 1px solid #cfcfcf;
padding-bottom: 0.6rem;
margin-bottom: 0.8rem;
}
.player_row {
display: flex;
align-items: center;
gap: 0.85rem;
}
.player_play {
flex: 0 0 auto;
width: 34px;
height: 34px;
border: 0;
border-radius: 50%;
background: #ededed;
cursor: pointer;
position: relative;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.player_play::after {
content: "";
border-style: solid;
border-width: 8px 0 8px 13px;
border-color: transparent transparent transparent #000;
margin-left: 3px;
}
.player_play:hover {
background: #fff;
}
.player.is_playing .player_play::after {
border: 0;
width: 13px;
height: 14px;
margin-left: 0;
background: linear-gradient(to right, #000 0 4px, transparent 4px 9px, #000 9px 13px);
}
.player_seek {
flex: 1;
-webkit-appearance: none;
appearance: none;
height: 3px;
background: linear-gradient(to right, #ededed var(--p, 0%), #4a4a4a var(--p, 0%));
cursor: pointer;
}
.player_seek::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
border-radius: 50%;
background: #ededed;
border: 0;
}
.player_seek::-moz-range-thumb {
width: 15px;
height: 15px;
border-radius: 50%;
background: #ededed;
border: 0;
}
.player_seek::-moz-range-track {
height: 3px;
background: #4a4a4a;
}
.player_time {
flex: 0 0 auto;
min-width: 3.2em;
text-align: right;
color: #ececec;
font-size: 0.95rem;
white-space: nowrap;
}
.player.is_playing {
--edge: var(--gold);
}
.player.is_playing .player_title,
.player.is_playing .player_time {
color: var(--gold);
}
.player.is_playing .player_seek {
background: linear-gradient(to right, var(--gold) var(--p, 0%), #4a4a4a var(--p, 0%));
}
.player.is_playing .player_seek::-webkit-slider-thumb {
background: var(--gold);
}
.player.is_playing .player_seek::-moz-range-thumb {
background: var(--gold);
}
.player.is_playing .player_play {
background: var(--gold);
}
.pending {
font-size: 0.85rem;
opacity: 0.65;
font-style: italic;
}
hr {
border: 0;
border-top: 2px solid var(--gold);
margin: 1.5rem 0 0;
}
.player_link {
display: block;
text-decoration: none;
color: inherit;
cursor: pointer;
}
.player_link .player_play {
pointer-events: none;
}
.player_seek_fake {
flex: 1;
height: 3px;
background: #4a4a4a;
position: relative;
}
.player_knob {
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
width: 15px;
height: 15px;
border-radius: 50%;
background: #ededed;
}
.img_link {
color: var(--gold);
text-decoration: underline;
text-underline-offset: 3px;
}
.img_link:hover {
color: #fff;
}
.credits {
margin-top: 2.5rem;
padding-top: 1.5rem;
border-top: 2px solid #333;
text-align: center;
}
.credits p {
margin: 0.35rem 0;
font-size: 0.8rem;
opacity: 0.75;
}
.credits a {
color: var(--gold);
}
.credits a:hover {
color: #fff;
}
.links {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 2px solid #333;
}
.link_btn {
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 0.9rem;
color: var(--gold);
text-decoration: none;
padding: 0.55rem 1.1rem;
background: rgba(0, 0, 0, 0.7);
text-shadow: 1px 1px 2px #000;
transition: background 0.15s, color 0.15s;
}
.link_btn:hover,
.link_btn:focus-visible {
--edge: var(--gold);
background: var(--gold);
color: #000;
text-shadow: none;
}
.brand_discord:hover,
.brand_discord:focus-visible {
--edge: #5865f2;
background: #5865f2;
color: #fff;
}
.brand_x:hover,
.brand_x:focus-visible {
--edge: #fff;
background: #fff;
color: #000;
}
.brand_song:hover,
.brand_song:focus-visible {
--edge: #ed4245;
background: #ed4245;
color: #fff;
}
.scroll_rail {
position: fixed;
top: var(--header_h);
right: 0;
bottom: 0;
z-index: 60;
width: 14px;
background: rgba(0, 0, 0, 0.75);
border-left: 2px solid var(--gold);
transition: opacity 0.2s;
}
body.no_scroll_rail .scroll_rail {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.scroll_thumb {
position: absolute;
top: 0;
left: 2px;
width: 8px;
background: var(--gold);
clip-path: polygon(0 4px, 4px 0, calc(100% - 4px) 0, 100% 4px,
100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px));
cursor: pointer;
touch-action: none;
will-change: transform;
}
.scroll_thumb:hover,
.scroll_thumb:focus-visible {
background: #fff;
}
.scroll_thumb.is_dragging {
background: #fff;
filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
}
.scroll_thumb:focus-visible {
outline: 2px solid #fff;
outline-offset: -6px;
}
@media (max-width: 700px) {
.scroll_rail {
width: 11px;
}
.scroll_thumb {
left: 2px;
width: 5px;
}
}
@keyframes scroll_uv {
0% {
 background-position: 0 0;
}
100% {
 background-position: 128px 128px;
}
}