@font-face {
    font-family: "VarelaRound";
    src: url("../fonts/VarelaRound-Regular.ttf");
}

@font-face {
    font-family: "MPLUSRounded1c";
    src: url("../fonts/MPLUSRounded1c-Black.ttf");
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: "MPLUSRounded1c";
    src: url("../fonts/MPLUSRounded1c-ExtraBold.ttf");
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: "MPLUSRounded1c";
    src: url("../fonts/MPLUSRounded1c-Bold.ttf");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "MPLUSRounded1c";
    src: url("../fonts/MPLUSRounded1c-Medium.ttf");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "MPLUSRounded1c";
    src: url("../fonts/MPLUSRounded1c-Regular.ttf");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "MPLUSRounded1c";
    src: url("../fonts/MPLUSRounded1c-Light.ttf");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "MPLUSRounded1c";
    src: url("../fonts/MPLUSRounded1c-Thin.ttf");
    font-weight: 300;
    font-style: normal;
}

:root {
    color-scheme: light dark;
    --max-width: 60em;
    --backdrop-blur: 0.25em;
    --background-backdrop-color: #222222A5;
    --background-backdrop-color-sub: #222222A5;
    --background-color: #222;
    --foreground-color: #ccc;
    --foreground-color-waiting-progress: #045778;
    --success-foreground-color: #047857;
    --error-foreground-color: #B91C1C;
    --drop-shadow-color: #111;
    --canvas-invert: 0.867;
    --animation-time: 300ms;
}

@media (prefers-color-scheme: light) {
    :root {
        --background-backdrop-color: #ddddddA5;
        --background-backdrop-color-sub: #e9e9e9a5;
        --background-color: #eee;
        --foreground-color: #000;
        --foreground-color-waiting-progress: #1081B9;
        --success-foreground-color: #10B981;
        --error-foreground-color: #EF4444;
        --drop-shadow-color: #aaa;
        --canvas-invert: 0.067;
    }
}

* {
    padding: 0;
    margin: 0;
    list-style-type: none;
    font-family: "MPLUSRounded1c", sans-serif;
    font-weight: 500;
    box-sizing: border-box;
    outline: none;
    border: none;
    color: var(--foreground-color);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

*,
*::before,
*::after {
}

html {
    font-size: 14px;
    overflow-y: scroll;
}

html, body {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    background-color: var(--background-color);
}

body {
    position: relative;
    z-index: -2;
}

.special-info-big {
    text-wrap-mode: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    flex-grow: 1;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
}

.header-toggle {
    display: none;
    grid-column: none;
}

.special-info-small {
    display: none;
    text-align: center;
}

header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5em;
    border-radius: 0 0 0.75em 0.75em;
    top: 0;
    z-index: 10000;
}

header, main, footer {
    padding: 0.5em 1em;
}

header, footer {
    position: sticky;
    margin: 0 auto;
    min-height: 3em;
    box-shadow: 0 0 1em var(--drop-shadow-color);
    background-color: var(--background-backdrop-color);
    backdrop-filter: blur(var(--backdrop-blur));
    width: 100%;
    max-width: var(--max-width);
}

header > nav, footer > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: var(--max-width);
}

header > nav > ul {
    display: flex;
    gap: 0.5em;
    flex-wrap: wrap;
    justify-content: flex-end;
}

header > nav > ul > li {
    white-space: nowrap;
}

header > nav > ul > li > a,
header > nav > ul > li > form > button {
    position: relative;
    display: inline-block;
    color: var(--foreground-color);
    text-decoration: none;
}

header > nav > ul > li > a::after,
header > nav > ul > li > form > button::after {
    position: absolute;
    content: "";
    width: 0;
    bottom: 0;
    left: 50%;
    height: 0.025em;
    display: block;
    background: var(--foreground-color);
    transition: 150ms;
}

header > nav > ul > li > a:hover::after,
header > nav > ul > li > form > button:hover::after {
    width: 100%;
    left: 0;
}

main {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;
}

footer {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100vh - 3em);
    visibility: hidden;
    border-radius: 0.75em 0.75em 0 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

button {
    border: none;
    background-color: transparent;
    opacity: 1;
    transition: opacity var(--animation-time) ease-in-out;
    cursor: pointer;
    font-size: 1em;
}

button:disabled {
    opacity: 0.5;
}

header:not(.opened) > .header-toggle {
    background-color: var(--foreground-color);
    mask: url("../icons/menu-01-svgrepo-com.svg") no-repeat center;
    -webkit-mask: url("../icons/menu-01-svgrepo-com.svg") no-repeat center;
}

.event-output > .remove,
.close,
header.opened > .header-toggle {
    background-color: var(--foreground-color);
    mask: url("../icons/error-cross-svgrepo-com.svg") no-repeat center;
    -webkit-mask: url("../icons/error-cross-svgrepo-com.svg") no-repeat center;
}

.dark-view-toggle {
    background-color: var(--foreground-color);
    mask: url("../icons/dark-mode-svgrepo-com.svg") no-repeat center;
    -webkit-mask: url("../icons/dark-mode-svgrepo-com.svg") no-repeat center;
}

.upload-btn {
    background-color: var(--foreground-color);
    mask: url("../icons/upload-svgrepo-com.svg") no-repeat center;
    -webkit-mask: url("../icons/upload-svgrepo-com.svg") no-repeat center;
}

.event-output {
    opacity: 0;
    transition: opacity var(--animation-time) ease-in-out;
    position: relative;
}

.event-output > .waiting, .in-progress {
    background-color: var(--foreground-color);
    mask: url("../icons/stopwatch-wait-svgrepo-com.svg") no-repeat center;
    -webkit-mask: url("../icons/stopwatch-wait-svgrepo-com.svg") no-repeat center;
}

.event-output > .progress-bar {
    background-color: var(--foreground-color);
    mask: url("../icons/progress-0-svgrepo-com.svg") no-repeat center;
    -webkit-mask: url("../icons/progress-0-svgrepo-com.svg") no-repeat center;
    cursor: pointer;
}

.event-output > .progress-bar-inner {
    position: absolute;
    cursor: pointer;
    pointer-events: none;
}

.event-output > .progress-bar-inner-linear {
    background-color: var(--foreground-color);
    color: transparent;
    width: 0;
    border-radius: 0.1em;
    height: 20%;
    top: 40%;
    left: 0.8em;
}

.event-output > .progress-bar-inner-text {
    background-color: transparent;
    color: var(--foreground-color);
    font-size: 0.75em;
    height: 100%;
    top: 0;
    left: 0;
    width: 100%;
    font-weight: 800;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.is-done {
    background-color: var(--foreground-color);
    mask: url("../icons/round-done-button-svgrepo-com.svg") no-repeat center;
    -webkit-mask: url("../icons/round-done-button-svgrepo-com.svg") no-repeat center;
}

.event-output > .success {
    background-color: var(--success-foreground-color);
    mask: url("../icons/success-tick-svgrepo-com.svg") no-repeat center;
    -webkit-mask: url("../icons/success-tick-svgrepo-com.svg") no-repeat center;
}

.event-output > .error {
    background-color: var(--error-foreground-color);
    mask: url("../icons/error-cross-svgrepo-com.svg") no-repeat center;
    -webkit-mask: url("../icons/error-cross-svgrepo-com.svg") no-repeat center;
}

.parted {
    background-color: var(--foreground-color);
    mask: url("../icons/circular-cake-graphic-with-quarter-part-cutted-svgrepo-com.svg") no-repeat center;
    -webkit-mask: url("../icons/circular-cake-graphic-with-quarter-part-cutted-svgrepo-com.svg") no-repeat center;
}

.background-cover-toggle {
    background-color: var(--foreground-color);
    mask: url("../icons/background-svgrepo-com.svg") no-repeat center;
    -webkit-mask: url("../icons/background-svgrepo-com.svg") no-repeat center;
}

.event-output > .remove,
.close,
.event-output > .waiting,
.event-output > .success,
.event-output > .error,
.in-progress,
.is-done,
.upload-btn,
.dark-view-toggle,
.parted,
.event-output > .progress-bar,
.header-toggle,
.background-cover-toggle {
    mask-size: cover !important;
    -webkit-mask-size: cover !important;
    height: 2em;
    width: 2em;
    background-repeat: no-repeat;
    background-size: cover;
    flex-shrink: 0;
}

details > summary > span {
    font-size: 1.2em;
    font-weight: 600;
}

.always-open-details {
    cursor: text;
}

a.btn {
    padding: 0.5em 1em;
    background-color: var(--background-backdrop-color);
    box-shadow: 0 0 1em var(--drop-shadow-color);
    border-radius: 1em;
    text-decoration: none;
    color: var(--foreground-color);
}

.settings-container {
    height: 2em;
    display: flex;
    gap: 0.5em;
}

.low-brightness {
    filter: brightness(0.5);
}

.invert {
    filter: invert(var(--canvas-invert));
}

.filter-transition {
    transition: filter var(--animation-time) ease-in-out;
}

.opacity-on {
    opacity: 1 !important;
}

.no-scroll {
    overflow: hidden;
}

@media (hover: none) and (pointer: coarse) {
    footer {
        bottom: unset;
        top: calc(100dvh - 3em);
    }
}

@media (hover: none) and (pointer: coarse) {
    header > nav > ul > li > a::after,
    header > nav > ul > li > form > button::after {
        display: none;
    }

    body, html {
        min-height: calc(100dvh - 3em);
    }
}

@media (width < 1000px) {
    :root {
        --max-width: 100%;
    }

    html {
        font-size: 16px;
    }

    .special-info-small {
        display: block !important;
    }
}

@media (width < 800px) {
    header {
        justify-content: space-between;
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        height: 3em;
        overflow: hidden;
        display: grid;
        gap: 1em;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: 2em auto;
        transition: height var(--animation-time) ease-in-out, border-radius var(--animation-time) ease-in-out;
        transition-delay: var(--animation-time);
    }

    header.opened {
        height: 100dvh;
        border-radius: 0;
        transition-delay: 0ms;
    }

    .header-toggle {
        display: block;
        grid-row: 1;
        grid-column: 3;
    }

    header > nav {
        grid-row: 2;
        grid-column: 1 / 4;
        justify-content: center;
        opacity: 0;
        transition: opacity var(--animation-time) ease-in-out;
    }

    header.opened > nav {
        transition-delay: var(--animation-time);
        opacity: 1;
    }

    header > nav > ul {
        display: flex;
        gap: 1em;
        flex-direction: column;
    }

    header > nav > ul > li {

        text-align: center;
    }

    main {
        margin-top: 3em;
    }
}

@media (width < 700px) {
    html {
        font-size: 18px;
    }
}

.special-info-small {
    display: none !important;
}