html, body { margin: 0; }

body {
  font-family: 'EB Garamond', sans-serif;
  color: #333;
  text-align: center;
  /* background-image: url('pathtoyourimg.png'); DONT FORGET TO CORRECT PATH
  background-size: cover;
  background-position: center;
  background-attachment: fixed; */
  display: flex; /* enable flex layout */
  flex-direction: column; /* stack header, content, footer vertically */
  /* min-height: 100vh; fill the viewport height */
  margin: 0;
  transform: scale(0.9);
  transform-origin: top center;
}

#sketch {
  margin: 20px auto;
  border: 0;
  padding: 10px;
  width: fit-content;
  background: transparent;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

canvas {
  border-radius: 10px;
}

/*
.controls {
display: inline-flex;
gap: 12px;
align-items: center;
background: rgba(255,255,255,0.75);
padding: 8px 12px;
border-radius: 8px;
backdrop-filter: blur(4px);
margin: 8px auto 20px; /* spacing above & below controls
}
*/

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.buttons {
  display: flex;
  justify-content: space-around;
  width: 100%;
  max-width: 500px;
}