.tabpen {
    position: relative;
}

.tabheaders {
  width: fit-content;
  margin: 0 auto;
  border-radius: 2em;
  border-radius: 4em;
  outline: 8px solid var(--anti-text-25);
  text-align: center;
}

.tabheaders button {
  border: none;
  outline: none;
  cursor: pointer;
  padding: 8px;
  width: 4em;
  height: 4em;
  aspect-ratio: 1;
  margin: 10px;
  border-radius: 100%;
  transition: 0.25s;
  font-size: 1.5em;
  background: none;
  font-variant-emoji: emoji;
  outline: 0px solid var(--fg);
    --bg: var(--root-bg);
    --fg: var(--highlight-3);
}

.button-divider {
    display: inline-block;
    width: 0px;
    height: 4em;
    vertical-align: center;
    border-left: 0.4em dotted var(--anti-text-50);
    margin: 0.2em;
}

.tabheaders button:focus-visible {
    outline-width: 4px;
}

.tabheaders button > svg {
    height: 100%;
    aspect-ratio: 1;
}

.tabheaders button > svg > path {
    stroke: currentColor;
    stroke-width: 4px;
    fill-opacity: 0;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tabheaders button:hover {
  transform: scale(1.1);
}

.tabheaders button.active {
  transform: scale(1.2);
  background-color: var(--bg);
  outline-width: 4px;
}

.tabheaders button.general > svg > path, .tabheaders button.this-site > svg > path {
    stroke: var(--text-50);
}

.tabheaders button.general > svg, .tabheaders button.this-site > svg {
    height: 80%;
    padding: 10%;
}

.tabheaders button.active > svg > path {
    stroke: var(--fg);
}

.tab {
    --font: var(--sans-serif);
}

#tab-Myno, button.myno, #cartridgepen.myno {
    --bg: var(--myno-bg);
    --fg: var(--myno-fg);
    --font: var(--myno-font);
}

#tab-Myno > .tabcontent:before {
    clip-path: polygon(2% 0, 100% 3%, 98% 98%, 0 97%);
    padding-bottom: 1em;
}

#tab-Viola, button.viola, #cartridgepen.viola {
    --bg: var(--viola-bg);
    --fg: var(--viola-fg);
    --font: var(--viola-font);
}

#tab-Viola > .tabcontent:before {
    border-radius: 40px;
}

#tab-Viola > .tabcontent:before {
    border-radius: 40px;
}

#tab-Pickles, button.pickles, #cartridgepen.pickles {
    --bg: var(--pickles-bg);
    --fg: var(--pickles-fg);
    --font: var(--pickles-font);
}

#tab-Pickles > .tabcontent:before {
    clip-path: polygon(0% 5%, 3% 3%, 5% 0%, 95% 0%, 97% 3%, 100% 5%, 100% 95%, 97% 97%, 95% 100%, 5% 100%, 3% 97%, 0% 95%);
}

#tab-Widget, button.widget, #cartridgepen.widget  {
    --bg: var(--widget-bg);
    --fg: var(--widget-fg);
    --font: var(--widget-font);
    filter: blur(2px);
}

button.widget {
    filter: none;
}

#tab-Widget > .tabcontent:before { 
    filter: blur(20px);
}

#tab-Myno, #tab-Pickles {
  font-size: 1.1em;
}

.tab {
  opacity: 0;
  position: absolute;
  top:-2em;
  left:-40px;
  width: calc(100% + 80px);
  transition: opacity 0.25s;
  pointer-events: none;
}

.tab.active {
  opacity: 1;
  position: relative;
  z-index: 1;
  pointer-events: all;
  top:0;
}

.tabcontent {
    width: 90%;
    position: relative;
    padding-left: 2em;
}

#tab-General > .tabcontent, #tab-This-site > .tabcontent {
  padding-left: 5%;
}

.tabcontent:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: -10px;
    left: -10px;
    background-color: var(--bg);
    z-index: -1;
    padding: 10px;
}

.about-drawing {
  width: 120%;
  margin-top: -59%;
  float: right;
  z-index: 2;
  margin-right: -33%;
  pointer-events: none;
  filter: drop-shadow(20px 20px 0 #0008);
}

#tab-Myno > .tabcontent > .about-drawing {
    shape-outside: border-box polygon(68% 33%, 74% 28%, 84% 26%, 94% 31%, 85% 48%, 95% 45%, 99% 48%, 100% 57%, 89% 59%, 82% 65%, 75% 70%, 68% 73%, 56% 74%, 47% 73%, 36% 70%, 27% 60%, 26% 52%, 28% 44%, 34% 37%, 39% 31%, 47% 29%, 55% 31%, 60% 27%, 64% 27%, 67% 29%);
}

#tab-Viola > .tabcontent > .about-drawing {
    shape-outside:  border-box polygon(22% 55%, 35% 51%, 41% 38%, 50% 27%, 55% 16%, 63% 7%, 74% 2%, 89% 6%, 95% 10%, 97% 19%, 95% 36%, 97% 49%, 99% 61%, 100% 77%, 90% 90%, 74% 93%, 66% 89%, 55% 96%, 42% 95%, 31% 91%, 25% 85%, 15% 84%, 8% 83%, 2% 78%, 0% 65%, 1% 52%, 9% 47%, 17% 50%);
    margin-top: -36%;
    margin-right: -20%;
}

#tab-Pickles > .tabcontent > .about-drawing {
    shape-outside:  border-box polygon(51% 34%, 47% 22%, 52% 11%, 64% 8%, 76% 9%, 84% 20%, 80% 28%, 81% 32%, 91% 26%, 99% 26%, 100% 39%, 91% 44%, 91% 50%, 84% 57%, 84% 64%, 84% 71%, 83% 82%, 73% 89%, 60% 94%, 53% 87%, 57% 73%, 49% 70%, 48% 60%, 39% 57%, 36% 46%);
    margin-right: -20%;
}

#tab-Widget > .tabcontent > .about-drawing {
    shape-outside: border-box inset(3% 1% 9% 45%);
    margin-right: -25%;
    filter: none;
}

.tabcontent, .tabcontent > *, .tabcontent > * > *, * {
    font-family: var(--font);
    font-size: inherit;
}

.tabcontent > p {
    font-size: 1.5em;
    white-space-collapse: preserve-breaks;
}

.tabcontent > h3 {
    width:fit-content;
    transform: translateX(-50%) rotate(-5deg);
    font-size: 5em;
    margin: 0.5em 2em;
    text-align: center;
}

.tabcontent > h2 {
    width:100%;
    font-size: 5em;
    margin: 20px auto;
    text-align: center;
    font-family: Avara, serif;
}

.tabcontent > h3 > i, .tabcontent > h3 > .subtitle, .tabcontent > h2 > .subtitle {
    font-size: 0.4em;
    font-style: normal;
    opacity: 0.75;
    display: block;
    width: 100%;
    text-align: center;
    line-height: 0.95;
}

.tabcontent > h2 > .subtitle {
    line-height: 0.5;
}

.tabcontent > h3 > .subtitle {
    margin-top: -0.25em;
}

.tabcontent > .two-button-grid {
    display: inline-block;
    width: stretch;
    white-space-collapse: collapse;
}

.tabcontent > .two-button-grid > .link {
  mix-blend-mode: luminosity;
  width: 50%;
  display: inline-block;
  font-size: 1.6em;
}

.profile-table {
    font-size: 1.5em;
    white-space-collapse: preserve-breaks;
}

.chippen {
    white-space-collapse: collapse;
    display: inline;
}

.row > b {
    margin-right: 0.5em;
}

.emoj {
    font-variant-emoji: emoji;
}

#iframepen {
    width: min(600px, 100%);
    margin: 0 auto;
    margin-top: -36px;
    margin-bottom: 36px;
}

.game-iframe {
    width: 100%;
    max-height: 0px;
    aspect-ratio: 1;
    margin: 0 auto;
    border: none;
    overflow: hidden;
    display: block;
    transition: all 0.5s ease;
}

.game-iframe.loaded {
    max-height: 600px;
}

#cartridgepen {
    max-width: 300px;
    padding: 10px;
    margin: 0 auto;
    z-index: 2;
    position: relative;
    --bg: #555;
    --fg: #333;
}

.cartridge {
    background-image: url("https://zatzhing.me/pages/rhythm/carts.webp");
    background-size: 100%;
    image-rendering: pixelated;
    aspect-ratio: 2;
    width: 80%;
    margin: 0 auto;
    transition: all 0.2s ease, background-position-y 0s;
    clip-path: inset(0% 0% 0% 0%);
}

#cartridgepen.myno > .cartridge {
    background-position-y: 20%;
}

#cartridgepen.viola > .cartridge {
    background-position-y: 40%;
}

#cartridgepen.pickles > .cartridge {
    background-position-y: 60%;
}

#cartridgepen.widget > .cartridge {
    background-position-y: 80%;
}

#cartridgepen.this-site > .cartridge {
    background-position-y: 100%;
}

.cartridge-slot {
    margin: 0 auto 8px;
    width: 0%;
    background: var(--bg);
    height: 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

#cartridgepen:hover > .cartridge {
    transform: translateY(20%);
    clip-path: inset(0% 0% 20% 0%);
}

#cartridgepen.inserted > .cartridge {
    transform: translateY(85%);
    clip-path: inset(0% 0% 85% 0%);
}

#cartridgepen:hover > .cartridge-slot, #cartridgepen.inserted > .cartridge-slot {
   width: 100%;
}

#container *, #container {
    overflow-anchor: none;
}