@media (prefers-color-scheme: light) {
    :root {
        --text: rgb(246, 233, 252);
        --background: rgb(23, 20, 25);
        --primary: rgb(116, 49, 216);
        --secondary: rgb(0, 36, 23);
        --accent: rgb(125, 56, 28);

        --text-50: rgb(246, 233, 252);
        --text-100: rgb(237, 210, 249);
        --text-200: rgb(218, 165, 243);
        --text-300: rgb(200, 120, 237);
        --text-400: rgb(181, 75, 231);
        --text-500: rgb(163, 31, 224);
        --text-600: rgb(130, 24, 180);
        --text-700: rgb(98, 18, 135);
        --text-800: rgb(65, 12, 90);
        --text-900: rgb(33, 6, 45);
        --text-950: rgb(16, 3, 22);

        --background-50: rgb(243, 241, 244);
        --background-100: rgb(230, 227, 232);
        --background-200: rgb(205, 198, 210);
        --background-300: rgb(180, 170, 187);
        --background-400: rgb(155, 142, 164);
        --background-500: rgb(130, 113, 142);
        --background-600: rgb(104, 91, 113);
        --background-700: rgb(78, 68, 85);
        --background-800: rgb(52, 45, 57);
        --background-850: rgb(39, 34, 43);
        --background-900: rgb(26, 23, 28);
        --background-950: rgb(13, 11, 14);

        --primary-50: rgb(241, 234, 251);
        --primary-100: rgb(226, 212, 247);
        --primary-200: rgb(197, 169, 239);
        --primary-300: rgb(168, 126, 231);
        --primary-400: rgb(139, 84, 222);
        --primary-500: rgb(110, 41, 214);
        --primary-600: rgb(88, 33, 171);
        --primary-700: rgb(66, 24, 129);
        --primary-800: rgb(44, 16, 86);
        --primary-900: rgb(22, 8, 43);
        --primary-950: rgb(11, 4, 21);

        --secondary-50: rgb(229, 255, 246);
        --secondary-100: rgb(204, 255, 236);
        --secondary-200: rgb(153, 255, 218);
        --secondary-300: rgb(102, 255, 199);
        --secondary-400: rgb(51, 255, 180);
        --secondary-500: rgb(0, 255, 162);
        --secondary-600: rgb(0, 204, 129);
        --secondary-700: rgb(0, 153, 97);
        --secondary-800: rgb(0, 102, 65);
        --secondary-900: rgb(0, 51, 32);
        --secondary-950: rgb(0, 26, 16);

        --accent-50: rgb(250, 239, 234);
        --accent-100: rgb(246, 223, 213);
        --accent-200: rgb(236, 190, 172);
        --accent-300: rgb(227, 158, 130);
        --accent-400: rgb(217, 125, 89);
        --accent-500: rgb(208, 93, 47);
        --accent-600: rgb(166, 74, 38);
        --accent-700: rgb(125, 56, 28);
        --accent-800: rgb(83, 37, 19);
        --accent-900: rgb(42, 19, 9);
        --accent-950: rgb(21, 9, 5);
    }
}
@media (prefers-color-scheme: dark) {
    /* https://www.realtimecolors.com/?colors=f6e9fc-171419-7431d8-002417-7d381c */
    :root {
        --text: rgb(246, 233, 252);
        --background: rgb(23, 20, 25);
        --primary: rgb(116, 49, 216);
        --secondary: rgb(0, 36, 23);
        --accent: rgb(125, 56, 28);

        --text-50: rgb(246, 233, 252);
        --text-100: rgb(237, 210, 249);
        --text-200: rgb(218, 165, 243);
        --text-300: rgb(200, 120, 237);
        --text-400: rgb(181, 75, 231);
        --text-500: rgb(163, 31, 224);
        --text-600: rgb(130, 24, 180);
        --text-700: rgb(98, 18, 135);
        --text-800: rgb(65, 12, 90);
        --text-900: rgb(33, 6, 45);
        --text-950: rgb(16, 3, 22);

        --background-50: rgb(243, 241, 244);
        --background-100: rgb(230, 227, 232);
        --background-200: rgb(205, 198, 210);
        --background-300: rgb(180, 170, 187);
        --background-400: rgb(155, 142, 164);
        --background-500: rgb(130, 113, 142);
        --background-600: rgb(104, 91, 113);
        --background-700: rgb(78, 68, 85);
        --background-800: rgb(52, 45, 57);
        --background-850: rgb(39, 34, 43);
        --background-900: rgb(26, 23, 28);
        --background-950: rgb(13, 11, 14);

        --primary-50: rgb(241, 234, 251);
        --primary-100: rgb(226, 212, 247);
        --primary-200: rgb(197, 169, 239);
        --primary-300: rgb(168, 126, 231);
        --primary-400: rgb(139, 84, 222);
        --primary-500: rgb(110, 41, 214);
        --primary-600: rgb(88, 33, 171);
        --primary-700: rgb(66, 24, 129);
        --primary-800: rgb(44, 16, 86);
        --primary-900: rgb(22, 8, 43);
        --primary-950: rgb(11, 4, 21);

        --secondary-50: rgb(229, 255, 246);
        --secondary-100: rgb(204, 255, 236);
        --secondary-200: rgb(153, 255, 218);
        --secondary-300: rgb(102, 255, 199);
        --secondary-400: rgb(51, 255, 180);
        --secondary-500: rgb(0, 255, 162);
        --secondary-600: rgb(0, 204, 129);
        --secondary-700: rgb(0, 153, 97);
        --secondary-800: rgb(0, 102, 65);
        --secondary-900: rgb(0, 51, 32);
        --secondary-950: rgb(0, 26, 16);

        --accent-50: rgb(250, 239, 234);
        --accent-100: rgb(246, 223, 213);
        --accent-200: rgb(236, 190, 172);
        --accent-300: rgb(227, 158, 130);
        --accent-400: rgb(217, 125, 89);
        --accent-500: rgb(208, 93, 47);
        --accent-600: rgb(166, 74, 38);
        --accent-700: rgb(125, 56, 28);
        --accent-800: rgb(83, 37, 19);
        --accent-900: rgb(42, 19, 9);
        --accent-950: rgb(21, 9, 5);
    }
}

:root {
    --header-font: 'Fredoka', sans-serif;
    --body-font: 'Nunito', sans-serif;

    --bs-heading-color: var(--text);
    --bs-body-font-family: var(--body-font);
    --bs-body-color: var(--text);
}

/* hebrew */
@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(https://fonts.gstatic.com/s/fredoka/v16/X7nP4b87HvSqjb_WIi2yDCRwoQ_k7367_B-i2yQag0-mac3O8SL8E-mKpNk.woff2) format('woff2');
    unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

/* latin-ext */
@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(https://fonts.gstatic.com/s/fredoka/v16/X7nP4b87HvSqjb_WIi2yDCRwoQ_k7367_B-i2yQag0-mac3O8SL8H-mKpNk.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(https://fonts.gstatic.com/s/fredoka/v16/X7nP4b87HvSqjb_WIi2yDCRwoQ_k7367_B-i2yQag0-mac3O8SL8EemK.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDLshdTk3j77e.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDLshdTA3j77e.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDLshdTs3j77e.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDLshdTo3j77e.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDLshdTQ3jw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.main-container {
    max-width: 1600px;
    margin: 0 auto;
    padding-top: 80px;
}

div._spacer.sm {
    height: 25px;
}

div._spacer.sm.fine-tune-1 {
    height: 20px !important;
}

div._spacer.sm.fine-tune-2 {
    height: 15px !important;
}

div._spacer.sm.fine-tune-3 {
    height: 10px !important;
}

div._spacer.sm.fine-tune-4 {
    height: 8px !important;
}

div._spacer.sm.fine-tune-5 {
    height: 5px !important;
}

div._spacer.md {
    height: 50px;
}

div._spacer.lg {
    height: 75px;
}

div._spacer.xl {
    height: 100px;
}

div._spacer.xxl {
    height: 125px;
}

div._spacer.xxxl {
    height: 150px;
}

html, body {
    background-color: var(--background);
    font-family: var(--body-font) !important;
}

a {
    color: var(--accent-100);
    text-decoration: none;
}

a:hover {
    color: var(--accent-300);
    text-decoration: underline;
}

a:focus {
    color: var(--accent-300);
}

a:active {
    color: var(--accent-300);
}

a:visited {
    color: var(--accent-400);
}

nav {
    background: var(--primary-800) !important;
    background: linear-gradient(50deg, var(--primary-800) 0%, var(--primary-700) 100%) !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 50px;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
}

.navbar-toggler {
    color: var(--text);
    border-color: rgba(246, 233, 252, 0.25);
}

i.bx.nav-ico {
    color: var(--text) !important;
}

@media (max-width: 992px) {
    .navbar-collapse {
        background-color: rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(5px);
        --webkit-backdrop-filter: blur(5px);
        padding: 20px;
        display: block;
        border-radius: 1rem;
    }
}

.fixed-top {
    border-bottom-left-radius: 1.2rem !important;
    border-bottom-right-radius: 1.2rem !important;
    box-shadow: 0 8px 12px rgba(130, 113, 142, 0.2) !important;
}

@media (min-width: 992px) {
    .navbar-nav .nav-link.active:not(.nav-link:hover) {
        color: var(--secondary-200);
        background-color: var(--primary-700);
        border-bottom: solid 2px var(--secondary-200);
        border-radius: 0.5rem;
    }

    .navbar-nav .nav-link.active:hover {
        color: var(--secondary-200);
        background-color: var(--primary-500);
        border-bottom: solid 2px var(--secondary-200);
        border-radius: 0.5rem;
        text-decoration: none !important;
    }
}

.navbar-nav .nav-link.show {
    color: var(--text);
    text-decoration: none !important;
}

.nav-link:hover {
    --bs-nav-link-hover-color: var(--secondary-200);
    border-bottom: solid 1px var(--secondary-200);
    transition: 0.2s;
    text-decoration: none !important;
}

.nav-item.nav-spacer {
    display: block;
    width: 50px;
}

.navbar-nav {
    --bs-nav-link-color: var(--text);
    --bs-nav-link-hover-color: var(--secondary-200);
    --bs-nav-link-disabled-color: var(--background-500);
    --bs-navbar-active-color: var(--secondary-200);
}

.navbar-brand, .navbar-brand:focus, .navbar-brand:hover {
    color: var(--text);
}

.navbar a:visited {
    color: var(--bs-nav-link-color);
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: var(--header-font);
}

.container.short {
    max-width: 800px !important;
}

.test-box {
    background-color: var(--background-600);
    border-radius: 1rem;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.header-box {
    background-color: var(--background-800);
    border-radius: 1.2rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.header-box p { /* subtext */
    background-color: var(--background-800);
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    padding-bottom: 10px;
}

.header-box-body {
    background-color: var(--background-700);
    border-radius: 1.2rem;
}

.header-box-body.longer {
    height: 600px;
}

.header-box-body.long {
    height: 430px;
}

.header-box-body.shorter {
    height: 260px;
}

.header-box .header-logo {
    width: 30%;
    border-radius: 3rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.header-box-h4 > p.push-up {
    margin-top: -0.75rem;
    margin-bottom: 0.5rem;
    color: var(--background-400);
}

.row.override-no-margins,
.row.override-no-margins > * {
    margin: 0 !important;
    padding: 0 !important;
}

.combo-flag-container {
    margin-bottom: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

i.bx {
    font-size: 1rem;
    color: var(--secondary-200);
}

.manual-list > small {
    color: var(--background-400);
}

div.data-entry-box {
    position: relative;
    background-color: var(--background-800);
    border-radius: 1.2rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    height: 100%;
    max-height: 65px;
    margin-bottom: 20px;
}

div.data-entry-box.loved {
    border: solid 1px var(--accent-200);
}

div.data-content > p:last-child {
    font-size: 0.8rem;
    color: var(--background-400);
}

a > div.linked.data-entry-box {
    border: solid 1px transparent;
}

a > div.data-entry-box {
    transition: border 0.2s;
}

a > div.data-entry-box > div.data-content > p,
a > div.data-entry-box > div.data-content:visited > p,
a > div.data-entry-box > div.data-content:hover > p {
    color: var(--text) !important;
    text-decoration: none !important;
}

a > div.data-entry-box:hover {
    border: solid 1px var(--accent-200);
    transition: border 0.2s;
}

a > div.linked > div.data-content > p:last-child {
    font-size: 0.8rem;
    color: var(--background-400) !important;
}

span.floating-loved i.bx {
    position: absolute;
    top: 0;
    left: 0;
    padding: 8px;
    color: var(--accent-200) !important;
    opacity: 0.5;
}

span.floating-loved.customIcon {
    position: absolute;
    top: 0;
    left: 0;
    padding: 8px;
    color: var(--accent-200) !important;
    opacity: 0.5;
}

span.floating-loved.customIcon > svg {
    height: 0.9em;
    width: 0.9em;
    fill: var(--accent-200);
    bottom: 3px;
    position: relative;
}

.row.screen-size-fix {
    margin-bottom: 85px !important;
}

.inner-header-box {
    background-color: var(--background-800);
    border-radius: 1.2rem;
    padding-top: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.inner-header-box p { /* subtext */
    background-color: var(--background-800);
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    padding-bottom: 10px;
    margin-top: -0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    color: var(--background-400);
}

.inner-header-box-body {
    background: var(--background-850);
    background: linear-gradient(50deg, var(--background-850) 0%, var(--background-900) 100%) !important;
    border-radius: 1.2rem;
    box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.3);
}

.span-interest {
    color: var(--accent-200);
}

#player iframe {
    border: 0;
    width: 100%;
    height: 95px;
    padding-right: 10px;
    padding-left: 10px;
}

div.container#lastfm-control {
    margin-top: -25px;
}

div.container.footer-box {
    max-width: 25% !important;
    background-color: var(--background-900);
    border-radius: 1.2rem;
    /*border: solid 1px var(--secondary-200);*/
    opacity: 0.5;
}

div.footer-box {
    max-width: 250px;

}

div.inner-footer-box p:first-child {
    margin-top: 1rem;
}

div.inner-footer-box p:last-child {
    margin-bottom: 1rem;
}

span.mintlily {
    color: var(--secondary-200);
}

span.language-spacer:after {
    padding-bottom: 25px;
}

span.fi.smallerFlag {
    zoom: 85% !important;
}

div.progress-bar.w-20 {
    width: 20% !important;
}

div.progress-bar.w-3 {
    width: 3.3333334% !important;
}

div.progress-bar.w-80 {
    width: 80% !important;
}

div.progress-bar.w-85 {
    width: 85% !important;
}

div.progress-bar.w-10 {
    width: 10% !important;
}

.progress {
    --bs-progress-bar-color: var(--background-800);
    --bs-progress-bar-bg: var(--accent-200);
    --bs-progress-bg: var(--background-800);
}

.progress.low-step {
    --bs-progress-bar-bg: var(--accent-100);
}

.progress.mid-step {
    --bs-progress-bar-bg: var(--accent-300);
}

.progress.high-step {
    --bs-progress-bar-bg: var(--accent-400);
}