* {
    font-family: "GT Standard", sans-serif;
    font-style: normal;
    box-sizing: border-box;
}

/* primary colors*/
:root {
    --bg-black-transparent: oklch(0% 0 0 / 0.5);
    --bg-white-transparent: oklch(100% 0.00011 271.152 / 0.15);
}

/* red */
:root {
  --color-red-50: oklch(96.038% 0.01954 17.192);
  --color-red-100: oklch(91.958% 0.04126 15.943);
  --color-red-200: oklch(83.794% 0.08778 17.278);
  --color-red-300: oklch(75.759% 0.14326 18.891);
  --color-red-400: oklch(68.067% 0.20558 21.895);
  --color-red-500: oklch(59.908% 0.24117 25.535);
  --color-red-600: oklch(50.78% 0.20456 25.583);
  --color-red-700: oklch(41.642% 0.16784 25.5);
  --color-red-800: oklch(32.64% 0.13156 25.629);
  --color-red-900: oklch(23.637% 0.09589 25.238);
  --color-red-950: oklch(18.464% 0.07487 25.051);
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    width: 100vw;
    height: 100dvh;
    color: var(--color-red-50);
    font-variation-settings: "slnt" 0;
    overflow: hidden;
}

em {
    font-style: italic;
}

.container {
    display: flex;
    flex-direction: column;
    box-sizing: inherit;
    width: 100%;
    height: 100%;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 32px;
    padding: 32px;
    flex-shrink: 0;
}

header img {
    height: 24px;
}

picture,
.nav_icons {
    flex: 1;
}

.nav_tabs {
    display: flex;
    padding-inline: 16px;
    gap: 16px;
    border-radius: 8px;
    min-height: 100%;
    min-height: 32px;
}

.tab_button {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 16px;
    line-height: 0;
    background-color: var(--color-red-50);
    color: var(--color-red-50);
    text-decoration: none;
    background: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: 0.1s;
    height: 32px;
}

.tab_button:hover {
    border-bottom: 2px solid;
}

.tab_button.active {
    border-bottom: 2px solid var(--color-red-500);
}

.nav_icons {
    display: flex;
    justify-content: right;
}

.icon_button {
    color: var(--color-red-50);
    cursor: pointer;
    transition: 0.1s;
    width: 24px;
    height: 24px;
}

.icon_button:hover {
    color: var(--color-red-500);
}

.content {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    gap: 16px;
    width: 100%;
    height: 100%;
}

.viewercount {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
    background: var(--bg-black-transparent);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    width: fit-content;
    height: 32px;
}

.viewercount .circle {
    width: 12px;
    height: 12px;
    background: var(--color-red-500);
    border-radius: 100%;
}

::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-red-500);
}

@supports (-moz-appearance: none) {
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--color-red-500);
    }
}

@media (hover: none) {
  .icon_button:hover {
    color: var(--color-red-50);
  }

  #playerVolume,
  #playerFullscreen {
    display: none;
  }
}