#controls {
   display: flex;
   flex-direction: column;
   gap: 10px;
   width: 900px;
}


#container {
   display: flex;
   flex-direction: column;
   height: 100vh;
   align-items: center;
   gap: 20px;
}


#top {
   width: 100%;
   height: 150px;
   background-image: url('mg.png');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   display: flex;
   align-items: center;
   display: flex;
   align-items: center;
   justify-content: center;
}


h1 {
   color: beige;
   font-family: 'Mocondo', cursive;
   align-items: center;
   font-size: 92px;
}


#canvas {
   border: 5px solid black;
   height: 500px;
   width: 900px;
}


#controls {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   gap: 20px;
   /*width: 100%;*/
   /*height: 100%;*/
   background-image: url('bgg.png');
   background-size: cover;
   background-position: center;
   /*background-repeat: no-repeat;*/
   padding: 15px;
   /*padding-right: 25px;*/
   /*border-right: none;*/
   /*border-top: 6px solid #000;*/
   box-sizing: border-box;
}


#main {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   width: 100%;
   height: 100vh;
   width: 100%;
   box-sizing: border-box;
}


.button-row {
   display: flex;
   gap: 10px;
}


.colors {
   display: flex;
   gap: 42px;
   justify-content: center;
   align-items: center;
   width: 100%;
}


.colors input[type="color"] {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   border: 2px solid #000;
   padding: 0;
   cursor: pointer;
   background-color: #bd5f4f;
}


.colors input[type="color"]::-webkit-color-swatch {
   border-radius: 50%;
}


h4 {
   font-family: 'Mocondo', cursive;
   font-size: 30px;
   margin: 4px 0;
}


#submit, #record {
   background-color: #3a86b3;
   color: beige;
   border: 2px solid #000;
   padding: 10px 20px;
   font-size: 16px;
   border-radius: 8px;
   cursor: pointer;
   transition: background 0.3s;
}


#submit:hover, #record:hover {
   background-color: #cf5a46;
}


#input {
   width: 100%;
   padding: 10px;
   font-size: 16px;
   border-radius: 8px;
   border: 2px solid #000;
   box-sizing: border-box;
   outline: none;
   background-color: #fde2d2;
   color: #000;
   transition: border 0.3s;
   box-shadow: 0.3s;
}


#input:focus {
   border-color: #bd5f4f;
   box-shadow: 0 0 5px #bd5f4f;
}


#waveform {
   width: 100%;
   padding: 10px;
   font-size: 16px;
   border-radius: 8px;
   border: 2px solid #000;
   box-sizing: border-box;
   background-color: #fde2d2;
   color: #000;
   outline: none;
   cursor: pointer;
   transition: border 0.3s;
   box-shadow: 0.3s;
}


#waveform:focus {
   border-color: #bd5f4f;
   box-shadow: 0 0 5px #bd5f4f;
}


#canvas-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 10px;
}


#canvas-title {
   font-family: 'Mocondo', cursive;
   font-size: 30px;
   color: #7c3639;
   text-align: center;
   margin: 0;
}