html {
  height: 100%;
  width: 100%;
}

body {
  width: 98vw;
  font-family: "Roboto Mono";
  border: 5px solid rgb(35, 67, 49);
  background: rgb(100, 190, 139);
}

p {
  color: rgb(35, 67, 49);
  font-size: 12px;
}

.main-container{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.col1-container{
  width: 15%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 5px solid rgb(53, 102, 74);
  align-items: center;
  align-self: center;
}

.col2-container{
  width: 48%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  /* border: 5px solid #1300bd; */
  align-items: center;
    
}
  
.col3-container{
  width: 23%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin: 15px;
}


.subcol1{
  display: flex;
  flex-direction: column;
  justify-content: start;
  border: 5px solid rgb(53, 102, 74);
  align-items: center;
  margin-top: 25%;
  padding: 5px;

}


.subcol2{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  border: 5px solid rgb(53, 102, 74);
  align-items: center;
  margin-bottom: 15%;
}


.piano-container {
  width: 100%;
  height: fit-content;
  /* border: 5px solid #9bbd00; */
  display: flex;
  flex-direction: column;
  justify-content: center;
}


svg {
  display: flex;
  flex-direction: column;
  align-self: center;
  width: 580px;
  height: 300px;
}

.black-box{
  display: flex;
  width: 580px;
  height: 30px;
  flex-direction: row;
  justify-content:space-around;
  /* border: 5px solid #000000; */
}

.black-box1{
  display: flex;
  width:220px;
  height: 30px;
  /* border: 5px solid #040404; */
  flex-direction: row;
  justify-content: space-around;
}

.black-box2{
  display: flex;
  width:290px;
  height: 30px;
  /* border: 5px solid #0d8700; */
  flex-direction: row;
  justify-content: space-around;
  margin-right: 5px; 
}

.black-keys{
  width:40px;
  height:25px;
  border: 3px solid #000000;
  background-color: black;
  border-radius: 12px;
}

.black-keys:hover {
  transition: 0.2s;
  border: 4px solid rgb(148, 148, 148);
  box-shadow: 0px 0px 20px rgb(0, 0, 0);
}

.black-keys:active {
  /* background-color: #3e8e41; */
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.white-box{
  display: flex;
  width: 580px;
  height: 30px;
  flex-direction: row;
  justify-content:space-around;
  /* border: 5px solid #525252; */
  align-self: center;
}

.white-keys{
  width:40px;
  height:25px;
  border: 3px solid #000000;
  margin-left: 12px;
  margin-right: 12px;
  background-color: rgb(236, 235, 235);
  border-radius: 12px;
}

.white-keys:hover {
  transition: 0.2s;
  border: 4px solid #666;
  box-shadow: 0px 0px 20px rgb(255, 255, 255);
}

.white-keys:active {
  box-shadow: 0 5px #353535;
  transform: translateY(4px);
}


#synth-sketch {
  display: flex;
  align-self: center;
  margin-top: 20px;
  border: 5px solid rgb(131, 123, 143);
  
}

label{
  display: flex; 
  align-items: center; 
  justify-content: center;
}

input[type="range"] {
  margin-bottom: 0px; 
}