body {
    padding: 0;
    margin: 0;
    height: 100vh;
    width: auto;  
    background-image: linear-gradient(45deg, #ffffff 25%, #000000 25%, #000000 50%, #ffffff 50%, #ffffff 75%, #000000 75%, #000000 100%);
    background-size: 11vw 11vw;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.pepiano {
    background-image: url("/ipfs/Qmf8cDut9zCDpXUtVaNHbn87QKDTbsVUp8KkE4XcN2ZSrg");
    background-repeat: no-repeat;
    background-size: contain;
    width: 100vw;
    height: 100vw;
    display: grid;
    background-position: center;
    grid-template-rows: 16.5% 25.5% 33.5% 24.5%;
    justify-content: center;
}

.eyes {
    grid-row: 2;
    background-image: url("/ipfs/QmRM7T1YfmxRxy7EoiU37ztNujkBv6b3cJzzwNz7YtTzxS");
    background-repeat: no-repeat;
    background-size: contain;
    width: 125%;
    height: 102%;
    margin-left: -12.8vw;
    background-position: center;
}

.eyes:active {
    background-image: url("/ipfs/QmdybVWbqiy6gftmtyRt4BabJzuNfToDRExwmgVVWcgMeq");
}

.piano {
    grid-row: 3;
    display: flex;
    justify-content: center;
    margin-top: 4vw;
}

.sound_fx {
    grid-row: 4;
    display: flex;
    padding: 0 9.6vw;
    justify-content:center;
}

.key {
    height: calc(var(--width) * 5);
    width: var(--width);
}

.white {
    --width: 5vw;
    background-color: rgb(219, 250, 219);
    border: 0.15vw solid rgb(1, 59, 1);
}

.white.active, .white.touch {
    background-image: linear-gradient(360deg, #abf0ff, #eaccf8, #a4ffd5);
}

.black {
    --width: 3.6vw;
    background-color: rgb(0, 28, 0);
    margin-left: calc(var(--width) / -2);
    margin-right: calc(var(--width) / -2);
    z-index: 2;
}

.black.active, .black.touch {
    background-image: linear-gradient(180deg, #c5ffc1,#f7ffa2, #d3ff38);
    box-shadow: inset 0px 0px 0px 0.15vw rgb(0, 34, 3);
}

.red {
    width: 6.1vw;
    height: 6.1vw;
    background-image: url("/ipfs/QmRen91FfGjTSMAPeLQi96L3huR3pAi793bro9mMQ2iXQi");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin: 0.2vw 1.08vw;
}

.red.active {
    background-image: url("/ipfs/QmXiKoJBsc3XGePm3FnZNYSC8uE7h39crgrFZbQAct3rjm");
}

.red:touch {
    background-image: url("/ipfs/QmXiKoJBsc3XGePm3FnZNYSC8uE7h39crgrFZbQAct3rjm");
}

.white:nth-child(1) {
    height: calc(var(--width) *3.5);
    margin-top: calc(var(--width) *0.8);
    width: 6.2vw;
    border-radius: 100% 0% 0% 100% / 50% 0% 0% 50%;
}

.black:nth-child(2) {
    margin-top: 3.3vw;
    height: calc(var(--width) * 4);
    border-radius: 100% 0% 20% 20% / 12% 0% 4% 4% ;
}

.white:nth-child(3) {
    height: calc(var(--width) *4.1);
    margin-top: calc(var(--width) *0.55);
    border-radius: 100% 0% 25% 100% / 13% 0% 6% 12% ;
}

.black:nth-child(4) {
    margin-top: 2.1vw;
    height: calc(var(--width) * 4.4);
    border-radius: 100% 0% 20% 20% / 5% 0% 4% 4% ;
}

.white:nth-child(5) {
    height: calc(var(--width) *4.5);
    margin-top: calc(var(--width) *0.35);
    border-radius: 100% 0% 10% 92% / 6% 0% 3% 7% ;
}

.black:nth-child(6) {
    margin-top: 1.5vw;
    height: calc(var(--width) * 4.6);
    border-radius: 100% 0%  20% 20% / 3% 0% 4% 4% ;
}

.white:nth-child(7) {
    height: calc(var(--width) *4.8);
    margin-top: calc(var(--width) *0.22);
    border-radius: 100% 0% 20% 80% / 4% 0% 3% 5% ;
}

.white:nth-child(8) {
    height: calc(var(--width) *4.83);
    margin-top: calc(var(--width) *0.19);
    border-radius: 50% 0% 23% 25% / 1% 1% 5% 5% ;
}

.black:nth-child(9) {
    margin-top: 0.8vw;
    height: calc(var(--width) * 4.8);
    border-radius: 50% 0%  20% 20% / 1% 1% 4% 4% ;
}

.white:nth-child(10) {
    height: calc(var(--width) *4.9);
    margin-top: calc(var(--width) *0.16);
    border-radius: 50% 0% 23% 25% / 1% 1% 5% 5% ;
}


.black:nth-child(11) {
    margin-top: 0.8vw;
    height: calc(var(--width) * 4.8);
    border-radius: 0% 50%  20% 20% / 1% 1% 4% 4% ;
}


.white:nth-child(12) {
    height: calc(var(--width) *4.83);
    margin-top: calc(var(--width) *0.19);
    border-radius: 0% 50% 23% 25% / 1% 1% 5% 5% ;
}

.white:nth-child(13) {
    height: calc(var(--width) *4.8);
    margin-top: calc(var(--width) *0.22);
    border-radius: 0% 100% 80% 20% / 0% 4% 5% 3% ;
}

.black:nth-child(14) {
    margin-top: 1.5vw;
    height: calc(var(--width) * 4.6);
    border-radius: 0% 100%  20% 20% / 3% 3% 4% 4% ;
}

.white:nth-child(15) {
    height: calc(var(--width) *4.5);
    margin-top: calc(var(--width) *0.35);
    border-radius: 0% 100% 92% 8% / 0% 6% 6% 3% ;
}

.black:nth-child(16) {
    margin-top: 2vw;
    height: calc(var(--width) * 4.4);
    border-radius: 0% 100%  20% 20% / 5% 5% 4% 4% ;
}

.white:nth-child(17) {
    height: calc(var(--width) *4.1);
    margin-top: calc(var(--width) *0.55);
    border-radius: 0% 100% 100% 25% / 0% 13% 12% 6% 
}

.black:nth-child(18) {
    margin-top: 3.3vw;
    height: calc(var(--width) * 4);
    border-radius: 0% 100%  20% 20% / 12% 12% 4% 4% ;
}
.white:nth-child(19) {
    height: calc(var(--width) *3.5);
    margin-top: calc(var(--width) *0.8);
    width: 5.6vw;
    border-radius: 0% 100% 100% 0% / 50% 50% 50% 50% ;
}

.red:nth-child(2) {
    margin-right: 50.55vw;
    margin-top: 4.9vw
}

.red:nth-child(3) {
    margin-top: 4.9vw 
}