.drum_tutorial_container {
    position: relative;
    width: 1700px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    zoom: 100%;
    margin: 0 0 20px 0;
    background-color: white;
    border-radius: 10px;
}

.close_drumset {
    position: absolute;
    z-index: 90;
    right: 10px;
    top: 10px;
    width: 60px;
    height: 60px;
    background: #d35d57c9;
    font-size: 30px;
    padding: 10px;
}

.show_visual_drums {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='m111 58.3l-87.37.4l-.61 8.3L192.4 92.6l1.8-8.1zm310.8 18.8l-.3 29.7l5-.8l4.9.8l-.3-29.7zM96.33 92.8l-1.81 13l-33.17 26.4l1.84 115.6l6.16-40.4l9.55-2.3h.28l-1.03-65l31.95-25.4l2.7-19.4zm330.17 25.9l-66.6 10.4l.6 8.3h132l.6-8.3zm-66 33.3l-.6 8.3l66.6 10.4l66.6-10.4l-.6-8.3zm60.3 30.5l-.2 20.8c2.8.5 5.6 1.2 8.5 1.8l3.3.8l-.2-23.4l-5.7.9zm-287.4 30.7c-16.5-.2-33.5 1.9-51.1 6.1l-2.86 18.8c23.26-3.3 75.96-6.9 127.56 14.6c4-1.6 8.2-3.1 12.4-4.3l1.2-8c-26.6-18.2-55.8-26.8-87.2-27.2m241.2 0c-31.4.4-60.6 9-87.2 27.2l1.2 8c4.2 1.2 8.4 2.7 12.4 4.3c51.6-21.5 104.3-17.9 127.6-14.6l-2.9-18.8c-17.6-4.2-34.6-6.3-51.1-6.1m-258.1 39c-17.91 0-32.1 1.8-39.69 3.1l-7.05 46.3l72.94 11.1c10.1-20.3 25.5-37.5 44.5-49.6c-25.4-8.5-50.4-10.9-70.7-10.9m275 0c-20.3 0-45.3 2.4-70.7 10.9c19 12.1 34.4 29.3 44.5 49.6l72.9-11.1l-7-46.3c-7.6-1.3-21.8-3.1-39.7-3.1m-137.5 10c-49.9 0-90.4 40.5-90.4 90.4S204.1 443 254 443s90.4-40.5 90.4-90.4s-40.5-90.4-90.4-90.4M64.27 315.5l1.36 85.5l-46.73 87h18.94l33.24-62l15.19 62h17.23l-21.19-86l-1.33-84zM433.6 317l-14.2 2.2l-.8 74.1l-24.2 55.7l7.4 25l24.7-57l30.9 71h18.2l-41.2-94.7zm-279.7 11.6c-4.7 12.1-7.2 25.2-7.2 38.9C146.7 427 194.8 475 254 475s107.3-48 107.3-107.5c0-13.7-2.5-26.8-7.2-38.9c1.8 7.7 2.8 15.8 2.8 24C356.9 409 310.8 456 254 456s-102.9-47-102.9-103.4c0-8.2 1-16.3 2.8-24m-18 77.4l-20.2 82h25.7l11.8-48c-7.4-11-13.3-22-17.3-34m236.2 0c-4 12-9.9 23-17.3 34l11.8 48h25.7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
    margin: 5px;
}

.small_play {
    position: absolute;
    z-index: 90;
    left: 10px;
    top: 10px;
    width: 60px;
    height: 60px;
    background: rgba(144, 238, 144, 0.867);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M8 5v14l11-7z" /></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
}

.small_play_active {
    position: absolute;
    z-index: 90;
    left: 10px;
    top: 10px;
    width: 60px;
    height: 60px;
    background: rgba(144, 238, 144, 0.867);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14 19V5h4v14zm-8 0V5h4v14z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
}

.iPlayDrumsPics {
    position: relative;
    width: 800px;
    aspect-ratio: 1700/425;
    background-image: url("../drumset_img/drum_pick_names.png");
    background-size: contain;
    background-color: white;

}

.drum_container {
    position: relative;
    width: 800px;
    height: 400px;
    aspect-ratio: 1/1;
    background-image: url("../drumset_img/yamaha_draw2.png");
    background-size: contain;
    background-color: white;
    background-repeat: no-repeat;
    background-position: center;

}

.snare_main {
    position: relative;
    width: 80px;
    height: 22px;
    border-radius: 50%;
    border: 0px solid;
    position: absolute;
    left: 317px;
    top: 172px;
    background-color: rgba(5, 197, 5, 0.3);
}


.small_snare_main {
    position: absolute;
    width: 35px;
    height: 21px;
    bottom: 84px;
    left: 119px;
    background-color: rgba(1, 165, 1, 0.188);
    border-radius: 10;
    border: none;
}

.snare_rim {
    width: 100px;
    height: 36px;
    border-radius: 50%;
    border: 4px solid rgba(231, 58, 58, 0.637);
    position: absolute;
    left: 307px;
    top: 165px;
    background-color: transparent;
}

.small_snare_rim {
    position: absolute;
    width: 35px;
    height: 21px;
    bottom: 83px;
    left: 194px;
    background-color: rgba(231, 58, 58, 0.228);
    border: none;
}

.kick {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0px solid;
    position: absolute;
    left: 402px;
    top: 233px;
    background-color: rgba(48, 42, 42, 0.3);
}

.small_kick {
    position: absolute;
    width: 35px;
    height: 21px;
    bottom: 36px;
    left: 43px;
    background-color: rgba(65, 58, 58, 0.124);
    border-radius: 0;
    border: none;
}

.hi_tom {
    width: 77px;
    height: 34px;
    border-radius: 50%;
    border: 0px solid;
    position: absolute;
    left: 332px;
    top: 97px;
    background-color: rgba(23, 200, 126, 0.3);
}

.small_hi_tom {
    position: absolute;
    width: 35px;
    height: 21px;
    bottom: 107px;
    left: 269px;
    background-color: rgba(0, 255, 247, 0.1);
    border-radius: 0;
    border: none;
}

.low_tom {
    width: 97px;
    height: 30px;
    border-radius: 50%;
    border: 0px solid;
    position: absolute;
    left: 455px;
    top: 161px;
    background-color: rgba(23, 94, 200, 0.3);
}


.small_low_tom {
    position: absolute;
    width: 35px;
    height: 21px;
    bottom: 60px;
    left: 345px;
    background-color: rgba(0, 110, 255, 0.1);
    border-radius: 0;
    border: none;
}

/* === Hi-Hat Foot (fhat) === */
.fhat {
    position: absolute;
    width: 29px;
    height: 66px;
    border-radius: 50%;
    border: 0px solid;
    left: 265px;
    top: 297px;
    background-color: rgba(189, 147, 31, 0.3);
    transform: rotate(-18deg);
}

.small_fhat {
    position: absolute;
    width: 35px;
    height: 21px;
    bottom: 12px;
    left: 723px;
    background-color: rgba(201, 160, 45, 0.15);
    border: none;
    border-radius: 0;
}

/* === Closed Hi-Hat (hihat) === */
.hihat {
    position: relative;
    z-index: 90;
    width: 59px;
    height: 18px;
    border-radius: 50%;
    border: 0px solid;
    left: 235px;
    top: 114px;
    background-color: rgba(201, 160, 45, 0.3);
    transform: rotate(-3deg);
}

.small_hihat {
    position: absolute;
    width: 35px;
    height: 21px;
    bottom: 130px;
    left: 571px;
    background-color: rgba(201, 160, 45, 0.15);
    border: none;
    border-radius: 0;
}

/* === Open Hi-Hat (oHihat) === */
.oHihat {
    position: absolute;
    width: 100px;
    height: 36px;
    border-radius: 50%;
    border: 0px solid;
    left: 213px;
    top: 107px;
    background-color: transparent;
    border: 4px solid rgba(255, 0, 0, 0.508);
    transform: rotate(-3deg);
}

.small_oHihat {
    position: absolute;
    width: 35px;
    height: 21px;
    bottom: 130px;
    left: 646px;
    background-color: rgba(224, 186, 68, 0.15);
    border: none;
    border-radius: 0;
}

/* === Crash Cymbal === */
.crash {
    position: absolute;
    width: 109px;
    height: 43px;
    border-radius: 50%;
    border: 0px solid;
    left: 259px;
    top: 25px;
    background-color: rgb(255 33 68 / 30%);
    transform: rotate(2deg);
}


.small_crash {
    position: absolute;
    width: 35px;
    height: 21px;
    bottom: 130px;
    left: 420px;
    background-color: rgba(255, 33, 66, 0.166);
    border: none;
    border-radius: 0;
}

/* === Ride Cymbal === */
.ride {
    position: absolute;
    width: 142px;
    height: 68px;
    border-radius: 50%;
    border: 0px solid;
    left: 438px;
    top: 48px;
    background-color: rgb(78 79 83 / 30%);
    transform: rotate(-10deg);
}

.small_ride {
    position: absolute;
    width: 35px;
    height: 21px;
    bottom: 130px;
    left: 495px;
    background-color: rgb(78 79 83 / 30%);
    border: none;
    border-radius: 0;
}

.blink-animation {
    background-color: rgba(255, 255, 255, 0.552);
}


.blink-animation-rim {
    border-color: rgba(255, 255, 255, 0.552);
}


.dNone {
    display: none;
}



@media (min-width: 320px) and (max-width: 480px) {
    .drum_tutorial_container {
        zoom: 45%;
    }
}

@media (min-width: 481px) and (max-width: 900px) {
    .drum_tutorial_container {
        zoom: 65%;
    }
}