/* stylelint-disable declaration-no-important, no-duplicate-selectors, no-descending-specificity */

/* IMPORTS: START */
@import url("/static/stylesheets/fonts/manrope.css");

/* IMPORTS: END */

/* VARIABLES: START */

:root {
    /* VARIABLES - GENERAL: START */
    --site-language-direction: ltr;
    --site-language-alignment: left;
    --site-language-flex-alignment: flex-start;
    --viewport-height: 100vh;
    --background-height: 100vh;

    /* VARIABLES - GENERAL: END */

    /* VARIABLES - SPACES: START */

    /* VARIABLES - SPACES - STANDALONE: START */
    --space-3xs: clamp(0.31rem, calc(0.29rem + 0.12vw), 0.38rem);
    --space-2xs: clamp(0.69rem, calc(0.66rem + 0.12vw), 0.75rem);
    --space-xs: clamp(1rem, calc(0.95rem + 0.24vw), 1.13rem);
    --space-s: clamp(1.31rem, calc(1.24rem + 0.37vw), 1.5rem);
    --space-m: clamp(2rem, calc(1.9rem + 0.49vw), 2.25rem);
    --space-l: clamp(2.63rem, calc(2.48rem + 0.73vw), 3rem);
    --space-xl: clamp(3.94rem, calc(3.72rem + 1.1vw), 4.5rem);
    --space-2xl: clamp(5.25rem, calc(4.96rem + 1.46vw), 6rem);
    --space-3xl: clamp(7.88rem, calc(7.44rem + 2.2vw), 9rem);

    /* VARIABLES - SPACES - STANDALONE: END */

    /* VARIABLES - SPACES - ONE-UP PAIRS: START */
    --space-3xs-2xs: clamp(0.31rem, calc(0.14rem + 0.85vw), 0.75rem);
    --space-2xs-xs: clamp(0.69rem, calc(0.52rem + 0.85vw), 1.13rem);
    --space-xs-s: clamp(1rem, calc(0.8rem + 0.98vw), 1.5rem);
    --space-s-m: clamp(1.31rem, calc(0.95rem + 1.83vw), 2.25rem);
    --space-m-l: clamp(2rem, calc(1.61rem + 1.95vw), 3rem);
    --space-l-xl: clamp(2.63rem, calc(1.89rem + 3.66vw), 4.5rem);
    --space-xl-2xl: clamp(3.94rem, calc(3.13rem + 4.02vw), 6rem);
    --space-2xl-3xl: clamp(5.25rem, calc(3.79rem + 7.32vw), 9rem);

    /* VARIABLES - SPACES - ONE-UP PAIRS: END */

    /* VARIABLES - SPACES - CUSTOM PAIRS: START */
    --space-s-l: clamp(1.31rem, calc(0.65rem + 3.29vw), 3rem);

    /* VARIABLES - SPACES - CUSTOM PAIRS: END */

    /* VARIABLES - SPACES: END */
}

/* VARIABLES - COLORS: START */

html {
    /* VARIABLES - COLORS - LIGHT THEME: START */

    /* VARIABLES - COLORS - LIGHT THEME - BACKGROUND: START */

    /* VARIABLES - COLORS - LIGHT THEME - BACKGROUND - #1: START */

    /* base: hsl(240, 30%, 98%) */
    --rbg-1: 240deg, 30%, 98%;
    --bg-1: hsl(var(--rbg-1));
    --bg-1-1: hsl(240deg 28% 96%);
    --bg-1-2: hsl(238deg 25% 92%);
    --bg-1-3: hsl(236deg 22% 86%);
    --bg-1-4: hsl(234deg 18% 78%);
    --bg-1-5: hsl(232deg 16% 68%);
    --bg-1-6: hsl(230deg 14% 56%);

    /* VARIABLES - COLORS - LIGHT THEME - BACKGROUND - #1: END */

    /* VARIABLES - COLORS - LIGHT THEME - BACKGROUND - #2: START */

    /* base: hsl(232, 18%, 74%) */
    --rbg-2: 232deg, 18%, 74%;
    --bg-2: hsl(var(--rbg-2));
    --bg-2-1: hsl(232deg 20% 65%);
    --bg-2-2: hsl(232deg 22% 56%);

    /* VARIABLES - COLORS - LIGHT THEME - BACKGROUND - #2: END */

    /* VARIABLES - COLORS - LIGHT THEME - BACKGROUND: END */

    /* VARIABLES - COLORS - LIGHT THEME - FOREGOUND: START */

    /* VARIABLES - COLORS - LIGHT THEME - FOREGOUND - #1: START */

    /* base: hsl(262, 62%, 42%) */
    --rfg-1: 262deg, 62%, 42%;
    --fg-1: hsl(var(--rfg-1));
    --fg-1-1: hsl(262deg 62% 36%);
    --fg-1-2: hsl(262deg 64% 30%);
    --fg-1-3: hsl(262deg 66% 24%);

    /* VARIABLES - COLORS - LIGHT THEME - FOREGOUND - #1: END */

    /* VARIABLES - COLORS - LIGHT THEME - FOREGOUND - #2: START */

    /* base: hsl(326, 68%, 46%) */
    --rfg-2: 326deg, 68%, 46%;
    --fg-2: hsl(var(--rfg-2));
    --fg-2-1: hsl(326deg 70% 40%);
    --fg-2-2: hsl(326deg 72% 34%);
    --fg-2-3: hsl(326deg 74% 28%);

    /* VARIABLES - COLORS - LIGHT THEME - FOREGOUND - #2: END */

    /* VARIABLES - COLORS - LIGHT THEME - FOREGOUND - #3: START */

    /* base: hsl(321, 75%, 46%) */
    --rfg-3: 321deg, 75%, 46%;
    --fg-3: hsl(var(--rfg-3));

    /* VARIABLES - COLORS - LIGHT THEME - FOREGOUND - #3: END */

    /* VARIABLES - COLORS - LIGHT THEME - TEXT: START */
    --text-1: hsl(235deg 20% 16%);
    --text-2: hsl(235deg 12% 32%);
    --text-strong: hsl(235deg 24% 10%);

    /* VARIABLES - COLORS - LIGHT THEME - TEXT: END */

    /* VARIABLES - COLORS - LIGHT THEME - FOREGOUND: END */

    /* VARIABLES - COLORS - LIGHT THEME - STATUS: START */
    --error-1: hsl(0deg 80% 45%);
    --valid-1: hsl(120deg 60% 40%);

    /* VARIABLES - COLORS - LIGHT THEME - STATUS: END */

    /* VARIABLES - COLORS - LIGHT THEME - EFFECTS: START */
    --neon: 260deg, 90%, 74%;
    --background-blur-color: hsl(0deg 0% 0% / 20%);

    /* VARIABLES - COLORS - LIGHT THEME - EFFECTS: END */

    color-scheme: light;

    /* VARIABLES - COLORS - LIGHT THEME: END */
}

[data-theme="dark"] {
    /* VARIABLES - COLORS - DARK THEME: START */

    /* VARIABLES - COLORS - DARK THEME - BACKGROUND: START */

    /* VARIABLES - COLORS - DARK THEME - BACKGROUND - #1: START */

    /* base: hsl(230, 25%, 10%) */
    --rbg-1: 230deg, 25%, 10%;
    --bg-1: hsl(var(--rbg-1));
    --bg-1-1: hsl(229deg 24% 15%);
    --bg-1-2: hsl(228deg 23% 20%);
    --bg-1-3: hsl(227deg 22% 25%);
    --bg-1-4: hsl(226deg 21% 30%);
    --bg-1-5: hsl(225deg 20% 35%);
    --bg-1-6: hsl(224deg 19% 40%);

    /* VARIABLES - COLORS - DARK THEME - BACKGROUND - #1: END */

    /* VARIABLES - COLORS - DARK THEME - BACKGROUND - #2: START */

    /* base: hsl(232, 22%, 40%) */
    --rbg-2: 232deg, 22%, 40%;
    --bg-2: hsl(var(--rbg-2));
    --bg-2-1: hsl(231deg 21% 47%);
    --bg-2-2: hsl(230deg 20% 54%);

    /* VARIABLES - COLORS - DARK THEME - BACKGROUND - #2: END */

    /* VARIABLES - COLORS - DARK THEME - BACKGROUND: END */

    /* VARIABLES - COLORS - DARK THEME - FOREGOUND: START */

    /* VARIABLES - COLORS - DARK THEME - FOREGOUND - #1: START */

    /* base: hsl(260, 50%, 70%) */
    --rfg-1: 260deg, 50%, 70%;
    --fg-1: hsl(var(--rfg-1));
    --fg-1-1: hsl(260deg 51% 65%);
    --fg-1-2: hsl(260deg 52% 60%);
    --fg-1-3: hsl(260deg 53% 55%);

    /* VARIABLES - COLORS - DARK THEME - FOREGOUND - #1: END */

    /* VARIABLES - COLORS - DARK THEME - FOREGOUND - #2: START */

    /* base: hsl(326, 70%, 70%) */
    --rfg-2: 326deg, 70%, 70%;
    --fg-2: hsl(var(--rfg-2));
    --fg-2-1: hsl(326deg 75% 65%);
    --fg-2-2: hsl(326deg 80% 60%);
    --fg-2-3: hsl(326deg 85% 55%);

    /* VARIABLES - COLORS - DARK THEME - FOREGOUND - #2: END */

    /* VARIABLES - COLORS - DARK THEME - FOREGOUND - #3: START */

    /* base: hsl(321, 100%, 81%) */
    --rfg-3: 321deg, 100%, 81%;
    --fg-3: hsl(var(--rfg-3));

    /* VARIABLES - COLORS - DARK THEME - FOREGOUND - #3: END */

    /* VARIABLES - COLORS - DARK THEME - TEXT: START */
    --text-1: hsl(250deg 25% 88%);
    --text-2: hsl(250deg 18% 74%);
    --text-strong: #fff;

    /* VARIABLES - COLORS - DARK THEME - TEXT: END */

    /* VARIABLES - COLORS - DARK THEME - FOREGOUND: END */

    /* VARIABLES - COLORS - DARK THEME - STATUS: START */
    --error-1: hsl(0deg 80% 65%);
    --valid-1: hsl(120deg 60% 65%);

    /* VARIABLES - COLORS - DARK THEME - STATUS: END */

    /* VARIABLES - COLORS - DARK THEME - EFFECTS: START */
    --neon: 260deg, 90%, 74%;
    --background-blur-color: hsl(0deg 0% 100% / 20%);

    /* VARIABLES - COLORS - DARK THEME - EFFECTS: END */

    color-scheme: dark;

    /* VARIABLES - COLORS - DARK THEME: END */
}

/* VARIABLES - COLORS: END */

/* VARIABLES: END */

/* OVERRIDE HEADER */
header {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
}

/* COLOR: START */

body {
    background-color: var(
        --bg-1
    ) !important; /* override `./downloaded/browserux.css` */

    color: var(--text-1) !important; /* override `./downloaded/browserux.css` */
}

/* COLOR: END */

/* HEADERS: START */

h1,
h2,
h3,
h4,
h5,
h6 {
    text-align: center;
}

h1 {
    margin: 0.5em 0;
    color: var(--text-strong);
    font-family: Manrope, Montserrat, sans-serif;
    font-size: 2.5em;
    line-height: 1.25;
    font-weight: 900;
}

h1 a {
    text-decoration: dashed;
}

h1 a:hover {
    text-decoration: underline;
}

h2 {
    font-size: 32px;
    margin: 0.45em 0;
}

h3 {
    font-size: 26px;
    margin: 0.4em 0;
}

h4 {
    font-size: 20px;
    margin: 0.35em 0;
}

h5 {
    font-size: 16px;
    margin: 0.3em 0;
}

h6 {
    font-size: 14px;
    margin: 0.25em 0;
}

/* HEADERS: END */

/* ICONS: START */

.icons {
    cursor: pointer;
    background: none;
    border: none;
}

.icons > img {
    height: 40px;
}

header {
    display: flex;
    justify-content: right;
    padding: 10px
}

/* ICONS: END */

/* SVG ICONS: START */
.svg-icon {
    display: inline-block;
    background-color: var(--text-1);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

.icons .svg-icon {
    width: 40px;
    height: 40px;
}

.hamburger-dropdown .svg-icon {
    width: 20px;
    height: 20px;
}

.nav-icon-menu {
    mask-image: url("/static/assets/images/menu.svg");
}

.nav-icon-settings {
    mask-image: url("/static/assets/images/settings.svg");
}

.nav-icon-info {
    mask-image: url("/static/assets/images/info.svg");
}

.nav-icon-logout {
    mask-image: url("/static/assets/images/logout.svg");
}

/* SVG ICONS: END */

/* BUTTONS: START */

.styled, .styled-button {
    padding: var(--space-xs);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 500;
    color: var(--bg-1);
    background-color: var(--fg-1);
    border: none;
    border-radius: 45px;
    box-shadow: 0 8px 15px hsl(0deg 0 0 / 10%);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
}

.styled:hover, .styled-button:hover {
    background-color: hsl(var(--neon));
    box-shadow: 0 15px 20px hsl(var(--neon), 0.4);
    color: var(--bg-1);
    transform: translateY(-7px);
}

.styled:active, .styled-button:active {
    background-color: var(--fg-1);
    box-shadow: 0 15px 20px hsl(var(--rfg-1), 0.4);
    transform: translateY(-1px);
}

.styled:disabled,
.styled[disabled],
.styled-button:disabled,
.styled-button[disabled] {
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed !important;
    background-color: hsl(var(--rfg-1), 0.5) !important;
}

/* BUTTONS: END */

/* STRUCTURE: START */

.wrapper {
    -webkit-overflow-scrolling: touch;
    padding-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: var(--viewport-height);
    position: relative;
    overflow: hidden;
    margin: auto;
}

.main {
    --alignment: center;
    --flex-alignment: center;
    --width: 55rem;
    --padding-vertical: 3.5rem;
    --padding-horizontal: 3.5rem;

    display: flex;
    max-width: 100%;
    position: relative;
    text-align: var(--alignment);
    align-items: center;
    justify-content: center;
    flex-grow: 0;
    flex-shrink: 0;
    transform-origin: 50% 50%;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    filter: none !important;
}

/* STRUCTURE: END */

/* VISIBILITY: START */

.is-show {
    visibility: visible;
    display: block;
    opacity: 1;
}

/* VISIBILITY: END */

/* SCROLLBAR: START */

/* SCROLLBAR - MAIN */
::-webkit-scrollbar {
    width: var(--sbw);
}

/* SCROLLBAR - HANDLE */
::-webkit-scrollbar-thumb {
    background: var(--bg-2);
    border-radius: var(--sbw);
}

/* SCROLLBAR - HANDLE ON HOVER */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* SCROLLBAR - TRACK */
::-webkit-scrollbar-track {
    background: var(--bg-1-2);
}

/* SCROLLBAR: END */

/* OTHER: START */

/* OTHER - STRIKETHROUGH */
s {
    color: #808080;
}

p {
    margin: 1em;
}

hr .inner {
    margin: 0.5em 0;
}

/* OTHER: END */

/* HAMBURGER MENU: START */
.hamburger-menu {
    position: relative;
    display: inline-block;
}

.hamburger-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    background-color: var(--bg-1-2);
    box-shadow: 0 8px 16px rgb(0 0 0 / 20%);
    border-radius: 8px;
    z-index: 1000;
    min-width: 150px;
    overflow: hidden;
    display: none;
    flex-direction: column;
}

.hamburger-dropdown.show {
    display: flex;
}

.hamburger-dropdown > button, .hamburger-dropdown > a {
    background: none;
    border: none;
    color: var(--text-1);
    padding: 12px 16px;
    text-align: left;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    font-family: Manrope, Montserrat, sans-serif;
}

.hamburger-dropdown > button:hover, .hamburger-dropdown > a:hover {
    background-color: var(--bg-1-4);
}

.hamburger-dropdown > button > img, .hamburger-dropdown > a > img {
    height: 20px;
    width: 20px;
}

/* HAMBURGER MENU: END */