body{

margin:0;
background:#090b10;
color:white;
font-family:
"Segoe UI",
sans-serif;

}



.app{

height:100vh;
display:flex;
flex-direction:column;

}



header{

height:70px;
background:#151922;

display:flex;
align-items:center;
justify-content:space-between;

padding:0 30px;

}



.logo{

font-size:22px;
font-weight:bold;

}



.menu button{

background:#252b35;
border:0;

color:white;

font-size:20px;

margin:5px;

padding:12px;

border-radius:12px;

}



.workspace{

flex:1;

display:flex;

}



.left{

width:220px;

background:#11151d;

padding:20px;

}



.card{

background:#1d232d;

padding:15px;

margin:10px 0;

border-radius:12px;

}



.active{

background:#32485c;

}




main{

flex:1;

padding:30px;

}




.instrument{

background:#151a22;

padding:20px;

border-radius:15px;

}



.piano-roll{


height:350px;

margin-top:20px;

background:

linear-gradient(#222 1px,transparent 1px),

linear-gradient(90deg,#222 1px,transparent 1px);


background-size:40px 40px;


border-radius:15px;


}




.control{

margin-top:20px;

}



.control button{

background:#29313c;

color:white;

border:0;

padding:15px;

border-radius:10px;

}





.keyboard{

height:230px;

display:flex;

justify-content:center;

background:#050505;

}




.white{

height:220px;

width:70px;

background:white;

color:black;

border:1px solid #555;

position:relative;

}




.black{

height:130px;

width:45px;

background:#111;

margin-left:-22px;

margin-right:-22px;

z-index:2;

border-radius:0 0 8px 8px;

}