@font-face {
    font-family: 'Source Code Pro';
    font-weight: 200;
    font-style: normal;
    font-stretch: normal;
    src: url('fonts/source-code-pro-release/WOFF2/TTF/SourceCodePro-ExtraLight.ttf.woff2') format('woff2'),
        url('fonts/source-code-pro-release/WOFF/OTF/SourceCodePro-ExtraLight.otf.woff') format('woff'),
        url('fonts/source-code-pro-release/OTF/SourceCodePro-ExtraLight.otf') format('opentype'),
        url('fonts/source-code-pro-release/TTF/SourceCodePro-ExtraLight.ttf') format('truetype');
}

@font-face {
    font-family: 'Source Code Pro';
    font-weight: 200;
    font-style: italic;
    font-stretch: normal;
    src: url('fonts/source-code-pro-release/WOFF2/TTF/SourceCodePro-ExtraLightIt.ttf.woff2') format('woff2'),
        url('fonts/source-code-pro-release/WOFF/OTF/SourceCodePro-ExtraLightIt.otf.woff') format('woff'),
        url('fonts/source-code-pro-release/OTF/SourceCodePro-ExtraLightIt.otf') format('opentype'),
        url('fonts/source-code-pro-release/TTF/SourceCodePro-ExtraLightIt.ttf') format('truetype');
}

@font-face {
    font-family: 'Source Code Pro';
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    src: url('fonts/source-code-pro-release/WOFF2/TTF/SourceCodePro-Light.ttf.woff2') format('woff2'),
        url('fonts/source-code-pro-release/WOFF/OTF/SourceCodePro-Light.otf.woff') format('woff'),
        url('fonts/source-code-pro-release/OTF/SourceCodePro-Light.otf') format('opentype'),
        url('fonts/source-code-pro-release/TTF/SourceCodePro-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Source Code Pro';
    font-weight: 300;
    font-style: italic;
    font-stretch: normal;
    src: url('fonts/source-code-pro-release/WOFF2/TTF/SourceCodePro-LightIt.ttf.woff2') format('woff2'),
        url('fonts/source-code-pro-release/WOFF/OTF/SourceCodePro-LightIt.otf.woff') format('woff'),
        url('fonts/source-code-pro-release/OTF/SourceCodePro-LightIt.otf') format('opentype'),
        url('fonts/source-code-pro-release/TTF/SourceCodePro-LightIt.ttf') format('truetype');
}

@font-face {
    font-family: 'Source Code Pro';
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    src: url('fonts/source-code-pro-release/WOFF2/TTF/SourceCodePro-Regular.ttf.woff2') format('woff2'),
        url('fonts/source-code-pro-release/WOFF/OTF/SourceCodePro-Regular.otf.woff') format('woff'),
        url('fonts/source-code-pro-release/OTF/SourceCodePro-Regular.otf') format('opentype'),
        url('fonts/source-code-pro-release/TTF/SourceCodePro-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Source Code Pro';
    font-weight: 400;
    font-style: italic;
    font-stretch: normal;
    src: url('fonts/source-code-pro-release/WOFF2/TTF/SourceCodePro-It.ttf.woff2') format('woff2'),
        url('fonts/source-code-pro-release/WOFF/OTF/SourceCodePro-It.otf.woff') format('woff'),
        url('fonts/source-code-pro-release/OTF/SourceCodePro-It.otf') format('opentype'),
        url('fonts/source-code-pro-release/TTF/SourceCodePro-It.ttf') format('truetype');
}

@font-face {
    font-family: 'Source Code Pro';
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    src: url('fonts/source-code-pro-release/WOFF2/TTF/SourceCodePro-Medium.ttf.woff2') format('woff2'),
        url('fonts/source-code-pro-release/WOFF/OTF/SourceCodePro-Medium.otf.woff') format('woff'),
        url('fonts/source-code-pro-release/OTF/SourceCodePro-Medium.otf') format('opentype'),
        url('fonts/source-code-pro-release/TTF/SourceCodePro-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Source Code Pro';
    font-weight: 500;
    font-style: italic;
    font-stretch: normal;
    src: url('fonts/source-code-pro-release/WOFF2/TTF/SourceCodePro-MediumIt.ttf.woff2') format('woff2'),
        url('fonts/source-code-pro-release/WOFF/OTF/SourceCodePro-MediumIt.otf.woff') format('woff'),
        url('fonts/source-code-pro-release/OTF/SourceCodePro-MediumIt.otf') format('opentype'),
        url('fonts/source-code-pro-release/TTF/SourceCodePro-MediumIt.ttf') format('truetype');
}

@font-face {
    font-family: 'Source Code Pro';
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    src: url('fonts/source-code-pro-release/WOFF2/TTF/SourceCodePro-Semibold.ttf.woff2') format('woff2'),
        url('fonts/source-code-pro-release/WOFF/OTF/SourceCodePro-Semibold.otf.woff') format('woff'),
        url('fonts/source-code-pro-release/OTF/SourceCodePro-Semibold.otf') format('opentype'),
        url('fonts/source-code-pro-release/TTF/SourceCodePro-Semibold.ttf') format('truetype');
}

@font-face {
    font-family: 'Source Code Pro';
    font-weight: 600;
    font-style: italic;
    font-stretch: normal;
    src: url('fonts/source-code-pro-release/WOFF2/TTF/SourceCodePro-SemiboldIt.ttf.woff2') format('woff2'),
        url('fonts/source-code-pro-release/WOFF/OTF/SourceCodePro-SemiboldIt.otf.woff') format('woff'),
        url('fonts/source-code-pro-release/OTF/SourceCodePro-SemiboldIt.otf') format('opentype'),
        url('fonts/source-code-pro-release/TTF/SourceCodePro-SemiboldIt.ttf') format('truetype');
}

@font-face {
    font-family: 'Source Code Pro';
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    src: url('fonts/source-code-pro-release/WOFF2/TTF/SourceCodePro-Bold.ttf.woff2') format('woff2'),
        url('fonts/source-code-pro-release/WOFF/OTF/SourceCodePro-Bold.otf.woff') format('woff'),
        url('fonts/source-code-pro-release/OTF/SourceCodePro-Bold.otf') format('opentype'),
        url('fonts/source-code-pro-release/TTF/SourceCodePro-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Source Code Pro';
    font-weight: 700;
    font-style: italic;
    font-stretch: normal;
    src: url('fonts/source-code-pro-release/WOFF2/TTF/SourceCodePro-BoldIt.ttf.woff2') format('woff2'),
        url('fonts/source-code-pro-release/WOFF/OTF/SourceCodePro-BoldIt.otf.woff') format('woff'),
        url('fonts/source-code-pro-release/OTF/SourceCodePro-BoldIt.otf') format('opentype'),
        url('fonts/source-code-pro-release/TTF/SourceCodePro-BoldIt.ttf') format('truetype');
}

@font-face {
    font-family: 'Source Code Pro';
    font-weight: 900;
    font-style: normal;
    font-stretch: normal;
    src: url('fonts/source-code-pro-release/WOFF2/TTF/SourceCodePro-Black.ttf.woff2') format('woff2'),
        url('fonts/source-code-pro-release/WOFF/OTF/SourceCodePro-Black.otf.woff') format('woff'),
        url('fonts/source-code-pro-release/OTF/SourceCodePro-Black.otf') format('opentype'),
        url('fonts/source-code-pro-release/TTF/SourceCodePro-Black.ttf') format('truetype');
}

@font-face {
    font-family: 'Source Code Pro';
    font-weight: 900;
    font-style: italic;
    font-stretch: normal;
    src: url('fonts/source-code-pro-release/WOFF2/TTF/SourceCodePro-BlackIt.ttf.woff2') format('woff2'),
        url('fonts/source-code-pro-release/WOFF/OTF/SourceCodePro-BlackIt.otf.woff') format('woff'),
        url('fonts/source-code-pro-release/OTF/SourceCodePro-BlackIt.otf') format('opentype'),
        url('fonts/source-code-pro-release/TTF/SourceCodePro-BlackIt.ttf') format('truetype');
}

html,
body {
    margin: 0;
    height: 100%;
    /* overflow: auto; */
}

body {
    font-family: 'Source Code Pro';
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    /* background-color: #16161d; */
    background: #0f0f13;
    color: #eff3f5;
}
body,
body * {
    box-sizing: border-box;
}

h1 {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.6;
}

h2 {
    font-size: 21px;
    font-weight: 600;
    line-height: 1.5;
}


.body-content {
    overflow-x: hidden;
    position: relative;
    height: 100%;
    background: linear-gradient(-45deg, rgba(255,255,255,0.05), rgba(0,0,0,0.15));
}


.header {
    /* display: block; */
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    /* width: 100%; */
    /* height: 150px; */
    /* height: 80px; */
    height: 60px;

    /* background: #0f0f13; */
}

.header .header-container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    /* background: linear-gradient(-45deg, rgba(255,255,255,0.05), rgba(0,0,0,0.15)); */
}


.header .header-container .header-container-item {padding: 20px;}
.header .header-container .header-container-item.header-container-logo {}
.header .header-container .header-container-item.header-container-nav {}

.header-container-nav .nav-toggle {}
.header-container-nav .nav-content {
    display: none;
}






.main {

    /* background: #16161d; */
    /* background: #0f0f13; */
    height: 100%;
    width:100%;


    /* margin-top: 80px; */
    /* margin-top: 60px; */



    /* HEADER */
    /* padding-top: 60px; */

}

.main > .main-container {
    /* padding: 120px 20px 20px 20px; */
    height: 100%;
    /* background: #16161d; */ /* Very Dark*/
    background: #2D2D34;  /* Lighter Dark - Default*/
    /* background: #4F567B; */ /* Dimmed Light*/
    /*background: #B1B1DB; */ /* Very Light */

    border-top-left-radius: 20px;
    border-top-right-radius: 20px;

    /* border: 1px solid rgba(9, 9, 11, 0.1); */
    border: 1px solid rgba(236, 236, 249, 0.1);
}
body.very-dark-mode .main > .main-container {background: #16161d;}
body.lighter-dark-mode .main > .main-container {background: #2D2D34;}
body.dimmed-light-mode .main > .main-container {background: #4F567B;}
body.very-light-mode .main > .main-container {background: #B1B1DB;}

body.very-light-mode .display .display-backdrop {
    background: rgb(25, 25, 47);
}

.main > .main-container > .main-inner {
    position: relative;
    height: 100%;
    padding: 20px 20px 20px 20px;
    /* background: linear-gradient(-45deg, rgba(255,255,255,0.05), rgba(0,0,0,0.15)); */ /* Very Dark*/
    background: linear-gradient(-45deg, rgba(255,255,255,0.05), rgba(0,0,0,0.10)); /* Lighter*/
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.main .info-card {
    display: block;
    width: 100%;
    max-width:600px;
    margin: 40px auto;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 10px 10px 16px 0 rgba(0, 0, 0, 0.25), -6px -6px 14px 0 rgba(236, 236, 249, 0.15);
    background: linear-gradient(-45deg, rgba(255,255,255,0.05), rgba(0,0,0,0.15));
    border: 1px solid rgba(9, 9, 11, 0.1);
    /*box-shadow: 0 0 16px -10px #eff3f5;*/
    /*box-shadow:
    12px 12px 16px 0 rgba(0, 0, 0, 0.25),
    -8px -8px 12px 0 rgba(255, 255, 255, 0.3);*/
}

.info-card h1,
.info-card h2 {
    margin-top: 0;
}
.info-card p:last-child {
    margin-bottom: 4px;
}


.info-card a {
    color: #a2f4ef;
}


/* .page {display: flex;flex-flow: wrap;height: 5%;flex-direction: column;justify-content: center;} */
.page {display: flex;flex-flow: nowrap;height: 5%;flex-direction: row;justify-content: center;}
.page > .page-item {
    display: block;
    position: relative;
    width: 100%;
    /* max-width:600px; */
    /* max-width: calc(100% - 40px); */
    /* max-width: calc(33% - 40px); */
    max-width: calc(25% - 40px);
    margin: 0px 20px;
    padding: 0 20px;
    border-radius: 20px;
    /* background: linear-gradient(-45deg, rgba(255,255,255,0.05), rgba(0,0,0,0.15)); */
    /* border: 1px solid rgba(9, 9, 11, 0.1); */
    text-align: center;




  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */








    /* background: linear-gradient(-35deg, rgba(255,255,255,0.05), rgba(0,0,0,0.25)); */
    /* background: linear-gradient(-35deg, rgba(35,35,45,0.05), rgba(0,0,0,0.35)); */

    /* background: linear-gradient(-35deg, rgba(111, 219, 204, 0.15), rgba(0,0,0,0.35)); */
    /* background: linear-gradient(-35deg, rgba(111, 219, 133, 0.15), rgba(0,0,0,0.35)); */
    /* background: linear-gradient(-35deg, rgba(216, 111, 219, 0.15), rgba(0,0,0,0.35)); */



    /* box-shadow: 5px 5px 8px 0 rgba(0, 0, 0, 0.15), -3px -3px 14px 0 rgba(236, 236, 249, 0.05); */
    /* border: 1px solid rgba(9, 9, 11, 0.1); */
    vertical-align: middle;
    display: flex;
    justify-content: center;
    align-items: center;
}
div.page-item:nth-child(1) {
    /* justify-content: flex-start; */
    justify-content: flex-end;
}
div.page-item:nth-child(2) {
    /* justify-content: flex-end; */
    justify-content: flex-start;
}
div.page-item:nth-child(3) {
    justify-content: flex-end;
}
div.page-item:nth-child(4) {
    /* justify-content: center; */
    justify-content: flex-start;
}




.page .page-item-settings,
.page .page-item-button {
    display: flex;
    flex-direction: row;

    align-content: center;
    align-items: center;
    /* margin-left: 5px; */
    margin-left: 10px;

    padding: 0px;
}
.page .page-item-settings:first-child,
.page .page-item-button:first-child {margin-left: 0;}

.page .page-item-settings .page-item-settings-text,
.page .page-item-button .page-item-button-text {
    display: block;
    height: 25px;
    line-height: 22px;
}
.page .page-item-settings .page-item-settings-text {line-height: 22px;}

.page .page-item-settings .page-item-settings-key,
.page .page-item-button .page-item-button-key {
    background: rgba(9, 9, 11, 0.05);

    /* background: rgba(111, 219, 204, 0.05);
    background: rgba(111, 219, 133, 0.05);
    background: rgba(216, 111, 219, 0.05); */

    /* position: absolute; */
    display: block;
    height: 25px;
    width: 25px;
    text-align: center;
    font-size: 18px;
    border: 2px solid rgba(9, 9, 11, 0.15);

    /* border: 2px solid rgba(111, 219, 204, 0.55);
    border: 2px solid rgba(111, 219, 133, 0.55);
    border: 2px solid rgba(216, 111, 219, 0.55); */


    cursor: pointer;

    line-height: 20px;
    border-radius: 5px;
    font-weight: 500;
    top: 0;
    bottom: 0;
    /* margin: 0 10px; */
    margin: 0 3px 0 10px;
    left: auto;
    right: 25px;
    text-shadow: 1px 1px 4px rgba(9, 9, 11, 0.75), -1px -1px 2px rgba(236, 236, 249, 0.55);
    box-shadow: 6px 6px 14px -1px rgba(0, 0, 0, 0.35), -5px -3px 12px -1px rgba(236, 236, 249, 0.15);
}

.page #button-play.buttontriggered .page-item-button-key {
    background: rgba(111, 219, 204, 0.05);
    border: 2px solid rgba(111, 219, 204, 0.55);
}
.page #button-pause.buttontriggered .page-item-button-key {
    background: rgba(111, 219, 133, 0.05);
    border: 2px solid rgba(111, 219, 133, 0.55);
}
.page #button-reset.buttontriggered .page-item-button-key {
    background: rgba(216, 111, 219, 0.05);
    border: 2px solid rgba(216, 111, 219, 0.55);
}

.page > .page-item .page-item-key-key {
    background: rgba(9, 9, 11, 0.05);

    /* background: rgba(111, 219, 204, 0.05);
    background: rgba(111, 219, 133, 0.05);
    background: rgba(216, 111, 219, 0.05); */

    /* position: absolute; */
    display: block;
    height: 25px;
    width: 25px;
    text-align: center;
    font-size: 18px;
    border: 2px solid rgba(9, 9, 11, 0.15);

    /* border: 2px solid rgba(111, 219, 204, 0.55);
    border: 2px solid rgba(111, 219, 133, 0.55);
    border: 2px solid rgba(216, 111, 219, 0.55); */


    cursor: pointer;

    line-height: 20px;
    border-radius: 5px;
    font-weight: 500;
    top: 0;
    bottom: 0;
    margin: 0 10px;
    left: auto;
    right: 25px;
    text-shadow: 1px 1px 4px rgba(9, 9, 11, 0.75), -1px -1px 2px rgba(236, 236, 249, 0.55);
    box-shadow: 6px 6px 14px -1px rgba(0, 0, 0, 0.35), -5px -3px 12px -1px rgba(236, 236, 249, 0.15);
}

body.first-page .page > .page-item .page-item-key:nth-child(1) .page-item-key-key {
    background: rgba(111, 219, 204, 0.05);
    border: 2px solid rgba(111, 219, 204, 0.55);
}
/* body.second-page .page > .page-item .page-item-key:nth-child(2) .page-item-key-key { */
body.second-page .page > .page-item .page-item-key:nth-child(3) .page-item-key-key {
    background: rgba(111, 219, 133, 0.05);
    border: 2px solid rgba(111, 219, 133, 0.55);
}
/* body.third-page .page > .page-item .page-item-key:nth-child(3) .page-item-key-key { */
body.third-page .page > .page-item .page-item-key:nth-child(2) .page-item-key-key {
    background: rgba(216, 111, 219, 0.05);
    border: 2px solid rgba(216, 111, 219, 0.55);
}

.page > .page-item:nth-child(3)::before {
    content: "⊳";
    display: block;
    position: absolute;
    height: 17px;
    width: 17px;
    right: calc(-10% - 6px);
    bottom: calc(45% - 6px);
    line-height: 16px;
    font-size: 18px;
    color: rgba(236, 236, 249, 0.60);
}
.page > .page-item:nth-child(3)::after {
    content: "";
    display: block;
    position: absolute;
    height: 2px;
    width: 10%;
    right: -10%;
    bottom: 45%;
    border-radius: 6px;
    background: rgba(255,255,255,0.20);
    box-shadow: 0px 0px 12px 4px rgba(22, 22, 29, 0.25);
    border: 1px solid rgba(236, 236, 249, 0.30);
}
body.first-page .page > .page-item:nth-child(3)::before {color: #bdf0f0;}
body.first-page .page > .page-item:nth-child(3)::after {
    background: rgba(255,255,255,1.00);
    box-shadow: 0px 0px 12px 4px #4abebe;
    border: 1px solid #4df2f2;
}
body.second-page .page > .page-item:nth-child(3)::before {color: #d0eede;}
body.second-page .page > .page-item:nth-child(3)::after {
    background: rgba(255,255,255,1.00);
    box-shadow: 0px 0px 12px 4px #4ac080;
    border: 1px solid #3aea8a;
}
body.third-page .page > .page-item:nth-child(3)::before {color: #f4edf3;}
body.third-page .page > .page-item:nth-child(3)::after {
    background: rgba(255,255,255,1.00);
    box-shadow: 0px 0px 12px 4px #b84fcb;
    /* border: 1px solid #da54f2; */
    border: 1px solid #8b38f0;
}

.page > .page-item > .page-item-waveform {
    position: relative;
    height: 100%;
    width: 100%;
    max-width: 100%;
    max-width: 300px;

    border-radius: 6px;
overflow: hidden;
}
.page > .page-item .waveform-container {
    display: block;
}


.page > .page-item .waveform-container {
    display: block;
}
.page > .page-item .waveform-container.waveform-container-base {
    width: 100%;
    max-width:100%;
    height: 100%;
    max-height: 100%;

    /* background: blue; */
    filter:invert(1);
}
.page > .page-item .waveform-container.waveform-container-layers {
position: absolute;
    width: 100%;
    max-width:100%;
    height: 100%;
    max-height: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
width:calc(100% / 3);

/* top: -22px; */
top: 0px;

mix-blend-mode: hard-light;
overflow: hidden;

z-index: 2;

}
/* .page > .page-item .waveform-container.waveform-container-layers.waveform-container-j {
    background: rgba(111, 219, 204, 0.45);left:0;}
.page > .page-item .waveform-container.waveform-container-layers.waveform-container-m {
    background: rgba(216, 111, 219, 0.45);left:calc(100% / 3);}
.page > .page-item .waveform-container.waveform-container-layers.waveform-container-k {
    background: rgba(111, 219, 133, 0.45);left:calc(100% / 3 * 2);} */
.page > .page-item .waveform-container.waveform-container-layers.waveform-container-j {
    width:calc(100% / 10 * 3);
    left: 0;
    background: rgba(111, 219, 204, 0.00);
    box-shadow: 0px 0px 0px 1px rgba(111, 219, 204, 0.0), inset 0px 0px 11px 3px rgba(111, 219, 204, 0.00);
    /* left:0; */
}
.page > .page-item .waveform-container.waveform-container-layers.waveform-container-m {
    width:calc(100% / 10 * 1);
    left:calc(100% / 10 * 3);
    background: rgba(216, 111, 219, 0.00);
    box-shadow: 0px 0px 0px 1px rgba(216, 111, 219, 0.0), inset 0px 0px 11px 3px rgba(216, 111, 219, 0.00);
    /* left:calc(100% / 3); */
}
.page > .page-item .waveform-container.waveform-container-layers.waveform-container-k {
    width:calc(100% / 10 * 6);
    left:calc(100% / 10 * 4);
    background: rgba(111, 219, 133, 0.00);
    box-shadow: 0px 0px 0px 1px rgba(111, 219, 133, 0.0), inset 0px 0px 11px 3px rgba(111, 219, 133, 0.00);
    /* left:calc(100% / 3 * 2); */
}

body.first-page .page > .page-item .waveform-container.waveform-container-layers.waveform-container-j {
    background: rgba(111, 219, 204, 0.35);
    box-shadow: 0px 0px 0px 1px rgba(111, 219, 204, 0.5), inset 0px 0px 11px 3px rgba(111, 219, 204, 0.95);
}
body.third-page .page > .page-item .waveform-container.waveform-container-layers.waveform-container-m {
    background: rgba(216, 111, 219, 0.35);
    box-shadow: 0px 0px 0px 1px rgba(216, 111, 219, 0.5), inset 0px 0px 11px 3px rgba(216, 111, 219, 0.95);
}
body.second-page .page > .page-item .waveform-container.waveform-container-layers.waveform-container-k {
    background: rgba(111, 219, 133, 0.35);
    box-shadow: 0px 0px 0px 1px rgba(111, 219, 133, 0.5), inset 0px 0px 11px 3px rgba(111, 219, 133, 0.95);
}




.page > .page-item .waveform {
    display: block;
}
.page > .page-item .waveform.waveform-base {
    width: 100%;
    max-width:100%;
    height: 100%;
    max-height: 100%;
}
.page > .page-item .waveform.waveform-layers {
    position: absolute;
    /* width: 100%; */
    width: auto;
    /* max-width:100%; */
    /* max-width:300%; */
    max-width:300px;
    height: 100%;
    max-height: 100%;
    left: 0;
    top: 0;
    /* right: 0; */
    right: 0;
    /* right: auto; */
    bottom: 0;
    display: block;

    filter: invert(1) brightness(1) contrast(2);
}
/* .page > .page-item .waveform.waveform-layers.waveform-j {}
.page > .page-item .waveform.waveform-layers.waveform-m {left:-100%;right: 0;}
.page > .page-item .waveform.waveform-layers.waveform-k {left:-200%;right: auto;} */
.page > .page-item .waveform.waveform-layers.waveform-j {}
.page > .page-item .waveform.waveform-layers.waveform-m {left:-300%;right: 0;}
.page > .page-item .waveform.waveform-layers.waveform-k {left:calc(-100% / 3 * 2);right: auto;}


.display {display: flex;flex-flow: wrap;/*height: 25%;*/height: 30%;}

.display > .display-item {
    display: block;
    position: relative;
    width: 100%;
    /* max-width:600px; */
    max-width: calc(100% - 40px);
    margin: 20px 20px;
    /* margin: 40px auto; */
    padding: 20px;
    border-radius: 20px;
    box-shadow: 10px 10px 16px 0 rgba(0, 0, 0, 0.25), -6px -6px 14px 0 rgba(236, 236, 249, 0.15);
    /* box-shadow: 10px 10px 16px 0 rgba(0, 0, 0, 0.25), -4px -4px 12px 0 rgba(236, 236, 249, 0.15); */
    background: linear-gradient(-45deg, rgba(255,255,255,0.05), rgba(0,0,0,0.15));
    border: 1px solid rgba(9, 9, 11, 0.1);
    text-align: center;


  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */








    /* background: linear-gradient(-35deg, rgba(255,255,255,0.05), rgba(0,0,0,0.25)); */
    background: linear-gradient(-35deg, rgba(35,35,45,0.05), rgba(0,0,0,0.35));




    /* background: linear-gradient(-35deg, rgba(111, 219, 204, 0.15), rgba(0,0,0,0.35)); */
    /* background: linear-gradient(-35deg, rgba(111, 219, 133, 0.15), rgba(0,0,0,0.35)); */
    /* background: linear-gradient(-35deg, rgba(216, 111, 219, 0.15), rgba(0,0,0,0.35)); */



    box-shadow: 5px 5px 8px 0 rgba(0, 0, 0, 0.15), -3px -3px 14px 0 rgba(236, 236, 249, 0.05);
    border: 1px solid rgba(9, 9, 11, 0.1);
    vertical-align: middle;
    display: table;


    /* EXPERIMENTAL FLEX*/
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    transform: translateZ(0);
}
body.first-page .display > .display-item {
    /* background: linear-gradient(-35deg, rgba(111, 219, 204, 0.15), rgba(0,0,0,0.35)); */
    background: linear-gradient(-35deg, rgba(111, 219, 204, 0.05), rgba(0,0,0,0.35));
}
body.second-page .display > .display-item {
    /* background: linear-gradient(-35deg, rgba(111, 219, 133, 0.15), rgba(0,0,0,0.35)); */
    background: linear-gradient(-35deg, rgba(111, 219, 133, 0.05), rgba(0,0,0,0.35));
}
body.third-page .display > .display-item {
    /* background: linear-gradient(-35deg, rgba(216, 111, 219, 0.15), rgba(0,0,0,0.35)); */
    background: linear-gradient(-35deg, rgba(216, 111, 219, 0.05), rgba(0,0,0,0.35));
}

.display .display-backdrop {
    position: absolute;
    opacity: 0.3;
}

.display > .display-item .display-item-shadow {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* box-shadow: inset 10px 10px 6px 0 rgba(0, 0, 0, 0.00), inset -6px -6px 4px 0 rgba(236, 236, 249, 0.00); */
    box-shadow: inset 10px 10px 16px 0 rgba(0, 0, 0, 0.25), inset -4px -4px 10px 0 rgba(236, 236, 249, 0.15);
    border-radius: 20px;

    transition: box-shadow 0.2s ease-out;
}

.display > .display-item .display-text {
    font-weight: 700;
    font-size: 48px;
    justify-content: ;
    display: table-cell;
    vertical-align: middle;
    text-shadow: 1px 1px 4px rgba(9, 9, 11, 0.75), -1px -1px 2px rgba(236, 236, 249, 0.55);

    display: inline-block;

}




.display > .display-item .display-text {will-change: transform opacity;/*transform:translateX(0%) translateY(0%);*/}
.display > .display-item .display-text.display-hidden {display: none;}

.display > .display-item .display-text[class*="display-"] {}

.display > .display-item .display-text[class*="active-"] {
    display:block;

    border: 3px solid #fff;
    padding: 2px 20px;
    border-radius: 15px;
    box-shadow: 0px 0px 12px 4px #ba3ef2, inset 0px 0px 11px 2px #db3ef2;

    text-shadow: 1px 1px 4px #ba3ef2, -1px -1px 2px #db3ef2;

    font-weight: 300;

    animation-name: opacity;
    animation-duration: 0.4s;

    animation-timing-function: ease;
    animation-fill-mode: both;

    will-change: transform;
}



.display > .display-item .display-text.display-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    mix-blend-mode: color-dodge;
}
.display > .display-item .display-text.display-main > *:not(.main-title) {
    display: block;
    width: 100%;

    border: 3px solid #fff;
    padding: 2px 20px;
    border-radius: 15px;
    font-weight: 300;

    box-shadow: 0px 0px 12px 4px #681bed, inset 0px 0px 11px 2px #7122fa;
    text-shadow: 1px 1px 4px #681bed, -1px -1px 2px #7122fa;
}

.display > .display-item .display-text.display-main .main-artist {
    max-width: 40%;
    font-style: italic;

    /* EXPERIMENTAL */
    font-size: 78px;
    font-weight: 200;
    height: 70px;
    line-height: 49px;
    overflow: ;
    white-space: nowrap;
    letter-spacing: -10px;
    /* EXPERIMENTAL */

    /* box-shadow: 0px 0px 12px 4px #ed1b75, inset 0px 0px 11px 2px #ff2281;
    text-shadow: 1px 1px 4px #ed1b75, -1px -1px 2px #ff2281; */
    /* box-shadow: 0px 0px 12px 4px #f048ae, inset 0px 0px 11px 2px #fe53bb;
    text-shadow: 1px 1px 4px #f048ae, -1px -1px 2px #fe53bb; */
    /* box-shadow: 0px 0px 12px 4px #d72dc1, inset 0px 0px 11px 2px #de38c8;
    text-shadow: 1px 1px 4px #d72dc1, -1px -1px 2px #de38c8; */
    box-shadow: 0px 0px 12px 4px #e33aed, inset 0px 0px 11px 2px #f148fb;
    text-shadow: 1px 1px 4px #e33aed, -1px -1px 2px #f148fb;
}
.display > .display-item .display-text.display-main .main-by {
    max-width: 10%;

    width: 40px;
    padding: 0;
    height: 40px;
    overflow: hidden;
    border-radius: 30px;
    line-height: 33px;
    text-align: center;
    margin: auto;
}
.display > .display-item .display-main .main-title {
    display: flex;
    flex-wrap: wrap;
    max-width: 40%;
}

.display > .display-item .display-main .main-title .main-title-block {
    display: block;
    width: 100%;
    /* max-width: 50%; */
    max-width: calc(50% - 5px);
    margin: 5px;

    /* border: 3px solid #fff; */
    border: 2px solid #fff;
    padding: 2px 20px;
    border-radius: 15px;
    font-weight: 300;
    font-size: 30px;

    box-shadow: 0px 0px 12px 4px #681bed, inset 0px 0px 11px 2px #7122fa;
    text-shadow: 1px 1px 4px #681bed, -1px -1px 2px #7122fa;
}
.display > .display-item .display-main .main-title .main-title-block:nth-child(1) {
    margin-top: 0;
    margin-left: 0;

    border: 3px solid #fff;

    box-shadow: 0px 0px 12px 4px #05e9f0, inset 0px 0px 11px 2px #08f7fe;
    text-shadow: 1px 1px 4px #05e9f0, -1px -1px 2px #08f7fe;
}
.display > .display-item .display-main .main-title .main-title-block:nth-child(2) {
    margin-top: 0;
    margin-right: 0;

    letter-spacing: -3px;
    font-weight: 100;

    /* box-shadow: 0px 0px 12px 4px #06eec8, inset 0px 0px 11px 2px #09fbd3;
    text-shadow: 1px 1px 4px #06eec8, -1px -1px 2px #09fbd3; */
    box-shadow: 0px 0px 12px 4px #06eead, inset 0px 0px 11px 2px #09fba0;
    text-shadow: 1px 1px 4px #06eead, -1px -1px 2px #09fba0;
}
.display > .display-item .display-main .main-title .main-title-block:nth-child(3) {
    margin-bottom: 0;
    margin-left: 0;

    font-style: italic;
    /* letter-spacing: -2px; */
    letter-spacing: 3px;

    /* box-shadow: 0px 0px 12px 4px #f048ae, inset 0px 0px 11px 2px #fe53bb; */
    /* //text-shadow: 1px 1px 4px #f048ae, -1px -1px 2px #fe53bb; */
    /* text-shadow: 0px 1px 4px #f048ae, -2px -1px 2px #fe53bb; */

    box-shadow: 0px 0px 12px 4px #ed1b75, inset 0px 0px 11px 2px #ff2281;
    /* text-shadow: 1px 1px 4px #ed1b75, -1px -1px 2px #ff2281; */
    text-shadow: 0px 1px 4px #ed1b75, -2px -1px 2px #ff2281;
}
.display > .display-item .display-main .main-title .main-title-block:nth-child(4) {
    margin-bottom: 0;
    margin-right: 0;

    font-weight: 500;
    font-size: 25px;
    line-height: 34px;

    box-shadow: 0px 0px 12px 4px #edcd07, inset 0px 0px 11px 2px #f5d300;
    text-shadow: 1px 1px 4px #edcd07, -1px -1px 2px #f5d300;
}




/* INIT ANIMATIONS */
@keyframes opacity {
  from {opacity: 0.00;}
  to {opacity: 1.00;}
}

@keyframes quick-zoom {
  0% {transform: scale(0.75);}
  50% {transform: scale(1.25);}
  100% {transform: scale(1.25);}
}
@keyframes quick-zoom-revert {
  0% {transform: scale(1.00);}
  50% {transform: scale(0.75);}
  100% {transform: scale(0.75);}
}
@keyframes quick-zoomzoom-slow {
  0% {transform: scale(1.00);}
  50% {transform: scale(1.10);}
  100% {transform: scale(1.00);}
}
@keyframes quick-zoomzoom-revert-slow {
  0% {transform: scale(1.00);}
  50% {transform: scale(0.90);}
  100% {transform: scale(1.00);}
}

@keyframes quick-zoomzoom {
  0% {transform: scale(1.00);}
  25% {transform: scale(1.10);}
  50% {transform: scale(1.00);}
  100% {transform: scale(1.00);}
}
@keyframes quick-zoomzoom-revert {
  0% {transform: scale(1.00);}
  25% {transform: scale(0.90);}
  50% {transform: scale(1.00);}
  100% {transform: scale(1.00);}
}


@keyframes a-zoom {
  0% {transform: scale(1.00);}
  50% {transform: scale(1.20);}
  100% {transform: scale(1.20);}
}
@keyframes b-zoom {
  0% {transform: scale(1.20);}
  50% {transform: scale(1.40);}
  100% {transform: scale(1.40);}
}
@keyframes c-zoom {
  0% {transform: scale(1.40);}
  50% {transform: scale(1.60);}
  100% {transform: scale(1.60);}
}
@keyframes d-zoom {
  0% {transform: scale(1.60);}
  50% {transform: scale(1.80);}
  100% {transform: scale(1.80);}
}

@keyframes a-zoom-revert {
  0% {transform: scale(1.20);}
  50% {transform: scale(1.00);}
  100% {transform: scale(1.00);}
}
@keyframes b-zoom-revert {
  0% {transform: scale(1.40);}
  50% {transform: scale(1.20);}
  100% {transform: scale(1.20);}
}
@keyframes c-zoom-revert {
  0% {transform: scale(1.60);}
  50% {transform: scale(1.40);}
  100% {transform: scale(1.40);}
}
@keyframes d-zoom-revert {
  0% {transform: scale(1.80);}
  50% {transform: scale(1.60);}
  100% {transform: scale(1.60);}
}




@keyframes quick-right {
  0% {transform: translateX(0%);}
  50% {transform: translateX(25%);}
  100% {transform: translateX(25%);}
}
@keyframes quick-left {
  0% {transform: translateX(0%);}
  50% {transform: translateX(-25%);}
  100% {transform: translateX(-25%);}
}
@keyframes quick-rightleft {
  0% {transform: translateX(0%);}
  50% {transform: translateX(25%);}
  100% {transform: translateX(0%);}
}
@keyframes quick-leftright {
  0% {transform: translateX(0%);}
  50% {transform: translateX(-25%);}
  100% {transform: translateX(0%);}
}





@keyframes flyfrom-top {
  0% {transform: translateY(-200%);}
  50% {transform: translateY(0%);}
  100% {transform: translateY(0%);}
}

@keyframes flyfrom-bottom {
  0% {transform: translateY(200%);}
  50% {transform: translateY(0%);}
  100% {transform: translateY(0%);}
}

@keyframes flyfrom-left {
  0% {transform: translateX(-200%);opacity:0.00;}
  50% {transform: translateX(0%);opacity:1.00;}
  100% {transform: translateX(0%);}
}

@keyframes flyfrom-right {
  0% {transform: translateX(200%);opacity:0.00;}
  50% {transform: translateX(0%);opacity:1.00;}
  100% {transform: translateX(0%);}
}


@keyframes rotate-part-clock {
  0% {transform: rotate(0deg);}
  50% {transform: rotate(15deg);}
  100% {transform: rotate(15deg);}
}
@keyframes rotate-part-counterclock {
  0% {transform: rotate(0deg);}
  50% {transform: rotate(-15deg);}
  100% {transform: rotate(-15deg);}
}
@keyframes rotate-part-counterclock-alt {
  0% {transform: rotate(45deg);}
  50% {transform: rotate(0deg);}
  100% {transform: rotate(0deg);}
}

@keyframes rotate-full-clock {
  0% {transform: rotate(-45deg);}
  50% {transform: rotate(45deg);}
  100% {transform: translateX(45deg);}
}

@keyframes rotate-full-hour {
  0% {transform: rotate(-30deg);}
  10% {transform: rotate(-20deg);}
  20% {transform: rotate(-20deg);}
  30% {transform: rotate(-10deg);}
  40% {transform: rotate(-10deg);}

  50% {transform: rotate(0deg);}
  100% {transform: rotate(0deg);}
}


@keyframes skew-part-clock {
  0% {transform: skewX(-45deg);}
  50% {transform: skewX(0deg);}
  100% {transform: skewX(0deg);}
}
@keyframes skew-part-clock-alt {
  0% {transform: skewX(45deg);}
  50% {transform: skewX(0deg);}
  100% {transform: skewX(0deg);}
}

/* ANIMATIONS OF TEXT */
.display > .display-item .display-text[class*="active-workit"] {
    animation-name: quick-zoomzoom;
    animation-duration: 0.7s;
}
.display > .display-item .display-text[class*="active-makeit"] {
    animation-name: quick-zoomzoom-revert;
    animation-duration: 0.7s;
}
.display > .display-item .display-text[class*="active-doit"] {
    animation-name: quick-right;
    animation-duration: 0.7s;
}
.display > .display-item .display-text[class*="active-makesus"] {
    animation-name: quick-left;
    animation-duration: 0.7s;
}



.display > .display-item .display-text[class*="active-harder"] {
    animation-name: flyfrom-bottom;
    animation-duration: 0.7s;
}
.display > .display-item .display-text[class*="active-better"] {
    animation-name: flyfrom-top;
    animation-duration: 0.7s;
}
.display > .display-item .display-text[class*="active-faster"] {
    animation-name: flyfrom-left;
    animation-duration: 0.7s;
}
.display > .display-item .display-text[class*="active-stronger"] {
    animation-name: flyfrom-right;
    animation-duration: 0.7s;
}



.display > .display-item .display-text[class*="active-morethan"] {
    animation-name: a-zoom;
    /* animation-name: d-zoom-revert; */
    animation-name: rotate-part-counterclock;
    animation-duration: 0.7s;
}
.display > .display-item .display-text[class*="active-hour"] {
    animation-name: rotate-full-hour;
    /* animation-name: c-zoom-revert; */
    animation-duration: 0.7s;
}
.display > .display-item .display-text[class*="active-our"] {
    animation-name: c-zoom;
    /* animation-name: b-zoom-revert; */
    animation-name: flyfrom-top;
    animation-duration: 0.7s;
}
.display > .display-item .display-text[class*="active-never"] {
    animation-name: d-zoom;
    /* animation-name: a-zoom-revert; */
    animation-name: skew-part-clock;
    animation-duration: 0.7s;
}



.display > .display-item .display-text[class*="active-ever"] {
    animation-name: a-zoom-revert;
    /* animation-name: a-zoom; */
    animation-name: rotate-part-counterclock-alt;
    animation-name: flyfrom-bottom;
    animation-duration: 0.7s;
}
.display > .display-item .display-text[class*="active-after"] {
    animation-name: b-zoom-revert;
    /* animation-name: b-zoom; */
    animation-duration: 0.7s;
}
.display > .display-item .display-text[class*="active-workis"] {
    animation-name: c-zoom-revert;
    /* animation-name: c-zoom; */
    animation-name: rotate-part-clock;
    animation-duration: 0.7s;
}
.display > .display-item .display-text[class*="active-over"] {
    animation-name: d-zoom-revert;
    /* animation-name: d-zoom; */
    animation-name: skew-part-clock-alt;
    animation-duration: 0.7s;
}



/* DESIGN OF TEXT */
.display > .display-item .display-text[class*="active-workit"] {
    /* links dunkler , rechts heller und ORIG */
    /* box-shadow: 0px 0px 12px 4px #f19fee, inset 0px 0px 11px 2px #ffacfc;
    text-shadow: 1px 1px 4px #f19fee, -1px -1px 2px #ffacfc; */
    box-shadow: 0px 0px 12px 4px #ed9e07, inset 0px 0px 11px 2px #f5a100;
    text-shadow: 1px 1px 4px #ed9e07, -1px -1px 2px #f5a100;
}
.display > .display-item .display-text[class*="active-makeit"] {
    box-shadow: 0px 0px 12px 4px #e33aed, inset 0px 0px 11px 2px #f148fb;
    text-shadow: 1px 1px 4px #e33aed, -1px -1px 2px #f148fb;
}
.display > .display-item .display-text[class*="active-doit"] {
    box-shadow: 0px 0px 12px 4px #681bed, inset 0px 0px 11px 2px #7122fa;
    text-shadow: 1px 1px 4px #681bed, -1px -1px 2px #7122fa;
}
.display > .display-item .display-text[class*="active-makesus"] {
    box-shadow: 0px 0px 12px 4px #4e087a, inset 0px 0px 11px 2px #560a86;
    text-shadow: 1px 1px 4px #4e087a, -1px -1px 2px #560a86;
}



.display > .display-item .display-text[class*="active-harder"] {
    box-shadow: 0px 0px 12px 4px #05e9f0, inset 0px 0px 11px 2px #08f7fe;
    text-shadow: 1px 1px 4px #05e9f0, -1px -1px 2px #08f7fe;
}
.display > .display-item .display-text[class*="active-better"] {
    /* box-shadow: 0px 0px 12px 4px #06eec8, inset 0px 0px 11px 2px #09fbd3;
    text-shadow: 1px 1px 4px #06eec8, -1px -1px 2px #09fbd3; */
    box-shadow: 0px 0px 12px 4px #06eead, inset 0px 0px 11px 2px #09fba0;
    text-shadow: 1px 1px 4px #06eead, -1px -1px 2px #09fba0;
}
.display > .display-item .display-text[class*="active-faster"] {
    box-shadow: 0px 0px 12px 4px #f048ae, inset 0px 0px 11px 2px #fe53bb;
    text-shadow: 1px 1px 4px #f048ae, -1px -1px 2px #fe53bb;
}
.display > .display-item .display-text[class*="active-stronger"] {
    box-shadow: 0px 0px 12px 4px #edcd07, inset 0px 0px 11px 2px #f5d300;
    text-shadow: 1px 1px 4px #edcd07, -1px -1px 2px #f5d300;
}



.display > .display-item .display-text[class*="active-morethan"] {
    box-shadow: 0px 0px 12px 4px #74d4fc, inset 0px 0px 11px 2px #75d5fd;
    text-shadow: 1px 1px 4px #74d4fc, -1px -1px 2px #75d5fd;
}
.display > .display-item .display-text[class*="active-hour"] {
    box-shadow: 0px 0px 12px 4px #b66bfc, inset 0px 0px 11px 2px #b76cfd;
    text-shadow: 1px 1px 4px #b66bfc, -1px -1px 2px #b76cfd;
}
.display > .display-item .display-text[class*="active-our"] {
    box-shadow: 0px 0px 12px 4px #ed1b75, inset 0px 0px 11px 2px #ff2281;
    text-shadow: 1px 1px 4px #ed1b75, -1px -1px 2px #ff2281;
}
.display > .display-item .display-text[class*="active-never"] {
    box-shadow: 0px 0px 12px 4px #0622d4, inset 0px 0px 11px 2px #011fdd;
    text-shadow: 1px 1px 4px #0622d4, -1px -1px 2px #011fdd;
}



.display > .display-item .display-text[class*="active-ever"] {
    box-shadow: 0px 0px 12px 4px #f0c80b, inset 0px 0px 11px 2px #ffd300;
    text-shadow: 1px 1px 4px #f0c80b, -1px -1px 2px #ffd300;
}
.display > .display-item .display-text[class*="active-after"] {
    box-shadow: 0px 0px 12px 4px #d72dc1, inset 0px 0px 11px 2px #de38c8;
    text-shadow: 1px 1px 4px #d72dc1, -1px -1px 2px #de38c8;
}
.display > .display-item .display-text[class*="active-workis"] {
    box-shadow: 0px 0px 12px 4px #5b24bd, inset 0px 0px 11px 2px #652ec7;
    text-shadow: 1px 1px 4px #5b24bd, -1px -1px 2px #652ec7;
}
.display > .display-item .display-text[class*="active-over"] {
    /* box-shadow: 0px 0px 12px 4px #33135c, inset 0px 0px 11px 2px #3c135c;
    text-shadow: 1px 1px 4px #33135c, -1px -1px 2px #3c135c; */
    box-shadow: 0px 0px 12px 4px #dd0d47, inset 0px 0px 11px 2px #e81e6a;
    text-shadow: 1px 1px 4px #dd0d47, -1px -1px 2px #e81e6a;
}




.canvas {display: flex;flex-flow: wrap;/*height: 35%;*/height: 32.5%;}
.canvas > .canvas-item {
    display: block;
    position: relative;
    width: 100%;
    /* max-width:600px; */
    max-width: calc(25% - 40px);
    margin: 20px 20px;
    /* margin: 40px auto; */
    padding: 20px;
    border-radius: 20px;
    /* box-shadow: 10px 10px 16px 0 rgba(0, 0, 0, 0.25), -6px -6px 14px 0 rgba(236, 236, 249, 0.15); */
    box-shadow: 10px 10px 16px 0 rgba(0, 0, 0, 0.25), -4px -4px 12px 0 rgba(236, 236, 249, 0.15);
    background: linear-gradient(-45deg, rgba(255,255,255,0.05), rgba(0,0,0,0.15));
    border: 1px solid rgba(9, 9, 11, 0.1);
    text-align: center;

    cursor: pointer;


  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */


    transition: box-shadow 0.2s ease-out;
}
.canvas > .canvas-item:hover {
    background: linear-gradient(-45deg, rgba(255,255,255,0.05), rgba(73, 82, 108,0.1));
    box-shadow: 10px 10px 16px 0 rgba(0, 0, 0, 0.25), -6px -6px 14px 0 rgba(236, 236, 249, 0.15);
    box-shadow: 10px 10px 16px 0 rgba(0, 0, 0, 0.25), -4px -4px 12px 0 rgba(236, 236, 249, 0.15);
    /* box-shadow: 5px 5px 8px 0 rgba(0, 0, 0, 0.15), -3px -3px 14px 0 rgba(236, 236, 249, 0.05); */

    border: 1px solid rgba(9, 9, 11, 0.2);
}
.canvas > .canvas-item.triggered,
.canvas > .canvas-item:active,
.canvas > .canvas-item:focus {
    /* background-color: #49526c; */
    /* background: linear-gradient(-45deg, rgba(255,255,255,0.05), rgba(0,0,0,0.15)); */
    background: linear-gradient(-35deg, rgba(255,255,255,0.05), rgba(0,0,0,0.25));
    box-shadow: 5px 5px 8px 0 rgba(0, 0, 0, 0.15), -3px -3px 14px 0 rgba(236, 236, 249, 0.05);
    border: 1px solid rgba(9, 9, 11, 0.1);
}






.canvas > .canvas-item .canvas-item-shadow {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    height: 100%;
    width: 100%;
    box-shadow: inset 10px 10px 6px 0 rgba(0, 0, 0, 0.00), inset -6px -6px 4px 0 rgba(236, 236, 249, 0.00);
    border-radius: 20px;

    transition: box-shadow 0.2s ease-out;
}
.canvas > .canvas-item:hover .canvas-item-shadow {
    /* box-shadow: inset 10px 10px 16px 0 rgba(0, 0, 0, 0.25), inset -4px -4px 10px 0 rgba(236, 236, 249, 0.15); */
    box-shadow: inset 10px 10px 6px 0 rgba(0, 0, 0, 0.00), inset -6px -6px 4px 0 rgba(236, 236, 249, 0.00);
}
.canvas > .canvas-item.triggered .canvas-item-shadow,
.canvas > .canvas-item:active .canvas-item-shadow,
.canvas > .canvas-item:focus .canvas-item-shadow {
    /* box-shadow: inset 10px 10px 16px 0 rgba(0, 0, 0, 0.25), inset -4px -4px 10px 0 rgba(236, 236, 249, 0.15); */
    box-shadow: inset 10px 10px 16px 0 rgba(0, 0, 0, 0.25), inset -4px -3px 10px 0 rgba(236, 236, 249, 0.15);
}


.canvas > .canvas-item span {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: block;

    margin: auto;

    /* height: 20px; */
    height: 24px;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 600;

    text-shadow: 1px 1px 4px rgba(9, 9, 11, 0.75), -1px -1px 2px rgba(236, 236, 249, 0.55);

    transform: scale(1.00);

    transition: transform 0.2s ease-out;
}
.canvas > .canvas-item:hover span {
    transform: scale(1.00);
}
.canvas > .canvas-item.triggered span,
.canvas > .canvas-item:active span,
.canvas > .canvas-item:focus span {
    transform: scale(0.97);
}


.canvas > .canvas-item .canvas-item-type {
    /* background: rgba(111, 219, 204, 0.75); */

    /* background: rgba(111, 219, 204, 0.75); */
    /* background: rgba(111, 219, 133, 0.75); */
    /* background: rgba(216, 111, 219, 0.75); */

    position: absolute;
    display: block;
    height: 20px;
    width: 20px;
    text-align: center;
    font-size: 18px;
    border: 2px solid rgba(9, 9, 11, 0.15);
    line-height: 20px;
    border-radius: 25px;
    font-weight: 500;
    top: 3px;
    bottom: 0;
    margin: auto;
    left: 25px;
    right: auto;
    text-shadow: 1px 1px 4px rgba(9, 9, 11, 0.75), -1px -1px 2px rgba(236, 236, 249, 0.55);
    box-shadow: 6px 6px 14px -1px rgba(0, 0, 0, 0.35), -5px -3px 12px -1px rgba(236, 236, 249, 0.15);


    transform: scale(1.00);

    transition: transform 0.2s ease-out;
}
body.first-page .canvas > .canvas-item .canvas-item-type {
    background: rgba(111, 219, 204, 0.75);
}
body.second-page .canvas > .canvas-item .canvas-item-type {
    background: rgba(111, 219, 133, 0.75);
}
body.third-page .canvas > .canvas-item .canvas-item-type {
    background: rgba(216, 111, 219, 0.75);
}


body.third-page .canvas:not(:last-child) > .canvas-item {
    cursor: not-allowed;
    /* opacity: 0.75;
    filter: blur(2px); */
}
body.third-page .canvas:not(:last-child) > .canvas-item .canvas-item-type {
    background: rgba(9, 9, 11, 0.15);
}


.canvas > .canvas-item:hover .canvas-item-type {
    transform: scale(1.00);
}
.canvas > .canvas-item.triggered .canvas-item-type,
.canvas > .canvas-item:active .canvas-item-type,
.canvas > .canvas-item:focus .canvas-item-type {
    transform: scale(0.94);
}


.canvas > .canvas-item .canvas-item-key {
    background: rgba(9, 9, 11, 0.05);
    position: absolute;
    display: block;
    height: 25px;
    width: 25px;
    text-align: center;
    font-size: 18px;
    border: 2px solid rgba(9, 9, 11, 0.15);
    line-height: 20px;
    border-radius: 5px;
    font-weight: 500;
    top: 0;
    bottom: 0;
    margin: auto;
    left: auto;
    right: 25px;
    text-shadow: 1px 1px 4px rgba(9, 9, 11, 0.75), -1px -1px 2px rgba(236, 236, 249, 0.55);
    box-shadow: 6px 6px 14px -1px rgba(0, 0, 0, 0.35), -5px -3px 12px -1px rgba(236, 236, 249, 0.15);

    transform: scale(1.00);

    transition: transform 0.2s ease-out;
}
.canvas > .canvas-item:hover .canvas-item-key {
    transform: scale(1.00);
}
.canvas > .canvas-item.triggered .canvas-item-key,
.canvas > .canvas-item:active .canvas-item-key,
.canvas > .canvas-item:focus .canvas-item-key {
    transform: scale(0.94);
}



@media(max-width:1119px) {
    .canvas > .canvas-item .canvas-item-type {
        height: 50%;
        width: 7px;
        left: 10px;
    }
    .canvas > .canvas-item .canvas-item-key {
        background: rgba(39, 39, 51, 0.90);
        right: -10px;
        top: -10px;
        bottom: auto;
    }
}

@media(max-width:859px) {

    .canvas > .canvas-item span {
        height: 30px;
        font-size: 13px;
        width: 50px;
    }

}


@media(max-width:690px) {
    .canvas > .canvas-item {
        max-width: calc(25% - 20px);
        margin: 10px 10px;
        padding: 10px;
    }
    .display > .display-item {
        max-width: calc(100% - 20px);
        margin: 20px 10px;
    }
}






.footer {
    display: none;
    position: absolute;
    top: 0;
    right:0;
    bottom: 0;
    left: 0;
    height: 100%;
    max-height: 100vh;
    width: 100%;
    max-width: 100vw;
    box-shadow: inset 10px 10px 16px 0 rgba(82, 115, 166, 0.25), inset -4px -4px 12px 0 rgba(236, 236, 249, 0.15);
    background: linear-gradient(-45deg, rgba(82, 215, 166, 0.25), rgba(234,56,201,0.15));
    border: 2px solid #2D2D34;
    overflow: hidden;
    border-top-left-radius: 17px;
    border-top-right-radius: 17px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;

    align-content: center;
    align-items: center;
    justify-content: center;
}
html.footer-open .footer {
    display: flex !important;
}
html.footer-open .main {
    /* filter: blur(2px); */
    filter: blur(3px);
}



.footer > .footer-container {
    padding: 40px;
    flex: 1;
    height: 100%;
}
.footer > .footer-container > .footer-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #2D2D34;
    /* padding: 20px; */
    padding: 30px;
    border-radius: 17px;
    max-width: 960px;
    margin: auto;

    box-shadow: 10px 10px 16px 0 rgba(0, 0, 0, 0.05), -4px -4px 12px 0 rgba(236, 236, 249, 0.10);
    border: 1px solid rgba(9, 9, 11, 0.1);
}

body.very-dark-mode .footer > .footer-container > .footer-inner {background: #16161d;}
body.lighter-dark-mode .footer > .footer-container > .footer-inner {background: #2D2D34;} /* DEAFULT */
body.dimmed-light-mode .footer > .footer-container > .footer-inner {background: #4F567B;}
body.very-light-mode .footer > .footer-container > .footer-inner {background: #B1B1DB;}

.footer > .footer-container > .footer-inner > * {
    box-shadow: 10px 10px 16px 0 rgba(0, 0, 0, 0.25), -4px -4px 12px 0 rgba(236, 236, 249, 0.15);
    background: linear-gradient(-45deg, rgba(255,255,255,0.05), rgba(0,0,0,0.15));


    border-radius: 17px;
    margin-bottom: 20px;
    overflow: hidden;
    padding: 20px;
}
.footer > .footer-container > .footer-inner > .footer-top {
    /* background: rgba(230, 60, 60, 0.4); */
    height: calc(20% - 20px);

}

.footer .footer-section-title {
    display:block;
    /* background: red; */
    text-align: center;
    height: 24px;
    font-size: 20px;
    line-height: 1;

    text-shadow: 1px 1px 4px rgba(9, 9, 11, 0.75), -1px -1px 2px rgba(236, 236, 249, 0.55);
}
.footer .footer-section-content {}

.footer .footer-section-switcher {
    display: flex;
    flex: 1 1;
    flex-direction: row;
    height: calc(100% - 30px);
    padding: 20px 0 0 0;
}
.footer .footer-section-switcher .mode-switcher {
    display: block;
    width: 100%;
    max-width: 25%;
    text-align: center;
    margin-right:20px;

    border: 2px solid rgba(236, 236, 249, 0.55);

    height: 100%;
    border-radius: 17px;
    font-size: 16px;
    line-height: 1.5;
    padding: 10px;

    cursor: pointer;
}
.footer .footer-section-switcher #very-dark-switcher {background: #16161d;}
.footer .footer-section-switcher #lighter-dark-switcher {background: #2D2D34;}
.footer .footer-section-switcher #dimmed-light-switcher {background: #4F567B;}
.footer .footer-section-switcher #very-light-switcher {background: #B1B1DB;margin-right: 0px;}

body:not(.very-dark-mode):not(.lighter-dark-mode):not(.dimmed-light-mode):not(.very-light-mode) .footer .footer-section-switcher #lighter-dark-switcher {
    border: 2px solid #fff;
    box-shadow: 0px 0px 8px 2px #edcd07, inset 0px 0px 5px 2px #f5d300;
    text-shadow: 1px 1px 4px #edcd07, -1px -1px 2px #f5d300; /* DEAFULT */
}

body.very-dark-mode #very-dark-switcher {
    border: 2px solid #fff;
    box-shadow: 0px 0px 8px 2px #06eead, inset 0px 0px 5px 2px #09fba0;
    text-shadow: 1px 1px 4px #06eead, -1px -1px 2px #09fba0;}
body.lighter-dark-mode #lighter-dark-switcher {
    border: 2px solid #fff;
    box-shadow: 0px 0px 8px 2px #edcd07, inset 0px 0px 5px 2px #f5d300;
    text-shadow: 1px 1px 4px #edcd07, -1px -1px 2px #f5d300;} /* DEAFULT */
body.dimmed-light-mode #dimmed-light-switcher {
    border: 2px solid #fff;
    box-shadow: 0px 0px 8px 2px #05e9f0, inset 0px 0px 5px 2px #08f7fe;
    text-shadow: 1px 1px 4px #05e9f0, -1px -1px 2px #08f7fe;}
body.very-light-mode #very-light-switcher {
    border: 2px solid #fff;
    box-shadow: 0px 0px 8px 2px #ed1b75, inset 0px 0px 5px 2px #ff2281;
    text-shadow: 0px 1px 4px #ed1b75, -2px -1px 2px #ff2281;}



.footer > .footer-container > .footer-inner > .footer-middle {
    /* background: rgba(77, 244, 9, 0.4); */
    height: calc(68% - 20px);
}

.footer > .footer-container > .footer-inner > .footer-middle .tutorial-list {
    padding-top: 20px;text-shadow: 1px 1px 4px rgba(9, 9, 11, 0.75), -1px -1px 2px rgba(236, 236, 249, 0.55);}
.footer > .footer-container > .footer-inner > .footer-middle .tutorial-list > li {
    min-height: 32px;
    line-height: 1.5;
    text-shadow: 1px 1px 4px rgba(9, 9, 11, 0.75), -1px -1px 2px rgba(236, 236, 249, 0.55);
}
.footer > .footer-container > .footer-inner > .footer-middle .tutorial-list > li .tutorial-text {
    background: rgba(9, 9, 11, 0.05);
    display: inline-block;
    height: 25px;
    width: 25px;
    text-align: center;
    font-size: 18px;
    border: 2px solid rgba(9, 9, 11, 0.15);
    line-height: 20px;
    border-radius: 5px;
    font-weight: 500;
    margin: 2px 3px 3px 3px;
    text-shadow: 1px 1px 4px rgba(9, 9, 11, 0.75), -1px -1px 2px rgba(236, 236, 249, 0.55);
    box-shadow: 6px 6px 14px -1px rgba(0, 0, 0, 0.35), -5px -3px 12px -1px rgba(236, 236, 249, 0.15);
}

.footer > .footer-container > .footer-inner > .footer-bottom {
    /* background: rgba(187, 172, 33, 0.4); */
    height: 12%;

    margin-bottom: 0;

    padding-top: 15px;
    padding-bottom: 10px;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255,255,255,0.75);
}

.footer > .footer-container > .footer-inner > .footer-bottom .footer-section-content {}
.footer > .footer-container > .footer-inner > .footer-bottom .footer-section-content span {}
.footer > .footer-container > .footer-inner > .footer-bottom .footer-section-content b {font-weight: 500;color: #ffffff;}


@media(min-height:989px){
    .footer > .footer-container > .footer-inner > .footer-middle .tutorial-list > li {
        margin-top: 8px;
    }
}
@media(min-height:941px){
    .footer > .footer-container > .footer-inner > .footer-top {
        height: 150px;
    }
    .footer > .footer-container > .footer-inner > .footer-middle {
        height: calc(100% - 240px);
    }
    .footer > .footer-container > .footer-inner > .footer-bottom {
        height: 90px;
    }
}
@media(max-height:940px){
    .page > .page-item:nth-child(3)::before {bottom: calc(45% - 5.5px);}
    .footer .footer-section-title {
        height: 16px;
        font-size: 16px;
    }
    .footer > .footer-container > .footer-inner > .footer-middle .tutorial-list {
        padding-top: 15px;
        margin-top: 0;
        font-size: 12px;
    }

    .footer > .footer-container > .footer-inner > .footer-middle .tutorial-list > li .tutorial-text {
        height: 20px;
        width: 20px;
        font-size: 14px;
        line-height: 15px;
    }

    .footer > .footer-container > .footer-inner > .footer-top {
        /* height: calc(30% - 20px); */
        height: 150px;
    }
    .footer > .footer-container > .footer-inner > .footer-middle {
        /* height: calc(56% - 20px); */
        height: calc(100% - 240px);
    }
    .footer > .footer-container > .footer-inner > .footer-bottom {
        /* height: 14%; */
        height: 90px;
        padding-top: 13px;
    }
}