@charset "utf-8";:root {
    --size-nav: 97.01em;
    --gap: 1em;
    --wrap: 92em;
    --font-list1: 'Noto Sans',sans-serif;
    --font-list2: 'Noto Serif',serif;
    --color-scheme: dark;
    --colorG13: hsl(0,0%,13%);
    --colorG15: hsl(0,0%,15%);
    --colorG18: hsl(0,0%,18%);
    --colorG22: hsl(0,0%,22%);
    --colorG27: hsl(0deg 0.61% 44.61%);
    --colorG33: hsl(0,0%,33%);
    --colorG38: hsl(0,0%,38%);
    --colorG45: hsl(0,0%,45%);
    --colorG60: hsl(0,0%,60%);
    --colorW: hsl(0,0%,100%);
    --colorB: hsl(0,0%,0%);
    --colorT: hsl(35,45%,84%);
    --colorT2: hsl(34,44%,69%);
    --color1: var(--colorG22);
    --color2: hsl(42.21deg 62.77% 54.71%);
    --color3: hsl(12,63%,49%);
    --color4: hsl(96,41%,29%);
    --color5: hsl(39,100%,50%);
    --color6: hsl(207,22%,39%);
    --colorA003: hsla(0,0%,100%,0.03);
    --colorA005: hsla(0,0%,100%,0.05);
    --colorA1: hsla(0,0%,100%,0.1);
    --colorA15: hsla(0,0%,100%,0.15);
    --colorA2: hsla(0,0%,100%,0.2);
    --colorA3: hsla(0,0%,100%,0.3);
    --colorA7: hsla(0,0%,100%,0.7);
    --colorA5: hsla(0,0%,100%,0.5);
    --colorAB0: hsla(0,0%,0%,0);
    --colorAB1: hsla(0,0%,0%,0.1);
    --colorAB2: hsla(0,0%,0%,0.2);
    --colorAB25: hsla(0,0%,0%,0.25);
    --colorAB005: hsla(0,0%,0%,0.05);
    --colorAB3: hsla(0,0%,0%,0.3);
    --colorAB4: hsla(0,0%,0%,0.4);
    --colorAB5: hsla(0,0%,0%,0.5);
    --colorAB7: hsla(0,0%,0%,0.7);
    --colorAB8: hsla(0,0%,0%,0.8);
    --colorAS2: hsl(9,100%,64%,0.5);
    --colorAS22: hsla(0,100%,50%,0.3);
    --colorS4: hsl(96,41%,53%);
    --colorS5: hsla(30,31%,54%);
    --colorS52: hsl(39,100%,35%);
    --bg: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA9BAMAAAAOkGejAAAAGFBMVEUKCgoUFBQAAAAPDw8ZGRkeHh4jIyMFBQUUJmucAAAACHRSTlMzMzMzMzMzM85JBgUAAAV1SURBVDjLBQC3tkMA9OqrbtWtCKwErLoVhDUP5PffAUvqhtJFWytU/UqOWbf0nG8ZSVyyfSPwrjqzxYailPJtJu/uihN7np+51RrBgYosPTzBElTZCg8JieV4W/HJciqhFwhQLBmkX5JnNzzMlOGvQChGCKbanFWBgVeRCr9L6BZCgZxB/0wN7zTO2QuP80SIL3F5Ydbnhz12iE/nSOMrqwK/OMfbAYHkioJlnlj9CKUbeomN61U5LQ6nWRmg+tfrDusm2LHGDnRDdHUp5CLTvoHrwgtZlIr/+FyoPz2tz/HiQzc8x1TWqAZp99yto4qGuAs20qucNqPyUAyqHuAp2Hhv0OR1LC+g2voMngjB2uvyVvf0aFhD1Mi/f5Q6MER7SzJWu2AW3my9l8mB4W3WfCqwf+ikfc7pudFVvOMy0ikuSoF47zw6UYPxdqWRRSRo91RZtWYa/sQeri7tMPKcCao0vs9QTQC+8CuoReAkHuKRZCi2qtv9zJLAHfSoRltH/+sj9rlgdBTsfUbTEb7oTbTJ8acxbjMQnaftBkRVVerOeKhKr3jkRzTzqS6RpJNvF0MhOBQm/BRXor/MU/YjObdYIu1/iaQ+IviYnlsG6r3cbQoB7cj4SPgMSkLzgIM24+LSjb2sYxWDtIhCdzBfS5Kh768XgH5jkSLjrvRX/nQnv+SXQMvagpPVScAZwWhVbvPdPqcr3X/u8z558ddIdjmVMH9CIVvrW+8rPVq6M54Pf+tebGkIXwPevaCgdQ59wWbULrPB4dPT8suLWr13YKUuDNTpGBspJ9fPGSNOEjp2TYXTIgF8QgEtzX0gIbXRP8JGMbxh1uHA/CwE4a/KHUc8KzV868fO4o+8GNcNvdPaKfzprkunXIthFS9MqpEG1p7ozWTJTcnAlvUnjixEaGn5ll1yuZbtIgS/r2ISBSDE2nsksYx7YFwH2ytB0rXzqh52qJowchJSI3RJmxHeJGZFDq37LWVmzvkgA7zjT2iOsHsdb9viBQLPx3gUmys1cQG6HOEsopo6glj0VXdyli/FJsnSbg5FQLpDO1xiy0ozQy0InDVNZTuXbhENG9gu28ZoHg/de53YTAVqCwl966V7VX/g+AW3ysMyMjXNhOuaLFmBJ2Z1x9LfG55m/34snAnOgXbMqZIbaop8Zjk5P3fAw9h8vkwHKZAC7yqW6+85ZdpAFD8iAjbVRj8BI3PMYJ2oiKNrZHKSnfNJ2UZwtcT9IryvNrGxdqtCx4vc74z39odPA/h5f/MJu46HKUOcbURZd/E2QH6Kgv8Aa2PSevG2gMfoYHWdN38kadbiFHonAjv50PjgyFZwannFGebUjVmxFnokoTbwWBNVd7qx9KG1joZ69npEk0jRr7/aBYQ5ipNcGRvqjeT+kFjTgv7n33L0zlBIH6CoeaPm9eQN6uKmSwE/LAtDPgMNAOQ5X1Vr8Zd0BQlLTV88U6LzD+6iwQp9NSHD5uCcqml/N0NgRmDN9vNS6A/QJBm2jvBbFTLvly/mtLX1rg5kwgPvA4rA+LIdN3bkVvhrqk8OUYZpuYxaXW/gPVlDxtru6+3Z0KY5DMac3pQzo8y7hO2qxdd6lnvUSdXfFRduigV0YuZv9peBHwHix+d4M7fL/Y44jX6S5ZdOzBoEC2fEohdSE7PTjRBUT3T+jclLxWbKdEOoiuB81dV0xo2pFPOXZmpEMueTDrAjAr8k6y15pMsoCHOyT5qlyWn85HLLuyyAWMlmmjYSNKnv9nRsTib5DSbWLPkJjoVihW/eRQqy/dja151zycTHTBmuroDeXRvVzJ3VFWB65e+L6xu+D5fa+D0BESL4VjlKSKrvs9W69lhj2345pBjIr3+RSJFuS0A/sQAAAABJRU5ErkJggg==');
    --border1: 1px solid var(--colorG27);
    --border2: 1px dashed var(--colorA15);
    --shadow1: 0.5rem 0.5rem 2rem hsla(0,0%,0%,0.15);
    --shadow2: inset 0 0 0.1em hsla(0,0%,0%,0.3),0 0.5rem 2rem hsla(0,0%,0%,0.3);
    --shadow3: 0 0 1.5rem hsla(0,0%,0%,0.2);
    --shadow4: 0 1.5rem 2rem hsla(0,0%,0%,0.4);
    --shadow5: 0 0 2rem hsla(0,0%,0%,0.2);
    --shadow6: 0.5rem 0.5rem 2rem hsla(0,0%,0%,0.1);
    --shadow7: 0.5rem 0.5rem 2rem hsla(0,0%,0%,0.25);
    --shadow8: 0 1rem 1rem hsla(0,0%,0%,0.1);
    --r1: 0.3em;
    --r2: 0.3em;
    --r3: .2em
}


svg {
    fill: #fff4f8;
}

.media-player {
    color: #fff4f8;
}

audio,video,canvas {
    width: 100%
}

audio,video {
    outline: none
}

video {
    height: auto;
    aspect-ratio: 16/9;
    -o-object-fit: cover;
    object-fit: cover
}

::cue {
    line-height: 1.5;
    font-size: 2em;
    background-color: var(--colorAB4)
}

@container grid (width > 35.01em) {
    ::cue {
        font-size: 1.5em
    }
}

audio.media {
    height: 3.05em
}

video.media {
    display: block;
    background-color: var(--colorB);
    box-shadow: 0.5rem 0.5rem 2rem var(--colorAB25)
}

.media-player {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5em;
    width: 100%;
    height: 3.5em;
    padding-inline-end:0.5em;background-color: var(--colorG27);
    border-radius: 1.75em;
    box-shadow: var(--shadow8);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.media-player button {
    all: unset;
    box-sizing: border-box;
    flex-shrink: 0;
    display: grid;
    height: 3.5em;
    outline: none;
    cursor: pointer
}

:is(.media-player button) svg {
    width: 1.2em;
    height: 1.2em;
    margin: auto
}

:is(.media-player :where(.media-play-pause,.media-mute,.media-picture-in-picture))>:nth-child(2) {
    display: none
}

:is(.media-player :where(.media-play-pause,.media-mute,.media-picture-in-picture))>:last-child {
    display: none
}

.active:is(.media-player :where(.media-play-pause,.media-mute,.media-picture-in-picture))>:first-child {
    display: none
}

.active:is(.media-player :where(.media-play-pause,.media-mute,.media-picture-in-picture))>:last-child {
    display: inline;
    display: initial
}

:is(.media-player .media-play-pause:disabled)>:nth-child(2) {
    display: inline;
    display: initial
}

:is(.media-player .media-play-pause:disabled)>:first-child,:is(.media-player .media-play-pause:disabled)>:last-child {
    display: none
}

.media-player .media-mute,.media-player .media-fullscreen,.media-player .media-menu,.media-player .media-extend-menu button {
    width: 2.5em;
    height: 2.5em;
    background-color: var(--colorG33);
    border-radius: 50%
}

.media-player .media-fullscreen:hover,.media-player .media-menu:hover {
    background-color: var(--colorG38)
}

.media-player :where(.media-mute,.media-fullscreen,.media-menu):focus-visible {
    border: 0.2em solid var(--color5)
}

.media-player .media-fullscreen.active {
    background-color: var(--color2)
}

:is(.media-player .media-extend-menu button):focus-visible {
    border: 0.2em solid var(--color5)
}

:is(.media-player .media-extend-menu button):hover {
    background-color: var(--colorG38)
}

.active:is(.media-player .media-extend-menu button),:is(.media-player .media-extend-menu button):active {
    background-color: var(--color2)
}

.media-player .media-time {
    flex-shrink: 0
}

.media-player .media-progress-bar,.media-player .media-volume-bar {
    --position: 0%;
    --color-slide: var(--color2);
    all: unset;
    width: 100%;
    min-width: 0;
    height: 0.31em;
    padding-block:1em;color: var(--color2);
    background-clip: content-box;
    cursor: pointer
}

.media-player :where(.media-progress-bar,.media-volume-bar):focus-visible {
    --color-slide: var(--color5)
}

.media-player .media-progress-bar {
    --position: 0%;
    --position-buffer: 100%;
    --color-buffer: var(--colorG33);
    background-image: linear-gradient(90deg,var(--color-slide) 0,var(--color-slide) var(--position),transparent var(--position)),linear-gradient(90deg,var(--color-buffer) var(--position-buffer),transparent var(--position-buffer)),repeating-linear-gradient(90deg,transparent 0,transparent 2px,var(--colorG33) 2px,var(--colorG33) 4px)
}

.media-player .media-volume-bar {
    background-image: linear-gradient(90deg,var(--color-slide) var(--position),transparent var(--position))
}

.media-player .media-mute {
    background: none
}

.media-player .media-volume-bar {
    background-color: var(--colorG38)
}

.media-player .media-play-pause {
    position: relative;
    z-index: 1;
    width: 3.5em;
    background-color: var(--colorG33);
    border-radius: 50%
}

:is(.media-player .media-play-pause)::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 0.41em solid transparent;
    border-radius: 50%
}

:is(.media-player .media-play-pause):focus-visible::before,.active:is(.media-player .media-play-pause):focus-visible::before {
    border-block-color:var(--color5)}

: is(.media-player .media-play-pause):hover::before {
    border-block-color:var(--colorG38)
}

.active:is(.media-player .media-play-pause)::before {
    border-block-color:var(--color2);animation: anim-play 20s linear infinite var(--play-state,running)
}

.media-player .media-tags {
    position: absolute;
    display: flex;
    gap: 0.3em;
    z-index: 1;
    bottom: 0.2em;
    left: 4em
}

:is(.media-player .media-tags)>* {
    position: relative;
    display: none;
    min-width: 2.5em;
    padding: 0.1em 0.3em;
    font-size: 0.8em;
    text-align: center;
    line-height: 1;
    background-color: var(--colorG38);
    border-radius: 0.3em
}

.active:is(:is(.media-player .media-tags)>*) {
    display: block
}

.media-player .media-extend-volume {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: var(--colorG33);
    border-radius: 1.25em;
    outline: none;
    transition: padding-left 0.6s ease-in
}

:is(.media-player .media-extend-volume):where(:focus-within,:hover,:active) {
    padding-inline-start:calc(var(--gap)/2);animation: anim-button 0.6s ease-in-out
}

:is(.media-player .media-extend-volume):where(:focus-within,:hover,:active) .media-volume-bar {
    display: inherit;
    max-width: 10em
}

.media-player .media-play-pause.active~.media-extend-volume .media-mute.active {
    animation: anim-mute 1s infinite
}

.media-player .media-volume-bar {
    width: 100%;
    max-width: 0;
    transition: max-width 0.6s ease-in-out
}

.media-player .media-progress-bar {
    flex-grow: 1;
    width: 10%
}

.media-player .media-extend-menu {
    --mem: 6;
    display: none
}

:is(.media-player .media-extend-menu):has(>:nth-child(7):last-child,button:nth-child(8):last-child) {
    --mem: 4
}

:is(.media-player .media-extend-menu):has(>:nth-child(9):last-child,>:nth-child(10):last-child) {
    --mem: 5
}

:is(.media-player .media-extend-menu):has(>:nth-child(5):last-child) {
    --mem: 5
}

.active:is(.media-player .media-extend-menu) {
    position: absolute;
    z-index: 200;
    bottom: 3.5em;
    right: 0;
    display: grid;
    grid-template-columns: repeat(var(--mem),2.5em);
    gap: calc(var(--gap)/2);
    padding: calc(var(--gap)/2);
    background-color: var(--colorG27);
    border-radius: 1.75em;
    box-shadow: var(--shadow8)
}

.media-player.error {
    flex-shrink: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--colorG60)
}

:is(:is(.media-player :where(.media-progress-bar,.media-volume-bar)):hover,:is(.media-player :where(.media-progress-bar,.media-volume-bar)):active)::-webkit-slider-thumb {
    background-color: var(--color2)
}

:is(.media-player :where(.media-progress-bar,.media-volume-bar)):focus-visible::-webkit-slider-thumb {
    background-color: var(--color5)
}

:is(:is(.media-player :where(.media-progress-bar,.media-volume-bar)):hover,:is(.media-player :where(.media-progress-bar,.media-volume-bar)):active)::-moz-range-thumb {
    background-color: var(--color2)
}

:is(.media-player :where(.media-progress-bar,.media-volume-bar)):focus-visible::-moz-range-thumb {
    background-color: var(--color5)
}

.media-player ::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 1em;
    aspect-ratio: 1;
    background-color: transparent;
    border-radius: 50%
}

.media-player ::-moz-range-thumb {
    box-sizing: border-box;
    border: none;
    pointer-events: auto;
    width: 1em;
    aspect-ratio: 1;
    background-color: transparent;
    border-radius: 50%
}

video+.media-player {
    margin-block-start:0.5em}

.media-player.waiting .media-play-pause.active {
    animation: anim-waiting 1s infinite
}




/*# sourceMappingURL=main.css.map */