body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #e3f2fd;
    color: #fff;
}

.container {
    width: 1000px;
    border-radius: 20px;
    padding: 35px 40px;
    background-color: #000;
}

.container header {
    color: #b2b2b2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header h2 {
    font-size: 1.6rem;
}

header .column {
    display: flex;
    align-items: center;
}

header .column span {
    font-weight: 500;
    margin-right: 15px;
    font-size: 1.19rem;
}

.volume-slider input {
    accent-color: #fff;
}

.keys-check input {
    width: 60px;
    height: 30px;
    appearance: none;
    border-radius: 30px;
    background-color: #4b4b4b;
    cursor: pointer;
    position: relative;
}

.keys-check input::before {
    content: "";
    height: 20px;
    width: 20px;
    background-color: #8c8c8c;
    top: 50%;
    left: 0.3rem;
    border-radius: inherit;
    position: absolute;
    transform: translateY(-50%);
    transition: all 0.3s;
}

.keys-check input:checked::before {
    left: 2.1rem;
    background-color: #fff;
}

.piano-keys {
    display: flex;
    margin-top: 40px;
    gap: 10px;
}

.piano-keys .key {
    cursor: pointer;
    user-select: none;
    list-style: none;
    color: #a2a2a2;
    position: relative;
    text-transform: uppercase;
    width: 70px;
    border: 1px solid black;
    border-radius: 8px;
}

.piano-keys .key.a{
    height: 230px;
    background: linear-gradient(#42b0e3 96%, #319fd2 4%);
}

.piano-keys .key.w{
    height: 225px;
    background: linear-gradient(#36529e 96%, #25418d 4%);
}

.piano-keys .key.s{
    height: 220px;
    background: linear-gradient(#a8227e 96%, #97116d 4%);
}

.piano-keys .key.e{
    height: 215px;
    background: linear-gradient(#c71a1a 96%, #b60909 4%);
}

.piano-keys .key.d{
    height: 210px;
    background: linear-gradient(#e35429 96%, #d24318 4%);
}

.piano-keys .key.f{
    height: 205px;
    background: linear-gradient(#f0b930 96%, #dfa81f 4%);
}

.piano-keys .key.t{
    height: 200px;
    background: linear-gradient(#55bd4a 96%, #44ac39 4%);
}

.piano-keys .key.g{
    height: 195px;
    background: linear-gradient(#42b0e3 96%, #319fd2 4%);
}

.piano-keys .key.y{
    height: 190px;
    background: linear-gradient(#36529e 96%, #25418d 4%);
}

.piano-keys .key.h{
    height: 185px;
    background: linear-gradient(#a8227e 96%, #97116d 4%);
}

.piano-keys .key.u{
    height: 180px;
    background: linear-gradient(#fff 96%, #eee 4%);
}

.piano-keys .key.j{
    height: 175px;
    background: linear-gradient(#e35429 96%, #d24318 4%);
}

.piano-keys .key.k{
    height: 170px;
    background: linear-gradient(#f0b930 96%, #dfa81f 4%);
}

.piano-keys .key.o{
    height: 165px;
    background: linear-gradient(#55bd4a 96%, #44ac39 4%);
}

.piano-keys .key.l{
    height: 160px;
    background: linear-gradient(#42b0e3 96%, #319fd2 4%);
}

.piano-keys .key.p{
    height: 155px;
    background: linear-gradient(#36529e 96%, #25418d 4%);
}

.piano-keys span {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    font-size: 1.13rem;
}

.piano-keys .a.active, 
.piano-keys .g.active, 
.piano-keys .l.active {
    box-shadow: inset -5px 5px 20px rgba(0, 0, 0, 0.2);
    background: linear-gradient(to bottom #42b0e3 0, #319fd2 100%);
}

.piano-keys .w.active, 
.piano-keys .y.active, 
.piano-keys .p.active {
    box-shadow: inset -5px 5px 20px rgba(0, 0, 0, 0.2);
    background: linear-gradient(to bottom #36529e 0, #25418d 100%);
}

.piano-keys .s.active, 
.piano-keys .h.active {
    box-shadow: inset -5px 5px 20px rgba(0, 0, 0, 0.2);
    background: linear-gradient(to bottom #a8227e 0, #97116d 100%);
}

.piano-keys .e.active {
    box-shadow: inset -5px 5px 20px rgba(0, 0, 0, 0.2);
    background: linear-gradient(to bottom #c71a1a 0, #b60909 100%);
}

.piano-keys .d.active, 
.piano-keys .j.active {
    box-shadow: inset -5px 5px 20px rgba(0, 0, 0, 0.2);
    background: linear-gradient(to bottom #e35429 0, #d24318 100%);
}

.piano-keys .f.active, 
.piano-keys .k.active {
    box-shadow: inset -5px 5px 20px rgba(0, 0, 0, 0.2);
    background: linear-gradient(to bottom #f0b930 0, #dfa81f 100%);
}

.piano-keys .t.active, 
.piano-keys .o.active {
    box-shadow: inset -5px 5px 20px rgba(0, 0, 0, 0.2);
    background: linear-gradient(to bottom #55bd4a 0, #44ac39 100%);
}

.piano-keys .u.active {
    box-shadow: inset -5px 5px 20px rgba(0, 0, 0, 0.2);
    background: linear-gradient(to bottom #fff 0, #eee 100%);
}

.piano-keys .key.hide span {
    display: none;
}

@media screen and (max-width: 820px) {
    .container {
        width: 810px;
    }

    .piano-keys span {
        font-size: 1rem;
    }
}

@media screen and (max-width: 480px) {
    .container {
        width: 470px;
    }

    header h2 {
        font-size: 1rem;
    }

    header .column span {
        font-size: 1rem;
    }

    .piano-keys span {
        font-size: 0.8rem;
    }
}

@media screen and (max-width: 430px) {
    .container {
        width: 420px;
    }

    header h2 {
        font-size: 0.8rem;
    }

    header .column span {
        font-size: 0.8rem;
    }

    .keys-check input {
        width: 50px;
        height: 25px;
    }

    .keys-check input::before {
        height: 15px;
        width: 15px;
    }

    .keys-check input:checked::before {
        left: 2rem;
    }

    .piano-keys span {
        font-size: 0.6rem;
    }
}

@media screen and (max-width: 395px) {
    .container {
        width: 390px;
    }

    header h2 {
        font-size: 0.6rem;
    }

    header .column span {
        font-size: 0.6rem;
    }

    .keys-check input {
        width: 40px;
        height: 20px;
    }

    .keys-check input:checked::before {
        left: 1.4rem;
    }

    .piano-keys span {
        font-size: 0.4rem;
    }
}