body {
    margin: 0;
    padding: 0;
    height: 100vh;
}

.container {
    background-image: url(TE-01.gif);
    background-repeat: repeat;
    background-size: absolute;
    background-position: center;
    align-items: center;
    justify-content: center;
    display: flex;
    padding: 0;
    width: 100vw;
    height: 100%;
}

.key-1{
    border-radius: 10px;
    padding: 5px;
    cursor: pointer;
    background-color: transparent;
}
.C4-key{
    position: relative;
    top: 7px;
    left: 67px;
}

.Db4-key{
    position: relative;
    top: 7px;
    left: 97px;

}

.D4-key{
    position: relative;
    top: 7px;
    left: 126px;

}

.Eb4-key{
    position: relative;
    top: 56px;
    left: 25px;

}

.E4-key{
    position: relative;
    top: 56px;
    left: 54px;

}
.F4-key{
    position: relative;
    top: 56px;
    left: 84px;

}

.Gb4-key{
    position: relative;
    top: 56px;
    left: 113px;

}

.G4-key{
    position: relative;
    top: 56px;
    left: 142px;

}

.Ab4-key{
    position: relative;
    top: 105px;
    left: -45px;

}
.A4-key{
    position: relative;
    top: 105px;
    left: -15px;

}
.Bb4-key{
    position: relative;
    top: 105px;
    left: 14px;

}
.B4-key{
    position: relative;
    top: 105px;
    left: 43px;

}
.C5-key{
    position: relative;
    top: 105px;
    left: 72px;

}
.Db5-key{
    position: relative;
    top: 154px;
    left: -115px;
}
.D5-key{
    position: relative;
    top: 154px;
    left: -85px;
}
.Eb5-key{
    position: relative;
    top: 154px;
    left: -56px;
}
.E5-key{
    position: relative;
    top: 154px;
    left: -27px;
}
.C2-key{
    position: relative;
    top: 154px;
    left: 2px;
}
.Db2-key{
    position: relative;
    top: 203px;
    left: -185px;
}
.D2-key{
    position: relative;
    top: 203px;
    left: -155px;
}
.Eb2-key{
    position: relative;
    top: 203px;
    left: -126px;
}
.E2-key{
    position: relative;
    top: 203px;
    left: -97px;
}
.F2-key{
    position: relative;
    top: 203px;
    left: -68px;
}