/* #region Keyframes */

@keyframes fadeIn {
    0%   { opacity: var(--fade_in_start_opacity, 0); }
    100% { opacity: var(--fade_in_end_opacity, 1); }
}
@keyframes fadeOut {
    0%   { opacity: var(--fade_out_start_opacity, 1); }
    100% { opacity: var(--fade_out_end_opacity, 0); }
}
@keyframes slideLeft {
    0%   { left: var(--slide_left_start_left, 100vw); }
    100% { left: var(--slide_left_end_left, -100vw); }
}
@keyframes slideLeft2 {
    0%   { transform: translateX(var(--slide_left_start_left, 100vw)) translateY(var(--slide_left_y, 0)); }
    100% { transform: translateX(var(--slide_left_end_left, -100vw)) translateY(var(--slide_left_y, 0)); }
}
@keyframes slideLeft-fadeOut {
    0%   { opacity: var(--slide_left_start_opacity, 1); left: var(--slide_left_start_left, 100vw); }
    100% { opacity: var(--slide_left_end_opacity, 0); left: var(--slide_left_end_left, -100vw); }
}
@keyframes slideRight {
    0%   { left: var(--slide_right_start_left, -100vw); }
    100% { left: var(--slide_right_end_left, 100vw); }
}
@keyframes slideRight-fadeOut {
    0%   { opacity: var(--slide_right_start_opacity, 1); left: var(--slide_right_start_left, -100vw); }
    100% { opacity: var(--slide_right_end_opacity, 0); left: var(--slide_right_end_left, 100vw); }
}
@keyframes hideMainView {
    0%   { opacity:1; transform:scale(1) translateY(0); }
    60%  { transform:scale(0.9) translateY(-65vh); opacity:.4; }
    100% { transform:scale(0.7) translateY(-90vh); opacity:0; }
}
@keyframes showMainView {
    0%   { transform:scale(0.7) translateY(-90vh); opacity:0; overflow-y:hidden; }
    40%  { transform:scale(0.9) translateY(-65vh); opacity:.4; overflow-y:hidden; }
    99%  { opacity:1; transform:scale(1) translateY(0); overflow-y:hidden; }
    100% { opacity:1; transform:scale(1) translateY(0); overflow-y: auto; }
}
@keyframes squareLightTop {
    0%    {
        transform:rotate(0deg);
        top:var(--square_light_padding, .3em);
        left:var(--square_light_padding, .3em);
        opacity:var(--square_light_min_opacity, 0);
        filter:blur(var(--square_light_blur_max, 1em));
    }
    12.5% {
        transform: rotate(0deg);
        top:var(--square_light_padding, .3em);
        left:calc((100% - var(--square_light_width, 20%)) / 2);
        opacity:var(--square_light_max_opacity, 1);
        filter:blur(var(--square_light_blur_min, .6em));
    }
    24.999999999% {
        transform:rotate(0deg);
        top:var(--square_light_padding, .3em);
        left:calc(100% - var(--square_light_width, 20%) - var(--square_light_padding, .3em));
        opacity:var(--square_light_min_opacity, 0);
        filter:blur(var(--square_light_blur_max, 1em));
    }
    25%   {
        transform:rotate(90deg);
        top:var(--square_light_padding, .3em);
        left:calc(100% - var(--square_light_padding, .3em));
        opacity:var(--square_light_min_opacity, 0);
        filter:blur(var(--square_light_blur_max, 1em));
    }
    37.5% {
        transform:rotate(90deg);
        top:calc((100% - var(--square_light_width, 20%)) / 2);
        left:calc(100% - var(--square_light_padding, .3em));
        opacity:var(--square_light_max_opacity, 1);
        filter:blur(var(--square_light_blur_min, .6em));
    }
    49.999999999% {
        transform:rotate(90deg);
        top:calc(100% - var(--square_light_width, 20%) - var(--square_light_padding, .3em));
        left:calc(100% - var(--square_light_padding, .3em));
        opacity:var(--square_light_min_opacity, 0);
        filter:blur(var(--square_light_blur_max, 1em));
    }
    50%   {
        transform:rotate(0deg);
        top:calc(100% - var(--square_light_height, 20%) - var(--square_light_padding, .3em));
        left:calc(100% - var(--square_light_width, 20%) - var(--square_light_padding, .3em));
        opacity:var(--square_light_min_opacity, 0);
        filter:blur(var(--square_light_blur_max, 1em));
    }
    62.5% {
        transform:rotate(0deg);
        top:calc(100% - var(--square_light_height, 20%) - var(--square_light_padding, .3em));
        left:calc((100% - var(--square_light_width, 20%)) / 2);
        opacity:var(--square_light_max_opacity, 1);
        filter:blur(var(--square_light_blur_min, .6em));
    }
    74.999999999% {
        transform:rotate(0deg);
        top:calc(100% - var(--square_light_height, 20%) - var(--square_light_padding, .3em));
        left:var(--square_light_padding, .3em);
        opacity:var(--square_light_min_opacity, 0);
        filter:blur(var(--square_light_blur_max, 1em));
    }
    75%   {
        transform:rotate(90deg);
        top:calc(100% - var(--square_light_width, 20%) - var(--square_light_padding, .3em));
        left:calc(var(--square_light_height, 20%) + var(--square_light_padding, .3em));
        opacity:var(--square_light_min_opacity, 0);
        filter:blur(var(--square_light_blur_max, 1em));
    }
    87.5% {
        transform:rotate(90deg);
        top:calc((100% - var(--square_light_width, 20%)) / 2);
        left:calc(var(--square_light_height, 20%) + var(--square_light_padding, .3em));
        opacity:var(--square_light_max_opacity, 1);
        filter:blur(var(--square_light_blur_min, .6em));
    }
    99.999999999% {
        transform:rotate(90deg);
        top:var(--square_light_padding, .3em);
        left:calc(var(--square_light_height, 20%) + var(--square_light_padding, .3em));
        opacity:var(--square_light_min_opacity, 0);
        filter:blur(var(--square_light_blur_max, 1em));
    }
    100%  {
        transform:rotate(0deg);
        top:var(--square_light_padding, .3em);
        left:var(--square_light_padding, .3em);
        opacity:var(--square_light_min_opacity, 0);
        filter:blur(var(--square_light_blur_max, 1em));
    }
}

@keyframes squareLightBottom {
    0% {
        transform:rotate(0deg);
        top:calc(100% - var(--square_light_height, 20%) - var(--square_light_padding, .3em));
        left:calc(100% - var(--square_light_width, 20%) - var(--square_light_padding, .3em));
        opacity:var(--square_light_min_opacity, 0);
        filter:blur(var(--square_light_blur_max, 1em));
    }
    12.5% {
        transform:rotate(0deg);
        top:calc(100% - var(--square_light_height, 20%) - var(--square_light_padding, .3em));
        left:calc((100% - var(--square_light_width, 20%)) / 2);
        opacity:var(--square_light_max_opacity, 1);
        filter:blur(var(--square_light_blur_min, .6em));
    }
    24.999999999% {
        transform:rotate(0deg);
        top:calc(100% - var(--square_light_height, 20%) - var(--square_light_padding, .3em));
        left:var(--square_light_padding, .3em);
        opacity:var(--square_light_min_opacity, 0);
        filter:blur(var(--square_light_blur_max, 1em));
    }
    25% {
        transform:rotate(90deg);
        top:calc(100% - var(--square_light_width, 20%) - var(--square_light_padding, .3em));
        left:calc(var(--square_light_height, 20%) + var(--square_light_padding, .3em));
        opacity:var(--square_light_min_opacity, 0);
        filter:blur(var(--square_light_blur_max, 1em));
    }
    37.5% {
        transform:rotate(90deg);
        top:calc((100% - var(--square_light_width, 20%)) / 2);
        left:calc(var(--square_light_height, 20%) + var(--square_light_padding, .3em));
        opacity:var(--square_light_max_opacity, 1);
        filter:blur(var(--square_light_blur_min, .6em));
    }
    49.999999999% {
        transform:rotate(90deg);
        top:var(--square_light_padding, .3em);
        left:calc(var(--square_light_height, 20%) + var(--square_light_padding, .3em));
        opacity:var(--square_light_min_opacity, 0);
        filter:blur(var(--square_light_blur_max, 1em));
    }
    50%  {
        transform:rotate(0deg);
        top:var(--square_light_padding, .3em);
        left:var(--square_light_padding, .3em);
        opacity:var(--square_light_min_opacity, 0);
        filter:blur(var(--square_light_blur_max, 1em));
    }
    62.5% {
        transform: rotate(0deg);
        top:var(--square_light_padding, .3em);
        left:calc((100% - var(--square_light_width, 20%)) / 2);
        opacity:var(--square_light_max_opacity, 1);
        filter:blur(var(--square_light_blur_min, .6em));
    }
    74.999999999% {
        transform:rotate(0deg);
        top:var(--square_light_padding, .3em);
        left:calc(100% - var(--square_light_width, 20%) - var(--square_light_padding, .3em));
        opacity:var(--square_light_min_opacity, 0);
        filter:blur(var(--square_light_blur_max, 1em));
    }
    75% {
        transform:rotate(90deg);
        top:var(--square_light_padding, .3em);
        left:calc(100% - var(--square_light_padding, .3em));
        opacity:var(--square_light_min_opacity, 0);
        filter:blur(var(--square_light_blur_max, 1em));
    }
    87.5% {
        transform:rotate(90deg);
        top:calc((100% - var(--square_light_width, 20%)) / 2);
        left:calc(100% - var(--square_light_padding, .3em));
        opacity:var(--square_light_max_opacity, 1);
        filter:blur(var(--square_light_blur_min, .6em));
    }
    99.999999999% {
        transform:rotate(90deg);
        top:calc(100% - var(--square_light_width, 20%) - var(--square_light_padding, .3em));
        left:calc(100% - var(--square_light_padding, .3em));
        opacity:var(--square_light_min_opacity, 0);
        filter:blur(var(--square_light_blur_max, 1em));
    }
    100% {
        transform:rotate(0deg);
        top:calc(100% - var(--square_light_height, 20%) - var(--square_light_padding, .3em));
        left:calc(100% - var(--square_light_width, 20%) - var(--square_light_padding, .3em));
        opacity:var(--square_light_min_opacity, 0);
        filter:blur(var(--square_light_blur_max, 1em));
    }
}

@keyframes pulse {
    0% { transform: scale(0.99); }
    50% { transform: scale(1); }
    100% { transform: scale(0.99); }
}

/* #endregion */

/* #region All */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* #endregion */

/* #region Root */

html {
    --bpm : 120;
    --speed : calc(60 / var(--bpm));

    --layer_views   : 100;
    --layer_title   : 900;
    --layer_nav     : 1000;
    --layer_overlay : 1500;
    --height_title  : auto;
    --height_nav    : auto;

    --padding_small       : .15rem;
    --padding             : .3rem;
    --padding_big         : .6rem;
    --padding_giant       : .9rem;

    --margin_small        : 1rem;
    --margin              : 1.5rem;
    --margin_big          : 3rem;
    --margin_giant        : 6rem;

    --border_radius       : var(--padding);
    --border_radius_small : var(--padding_small);
    --border_radius_big   : var(--padding_big);

    --scrollbar_width : var(--padding);

    --view_margin : var(--padding_small);
    --height_max  : calc(100vh - var(--height_title) - var(--height_nav));
    --width_max   : calc(100vw - var(--view_margin) * 2 - var(--scrollbar_width));
    --cover_max   : min(var(--width_max), var(--height_max));

    position         : relative;
    min-height       : 100vh;
    font-size        : 13px;
    font-family      : Roboto;
    color            : var(--color_text);
    background-color : var(--color_back);
    background       : linear-gradient(
        var(--color_light_transparent_2),
        transparent,
        var(--color_dark_transparent_2)
    ), radial-gradient(
        var(--color_light_transparent_2),
        var(--color_dark_transparent_2)
    ), fixed var(--color_back);
}

html.Mode-light {
    background : linear-gradient(
        var(--color_dark_transparent_2),
        transparent,
        var(--color_light_transparent_2)
    ), radial-gradient(
        var(--color_dark_transparent_2),
        var(--color_light_transparent_2)
    ), fixed var(--color_back);
}

html, body {
    width      : 100vw;
    height     : 100vh;
    overflow-x : hidden;
    transition : background-color .3s ease-in-out, color .3s ease-in-out;
}

/* #endregion */

/* #region Body */

body {
    position         : relative;
    overflow-y       : auto;
    display          : flex;
    flex-direction   : column-reverse;
    background       : radial-gradient(var(--color_light_transparent_1) 60%, transparent) fixed,
        radial-gradient(transparent 60%, var(--color_dark_transparent_1)) fixed
    ;
}

.Mode-light  body {
    background : radial-gradient(var(--color_dark_transparent_1) 60%, transparent) fixed,
        radial-gradient(transparent 60%, var(--color_light_transparent_1)) fixed
    ;
}

body::before {
    position                 : fixed;
    inset                    :  0 0 0 0;
    width                    : 100vw;
    height                   : 100vh;
    content                  : '';
    pointer-events           : none;
    transform-origin         : center center;
    transform                : scale(1.2);
    background-attachment    : fixed;
    background-size          : 100% 100%;
    background-position      : center;
    background-repeat        : no-repeat;
    background-image         : var(--background_image);
    box-shadow               : inset 0  50vh 50vh var(--color_back_darkest_transparent_1),
                               inset 0 -50vh 50vh var(--color_complementary_lightest_transparent_1);
    filter                   : blur(120px);
    opacity                  : .9;
    --fade_out_start_opacity : .9;
    --fade_out_end_opacity   : .5;
    animation                : fadeOut calc(var(--speed,0.5) * 16s) ease-out alternate infinite;
}


.Mode-light  body::before {
    box-shadow : inset 0  50vh 50vh var(--color_complementary_lightest_transparent_1),
                 inset 0 -50vh 50vh var(--color_back_darkest_transparent_1);
}

/* #endregion */

/* #region Scrollbars */

::-webkit-scrollbar {
    width: var(--scrollbar_width);
    background-color: transparent
}

::-webkit-scrollbar-track {
    border-radius: 1rem;
    background-color: var(--color_dark_transparent_2);
}

::-webkit-scrollbar-thumb {
    border-radius: 1rem;
    background-color: var(--color_light);
}


.Mode-light::-webkit-scrollbar-track,
.Mode-light ::-webkit-scrollbar-track {
    background-color: var(--color_light_transparent_2);
}

.Mode-light::-webkit-scrollbar-thumb,
.Mode-light ::-webkit-scrollbar-thumb {
    background-color: var(--color_dark);
}

/* #endregion */

/* #region Rules */

a {
    color:currentColor;
}

.Text-left    { text-align:left; }
.Text-right   { text-align:right; }
.Text-center  { text-align:center; }
.Text-justify { text-align:justify; }

.Button {
    display        : inline-block;
    outline        : none;
    pointer-events : auto;
}

.Button-icon {
    display          : flex;
    justify-content  : center;
    align-items      : center;
    padding          : var(--padding) calc(var(--padding) * 2);
    font-size        : .8em;
    background-color : transparent;
    color            : currentColor;
    border           : none;
    transition       : .15s ease-in-out color, .3s ease-in-out opacity;
}

.Button-menu {
    font-size:.5em;
}

.Button-main {
    display : none;
}

.Button-active {
    opacity: 1;
    color : var(--color_complementary_lightest);
}

.Mode-light .Button-active {
    color : var(--color_complementary_darkest);
}

.Button-title {
    font-size: min(2rem, calc(var(--height_title) - var(--padding) * 4));
}

/* Specificity: 0.1.1 */

.Button-icon svg {
    width  : auto;
    height : 2em;
}

.Button-play svg, .Button-main svg {
    height : 4em;
}

.Button-icon svg, .Button-icon path {
    fill : currentColor;
}

.Title, .Subtitle {
    display          : flex;
    height           : var(--height_title);
    justify-content  : center;
    align-items      : center;
}
.Title {
    display          : none;
    position         : fixed;
    inset            : 0 0 auto 0;
    z-index          : var(--layer_title);
    pointer-events   : none;
    opacity          : 1;
    transition       : .15s opacity ease-in-out;
}

.Title-hidden {
    opacity : 0;
}

.Title svg, .Subtitle svg {
    height : 1em;
}

svg .umwLogoLeft {
    fill : var(--color_back);
    fill : var(--color_back_lighten);
    fill : var(--color_back_lightest);

    transition: fill .15s ease-in-out;
}

svg .umwLogoRight {
    fill : var(--color_light);

    transition: fill .15s ease-in-out;
}

.Mode-light svg .umwLogoLeft {
    fill : var(--color_back_darken);
}

.Mode-light svg .umwLogoRight {
    fill : var(--color_dark);
}

/* #endregion */

/* #region Media Queries */

@media (width >= 300px) {
    html {
        --view_margin : var(--padding);
    }

    @media (height >= 250px) {
        html {
            font-size: 14px;
        }
    }

    @media (height >= 400px) {
        html {
            --height_title     : 4rem;
            --height_nav       : 4rem;
            font-size          : 15px;
        }
    }
}

@media (width >= 480px) {
    html {
        --view_margin : var(--padding_big);
    }

    @media (height >= 400px) {
        html {
            --height_title : 5rem;
            --height_nav   : 5rem;
            font-size      : 16px;
        }
    }

    @media (height >= 640px) {
        html {
            font-size : 17px;
        }
    }

    @media (height >= 800px) {
        html {
            font-size : 18px;
        }
    }
}

@media (width >= 640px) {
    html {
        --view_margin : var(--padding_giant);
    }
}

@media (width >= 900px) {
    html {
        --view_margin : var(--margin_small);
    }
}

@media (width >= 1200px) {
    html {
        --view_margin : var(--margin);
    }

    @media (height >= 900px) {
        html { font-size : 20px; }
    }

    @media (height >= 1200px) {
        html { font-size : 21px; }
    }
}

@media (width >= 1440px) {
    @media (height >= 900px) {
        html { font-size : 21px; }
    }

    @media (height >= 1200px) {
        html { font-size : 22px; }
    }
}

@media (orientation: landscape) {
    html {
        --view_margin : 0rem;
    }
}

/* #endregion */