@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


* {
  margin : 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

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

.wrapper{
  background-color: #141414;
  
  border-radius: 20px;
  padding: 35px 40px
}

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

.piano-keys .key{
  list-style: none;
  color: #a2a2a2;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  user-select: none;
}


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

.piano-keys .white{
  width: 70px;
  height: 230px;
  border-radius: 8px;
  border: 1px solid #000;
  background: linear-gradient(#fff 96%, #eee 4%);
}

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

.piano-keys .black{
  width: 44px;
  height: 140px;
  margin: 0 -22px 0 -22px;
  z-index: 2;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(#333, #000);
}

.piano-keys .black.active{
  box-shadow: inset -5px 5px 20px rgba(255, 255, 255,0.1);
  background: linear-gradient(to bottom, #000 0% , #434343 100%);
}

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

@media screen and (max-width: 615px) {
  .piano-keys .key:nth-child(13),
  .piano-keys .key:nth-child(14),
  .piano-keys .key:nth-child(15),
  .piano-keys .key:nth-child(16),
  .piano-keys .key:nth-child(17) {
    display: none;

    .piano-keys .white{
      width: 50px;
    }
  }
}

@media screen and (max-width: 815px) {
  .wrapper{
    padding: 25px;
  }

  header{
    flex-direction: column;
  }

  header :where(h2, .column){
    margin-bottom: 13px;
  }

  .piano-keys{
    margin-top: 20px;
  }

  .piano-keys .key:where(:nth-child(9),:nth-child(10)){
    display: none;
  }

  .piano-keys .black{
    height: 100px;
    width: 40px;
    margin: 0 -20px 0 -20px;
  }

  .piano-keys .white{
    height: 180px;
    width: 60px;
  }

}