@import url('https://fonts.googleapis.com/css2?family=DynaPuff:wght@400..700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Modak&display=swap');

html, body {
  margin: 0;
  padding: 0;
  background-image: url('assets/Back.png');
  background-size: cover;
  background-position: center -50px;
  background-position: center -120px;
  background-position: center -200px;
  background-position: center -1px;
  background-repeat: no-repeat;
}
canvas {
  display: block;
  margin: auto;
}


h1 {
  text-align: center;
  font-family: "Modak", system-ui;
  font-weight: 400;
  font-size: 60px;
  font-style: normal;
  color: #094d23;
  margin-top:20px;
  margin-bottom: -25px;
}

p{
  text-align: center;
  font-family: "DynaPuff", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  font-variation-settings:
    "wdth" 100;
  color: #094d23;
  
}

#button-holder1 {
  display: flex;
  position: absolute;
  inset-inline-start: 26%;
  inset-block-start: 77%;
}

#button-holder2 {
  display: flex;
  position: absolute;
  inset-inline-start: 46%;
  inset-block-start: 77%;
}

#button-holder3 {
  display: flex;
  position: absolute;
  inset-inline-start: 64%;
  inset-block-start: 77%;
}

#button-holder4 {
  display: flex;
  position: absolute;
  inset-inline-start: 18%;
  inset-block-start: 55%;
}

#button-holder5 {
  display: flex;
  position: absolute;
  inset-inline-start: 300px;
  inset-block-start: 400px;
}

#sketch_controls{
  display: flex;
  justify-content: center; 
  align-items: flex-start; 
  gap: 40px; 
  margin-top: 20px;
}

#controls-left {
  display: flex;
  flex-direction: column; 
  gap: 10px; 
  align-items: center;
  margin-top: 20px;
}

#controls-right {
    display: flex;
  flex-direction: column; 
  gap: 10px; 
  align-items: center;
  margin-top: 100px;
}