/* https://s9a.page/tape */
:root{--tape-filter:none;--tape-bluv:#11dff1;--tape-play:#fbbfff;--tape-loud:#eee833;--tape-luvu:#44f477;--tape-blaq:#0e0e0e;--tape-watt:#e0e0e0;--tape-hex:#e0e0e0;--tape-mix:transparent}.tape-watt{--tape-hex:var(--tape-watt)}.tape-luvu{--tape-hex:var(--tape-luvu)}.tape-loud{--tape-hex:var(--tape-loud)}.tape-play{--tape-hex:var(--tape-play)}.tape-bluv{--tape-hex:var(--tape-bluv)}.tape-flat{border-color:transparent}.tape-flap{border-color:currentColor}.tape-flow{--tape-remix:none}.tape-flow :not(.tape-skip){background-color:transparent;color:inherit}.tape-blaq,.tape-bluv,.tape-loud,.tape-luvu,.tape-play,.tape-watt{--tape-mix:var(--tape-hex);--tape-remix:none;color:var(--tape-blaq)!important;background-color:var(--tape-mix)!important;background-image:var(--tape-remix);filter:var(--tape-filter)}.tape-blaq{--tape-mix:var(--tape-blaq);color:var(--tape-hex)!important}.tape-erase,.tape-erase *{color:transparent!important}

:any-link {
  text-decoration: dotted underline;
}

:focus {
  outline: .3ch outset darkviolet;
}

::selection {
  color: var(--tape-loud);
  background: blueviolet;
}

:root {
  --tape-watt: khaki;
  --tape-play: peachpuff;
  --tape-loud: khaki;
  --tape-luvu: turquoise;
  --tape-blaq: navy;
  --tape-bluv: deepskyblue;
}

.tape-blaq {
  --tape-remix: linear-gradient(darkviolet, blueviolet);
}

.alive {
  --tape-remix: conic-gradient(
    var(--tape-play) 0%,
    var(--tape-play) 20%, 
    var(--tape-bluv) 20%,
    var(--tape-bluv) 40%,
    darkviolet 40%,
    blueviolet 60%,
    var(--tape-luvu) 60%,
    var(--tape-luvu) 80%,
    var(--tape-loud) 80%,
    var(--tape-loud) 100%
  );
}

html {
  font-family: fantasy;
  font-family: sans-serif;
  font-size: max(2em, 8vmax);
  line-height: 1.618;
}

body {
  margin: 0 auto 100vmin;
  overflow-wrap: anywhere;
}

nav {
  align-items: center;
  justify-items: center;
  justify-content: space-around;
  display: flex;
  flex-basis: 100%;
  flex-flow: row wrap;
  min-height: 100vh;
  padding: 2rem;
  margin: 10vmax auto 0;
  text-align: center;
}

nav > :nth-child(odd) {
  padding-block: 1ch 5ch;
  transform: rotate(-36deg)
}

nav > :nth-child(even) {
  padding-block: 3ch 3ch;
  transform: rotate(36deg)
}

div {
  align-items: center;
  justify-items: center;
  display: flex;
  flex-basis: 100%;
  margin: 0;
  width: 100%;
  text-indent: 39vw;
  min-height: 100vh;
}

@media (orientation: portrait) {
  div {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }
  
  nav {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
  }
}
 
em { --tape-watt: lemonchiffon }
h1 { all: unset; }

.surf {
  transform: rotate(180deg);
}

b {
  font-weight: stronger;
  text-shadow:
    -1vw 5vh 0 var(--tape-watt),
    -2vw 5vh 0 var(--tape-play),
    -2vw 8vh 0 var(--tape-loud),
    -3vw 13vh 0 var(--tape-luvu);
}

q::before,
q::after {
  font-size: 1ch;
}

q {
  font-weight: 600;
  quotes: "q" "q" "q" "q";
}

:focus { text-transform: uppercase }
:active { quotes: "=" "∞" }

u {
  text-shadow:
    3vw -2vh 1vmax var(--tape-watt),
    2vw -3vh 1vmax var(--tape-play),
    1vw -5vh 1vmax var(--tape-loud),
    1vw -3vh 1vmax var(--tape-luvu),
    2vw -5vh 1vmax var(--tape-blaq),
    3vw -5vh 1vmax var(--tape-bluv);
}

s {
  text-decoration-color: var(--tape-watt);
  text-decoration-style: wavy;
}