* {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background: #1F2937;
  margin: 0;
  min-height: 100vh;
  font-family: sans-serif;
}

canvas {
  background-color: #efefef;
  border-radius: 2rem 2rem 0 0;
  border: 5px solid #1f79d2;
  max-width: 100%; 
}

.toolbox {
  display: flex;
  flex-wrap: wrap; 
  width: 100%;
  max-width: 810px; 
  padding: 0.5rem;
  border-radius: 0 0 2rem 2rem;
  background-color: #1f79d2;
  border: 1rem solid #1f79d2;
}

.toolbox > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  width: 50px;
  height: 50px;
  font-size: 2rem;
  margin: 0.25rem;
  padding: 0.25rem;
  border-radius: 1rem;
  background-color: #ffffff;
}

.toolbox > input {
  padding: 0;
  margin: 0.25rem;
}

.toolbox > *:last-child {
  margin-left: auto;
}
footer{
    color:white;
  }
  footer a{
    color:white;
  }

/* Media Query for Smaller Screens */
@media only screen and (max-width: 600px) {
  *{
    box-sizing: border-box;
  }
  canvas{
    height: 400px;
  }
  .toolbox {
    padding: 0.25rem;
  }

  .toolbox > * {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    margin: 0.1rem;
  }
  footer{
    color:white;
  }
  footer a{
    color:white;
  }
}