:root {
    --animation-color: rgb(144, 249, 227);
    --background-color: rgb(224, 223, 209);
    --background-color-hover1: rgb(144, 249, 227);
    --background-color-hover2: rgba(144, 249, 227, 0.8);
    --box-shadow-color1: rgb(212, 212, 196);
    --box-shadow-color2: rgb(223, 223, 198);
    --note-color: rgb(88, 153, 144);
    
}

.key {
    border: 0px;
    min-width: 5vw;
    min-height: 5vw;
    border-radius: 999px;
    background-color: var(--background-color);
    box-shadow: 0 0 0.1vw 0.4vw var(--box-shadow-color1),
    0 0 0.1vw 0.7vw var(--box-shadow-color2);
}

.text {
    font-size: 1.2vw;
    margin-top: 3.2vw;
    display: inline-block;
    color: rgb(150, 148, 120);
    font-family: 'genshin impact', Fallback, sans-serif;
}

.triangle {
    padding: 1vw 2vw;
    position: relative;
}

.triangle::before,
.triangle::after,
.triangleTop,
.triangleBottom {
    width: 0;
    height: 0;
    content: "";
    display: inherit;
    position: absolute;
    border-style: solid;
}

.triangle::before {
    top: calc(50% - 0.5vw);
    right: calc(100% - 2.2vw);
    border-width: 0.5vw 0.5vw 0.5vw 0;
    border-color: transparent var(--background-color) transparent transparent;
}

.triangle::after {
    top: calc(50% - 0.5vw);
    left: calc(100% - 2.2vw);
    border-width: 0.5vw 0 0.5vw 0.5vw;
    border-color: transparent transparent transparent var(--background-color);
}

.triangleTop {
    left: calc(50% - 0.5vw);
    bottom: calc(100% - 2.2vw);
    border-width: 0 0.5vw 0.5vw 0.5vw;
    border-color: transparent transparent var(--background-color) transparent;
}

.triangleBottom {
    left: calc(50% - 0.5vw);
    top: calc(100% - 2.2vw);
    border-width: 0.5vw 0.5vw 0 0.5vw;
    border-color: var(--background-color) transparent transparent transparent;
}

.triangle:active .key,
.key-press .key {
    background-color: var(--background-color-hover1);
    box-shadow: 0 0 0.1vw 0.5vw var(--background-color-hover2);
}

.triangle:active .text, .key-press .text,
.triangle:active .note1, .key-press .note1,
.triangle:active .note2, .key-press .note2,
.triangle:active .note3, .key-press .note3,
.triangle:active .note4, .key-press .note4,
.triangle:active .note5, .key-press .note5,
.triangle:active .note6, .key-press .note6,
.triangle:active .note7, .key-press .note7,
.triangle:active .note8, .key-press .note8,
.triangle:active .note9, .key-press .note9 {
    color:rgba(255, 255, 255, 0.8);
}

.triangle:active::after,
.key-press::after {
    border-color: transparent transparent transparent var(--background-color-hover1);
}

.triangle:active::before,
.key-press::before {
    border-color: transparent var(--background-color-hover1) transparent transparent;
}

.triangle:active .triangleTop,
.key-press .triangleTop {
    border-color: transparent transparent var(--background-color-hover1) transparent;
}

.triangle:active .triangleBottom,
.key-press .triangleBottom {
    border-color: var(--background-color-hover1) transparent transparent transparent;
}

.IDspread {
    top: 1.75vw;
    left: 1.78vw;
    min-width: 5vw;
    min-height: 5vw;
    position: absolute;
    border-radius: 100%;
    pointer-events: none;
}

#spread1 {
    animation: animation1 0.5s ease-out 0s 1 normal;
}

#spread2 {
    animation: animation2 0.5s ease-out 0s 1 normal;
}

#keyboard {
    bottom: 5vh;
    position: fixed;
    width: min-content;
}

.location {
    display: flex;
    justify-content: center;
}

.clef,
.clef0 {
    font-size: 5vw;
    min-width: 5vw;
    min-height: 5vw;
    text-align: center;
    display: inline-block;
    color: rgba(255, 255, 255, 0.7);
}

.clef {
    margin: 1vw;
}

.clef0 {
    margin: 0.2vw 1vw 1.8vw 1vw;
}

.line1-1, .line1-2, .line1-3, .line1-4, .line1-5,
.line2-1, .line2-2, .line2-3, .line2-4, .line2-5,
.line3-1, .line3-2, .line3-3, .line3-4, .line3-5 {
    left: 7vw;
    z-index: -1;
    width: 64.2vw;
    height: 0.05vw;
    position: absolute;
    display: inline-block;
    border-color: rgba(0, 0, 0, 0);
    background-color: rgba(255, 255, 255, 0.1);
}

.line1-1 {bottom: calc(100% - 3.2vw);}
.line1-2 {bottom: calc(100% - 4.0vw);}
.line1-3 {bottom: calc(100% - 4.8vw);}
.line1-4 {bottom: calc(100% - 5.6vw);}
.line1-5 {bottom: calc(100% - 6.4vw);}

.line2-1 {bottom: calc(66.6% - 3.2vw);}
.line2-2 {bottom: calc(66.6% - 4.0vw);}
.line2-3 {bottom: calc(66.6% - 4.8vw);}
.line2-4 {bottom: calc(66.6% - 5.6vw);}
.line2-5 {bottom: calc(66.6% - 6.4vw);}

.line3-1 {bottom: calc(33.3% - 3.2vw);}
.line3-2 {bottom: calc(33.3% - 4.0vw);}
.line3-3 {bottom: calc(33.3% - 4.8vw);}
.line3-4 {bottom: calc(33.3% - 5.6vw);}
.line3-5 {bottom: calc(33.3% - 6.4vw);}

.note1, .note2, .note3, .note4,
.note5, .note6, .note7, .note8, .note9 {
    position: absolute;
    pointer-events: none;
    display: inline-block;
    transform: scale(1, 1.2);
    text-shadow: 0 0 0.1vw, 0 0 0.1vw;
}
.note1, .note2, .note3,
.note5, .note6, .note7, .note8 {
    left: 3.1vw;
    font-size: 3.4vw;
    font-weight: 900;
}

.note4, .note9 {
    left: 3.2vw;
    font-size: 6vw;
}

.note1 {top: 0.85vw;}
.note2 {top: 1.65vw;}
.note3 {top: 2.45vw;}
.note4 {top: -2.05vw;}
.note5 {top: 0.6vw;}
.note6 {top: 1.4vw;}
.note7 {top: 2.2vw;}
.note8 {top: 2.75vw;}
.note9 {top: -2.3vw;}

#loadDiv {
    width: 100vw;
    height: 100vh;
    background-color: var(--dialog-background-color);
    color: var(--background-text1);
    font-family: 'genshin impact', Fallback, sans-serif;
    font-size: 3vw;
    text-align: center;
    line-height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
}

#volume {
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 8px;
}