/* =========================================================
   PREZRTI RESET
========================================================= */

/* =========================================================
   BOX MODEL
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* =========================================================
   DOCUMENT
========================================================= */

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

/* =========================================================
   MEDIA
========================================================= */

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/* =========================================================
   LISTS
========================================================= */

ul,
ol {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

/* =========================================================
   LINKS
========================================================= */

a {
    text-decoration: none;
    color: inherit;
}

/* =========================================================
   FORM ELEMENTS
========================================================= */

a,
button,
input,
textarea,
select {
    font: inherit;
}

/* =========================================================
   BUTTONS
========================================================= */

button {
    border: none;
    background: none;
    color: inherit;
    cursor: pointer;
}

.clickable {
    cursor: pointer;
}
/* =========================================================
   TYPOGRAPHY
========================================================= */
h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}

h1,h2,h3,h4,h5,h6 {
    font-family: var(--font_Roboto);
    font-weight: normal;
}
h1 { font-size: var(--font_size_32);} /*(32px)*/
h2 { font-size: var(--font_size_24);} /*(24px)*/
h3 { font-size: var(--font_size_18);} /*(18.72px)*/
h4 { font-size: var(--font_size_16);} /*(16px)*/
h5 { font-size: var(--font_size_14);} /*(13.28px)*/
h6 { font-size: var(--font_size_10);} /*(10.72px)*/

/* =========================================================
   SCROLLBAR
========================================================= */

* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

*::-webkit-scrollbar {
    display: none;
}

/* =========================================================
   SVG symbols
========================================================= */

.svg_symbols {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.svg_icon {
    display: block;
    width: var(--space_5);
    height: var(--space_5);
    fill: var(--color_LunarGreen);
    flex-shrink: 0;
}

.SVG_link {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    min-width: var(--space_15);
    min-height: var(--space_4);
    text-decoration: none;
}

.SVG_style {
    position: static;
    width: var(--space_15);
    height: var(--space_4);
    margin: 0;
    fill: var(--color_Red);
    flex: 0 0 auto;
}

.SVG_hide {
    display: none;
    align-items: center;
    gap: var(--space_1);
    white-space: nowrap;
    font-style: italic;
}

    .SVG_hide .SVG_style {
        width: var(--space_4);
        height: var(--space_4);
    }

    .SVG_hide span {
        display: inline-block;
        line-height: 1;
    }

.SVG_link:is(:hover, :focus-visible) .SVG_show {
    display: none;
}

.SVG_link:is(:hover, :focus-visible) .SVG_hide {
    display: inline-flex;
}
    .icon_up {
        display: none;
    }

    .song_release_toggle[aria-expanded="true"] .icon_down,
    .song_section_toggle[aria-expanded="true"] .icon_down {
        display: none;
    }

    .song_release_toggle[aria-expanded="true"] .icon_up,
    .song_section_toggle[aria-expanded="true"] .icon_up {
        display: block;
    }

    .svg_icon use {
        fill: inherit;
    }

    .state_visible {
        display: block;
    }

    .state_hidden {
        display: none !important;
    }


@media only screen and (max-width: 64em) {
    .svg_icon {
        width: var(--space_10);
        height: var(--space_10);
    }
        .clickable .svg_icon {
            opacity: 1;
        }

    .SVG_hide {
        display: block;
    }
}