*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color: #191919;
}
@font-face{
    font-family: "Kapakana";
    src: url(fonts/Kapakana.ttf);
}
@font-face{
    font-family: "Micro-5";
    src: url("fonts/Micro5-Regular.ttf");
}
h1{
    font-family: "Kapakana";
    font-weight: 400;
    font-size: 50px;
    font-style: normal;
    color: #DDAF6A;
    text-shadow: 0px 4px 6px #000;
    -webkit-text-stroke-width: 0.30000001192092896;
    -webkit-text-stroke-color: #DDAF6A;
    margin-top: 8px;
}
h2{
    font-family: "Micro-5";
    font-size: 20px;
    text-align: center;
}

/*CONTAINERS*/

.container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
}
.keys-container{
    width: 567px;
    height: 261px;
    transform: translate(22%,-100%);
    flex-shrink: 0;
    border-radius: 10px;
    border: 3px solid #4E4E4E;
    background: #2F2F2F;
    box-shadow: 4px 4px 4px 0px 
    rgba(0, 0, 0, 0.70) inset;
}
.piano{
    width: 1114px;
    height: 476.085px;
    flex-shrink: 0;
    border-radius: 31px;
    background: #3D3C3B;
    margin-top: 200px;

}
.side-panel-1{
    
    width: 298.282px;
    height: 92px;
    transform: rotate(-90deg) translate(-94%, -112%);
    flex-shrink: 0;
    border-radius: 31px 0px 0px 0px;
    border: 1px #000;
    background: linear-gradient(0deg, 
    #2C2C2C 0%, #2C2C2C 100%), #2C2C2C;
    box-shadow: 0px 4px 4px 0px
    rgba(0, 0, 0, 0.70) inset;
}
.side-panel-2{
    width: 298.282px;
    height: 92px;
    transform: rotate(-90deg) translate(-63%, 997%);
    flex-shrink: 0;
    border-radius: 0px 0px 0px 31px;
    border: 1px #000;
    background: linear-gradient(0deg,
    #2C2C2C 0%, #2C2C2C 100%), #2C2C2C;
    box-shadow: 0px 4px 4px 0px
    rgba(0, 0, 0, 0.70) inset;
}
.speaker{
    transform: translate(22%,-20%);
    width: 568px;
    height: 10px;
    border-radius: 31px;
    border: 1px #000;
    background: #2C2C2C;
    box-shadow: 0px 4px 4px 0px
    rgba(0, 0, 0, 0.70);
}
.screen{
    width: 228.146px;
    height: 81.429px;
    transform: translate(320%,-375%);
    flex-shrink: 0;
    padding-top: 10px;
    border-style: solid;
    border-color: #1E1E1E;
    border-radius: 5px;
    border-width: 3px;
    background: #888A7A;
    box-shadow: 0px 4px 4px 0px 
    rgba(0, 0, 0, 0.25) inset;
}
.light-1{
    width: 32px;
    height: 32px;
    background-color:#540707;
    border-style: solid;
    border-color: #333333;
    border-radius: 50%;
    border-width: 3px;
    float: right;
    transform: translate(-30px, -390px);
}
.light-2{
    width: 32px;
    height: 32px;
    background-color:#1e5407;
    border-style: solid;
    border-color: #333333;
    border-radius: 50%;
    border-width: 3px;
    float: right;
    top: 0;
    transform: translate(2px, -335px);
}
/*PLAQUE*/
.plaque{
    align-items: center;
    justify-content: center;
    
}
.p-part-1{
    transform: translate(110%,-140%);
    width: 265px;
    height: 92px;
    flex-shrink: 0;
    border-radius: 31px;
    border: 1px #000;
    background: #2C2C2C;
    box-shadow: 0px 4px 4px 0px 
    rgba(0, 0, 0, 0.70);
}
.p-part-2{
    width: 338px;
    height: 82px;
    flex-shrink: 0;
    border-radius: 26px;
    border: 3px solid #1E1E1E;
    background: #2C2C2C;
    box-shadow: 4px 4px 4px 0px 
    rgba(0, 0, 0, 0.70);
    transform: translate(75%,-280%);
}
.p-part-3{
    width: 322px;
    height: 69px;
    flex-shrink: 0;
    border-radius: 45px;
    border: 3px solid #400101;
    background: #540707;
    box-shadow: 4px 4px 4px 0px #000 inset;
    text-align: center;
    transform: translate(1.75%,5%);
}

/*DRUM PAD*/
.drum-container{
    width: 261px;
    height: 250.259px;
    transform: rotate(-90deg)
    translate(198%, 287%);
    flex-shrink: 0;
    border-radius: 10px;
    border: 3px solid #4E4E4E;
    background: #2F2F2F;
    box-shadow: 4px 4px 4px 0px 
    rgba(0, 0, 0, 0.70) inset;
}
.drum-grid{
    display: grid;
    grid-template-columns: 80px 80px 80px;
    justify-content: space-evenly;
    justify-items: center;
    align-content: space-evenly;
    align-items: center;
    padding: 7px;
    row-gap: 10px;
    
}
.drum-buttons{
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    border-radius: 7px;
    background-color: #515151;
    box-shadow: 0px 4px 4px 0px
    rgba(0, 0, 0, 0.50); 
}
.drum-buttons:active{
    background-color: red;
    border-radius: 8px;
    box-shadow: 0px 5px 15px red;
}
/*KEYS*/
.piano-keys{
    display: flex;
    align-items: center;
    justify-content: center;
}
.keys-list{
    list-style: none;
    display: flex;
    justify-content: center;
}
.keys{
}
.white{
    width: 56px;
    height: 248px;
    background-color: rgb(253, 244, 231);
    box-shadow: inset 0px 10px 10px rgb(207, 184, 148);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-radius: 0px 0px 5px 5px;
    border: 1px solid #000;
}
.white:active{
    background-color:rgb(165, 165, 165);
}
.black{
    border-radius: 0px 0px 5px 5px;
    border: 1px solid #000;
    background: #000;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    width: 28px;
    height: 167px;
    border-radius: 5px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    z-index: 2;
    margin: 0 -20px 0 -20px;
}
.black:active{
    background-color: #000000;
}
/*MOBILE*/
@media  screen and (max-width: 1110px) {
.piano{
   scale: 100%; 
   transform: rotate(90deg);
}
}