:root {
  --yellow: #f9f871;
  --pink: #f096cc;
  --dark-pink: #1a0210;
  --pink-brain: #ff7bd3;
  --light-white: #ffffffcc;
}

@font-face {
  font-family: "brain";
  src: url("fonts/Si\ Kancil\ 2.ttf");
}
body {
  margin: 0;
  /* background: var(--pink-brain); */
  background-color: var(--pink-brain);
  font-family: "Balsamiq Sans", sans-serif;
  font-size: 20px;
}
h1 {
  font-size: 60px;
  margin: 10px;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #cc5ff6;
  min-height: 100vh;
}
input::file-selector-button {
  cursor: pointer;
  font-family: "Balsamiq Sans", sans-serif;
  font-family: "Balsamiq Sans", sans-serif;
  background-color: #1a0210;
  border-radius: 25px;
  border: 2px solid white;
  padding: 6px 12px;
  color: white;
  font-size: 24px;
}

#photoCanvas {
  width: 500px;
  height: 500px;
  border: 4px solid black;
  margin: 20px 0;
  position: relative;
  border-radius: 20px;
  background-color: white;
}

#hatImage {
  position: absolute;
  top: 100px;
  left: 550px;
  cursor: grab;
  width: 100px;
  height: auto;
  display: block;
}
#exportButton {
  cursor: pointer;
  font-family: "Balsamiq Sans", sans-serif;
  font-family: "Balsamiq Sans", sans-serif;
  background-color: #1a0210;
  border-radius: 25px;
  border: 2px solid white;
  padding: 6px 12px;
  color: white;
  font-size: 30px;
}

.controls {
  display: flex;
  gap: 10px;
}
.edit-button {
  font-family: "Balsamiq Sans", sans-serif;
  background-color: #1a02108a;
  border-radius: 25px;
  border: 2px solid white;
  padding: 6px 12px;
  color: white;
  cursor: pointer;
}

.controls-and-export-button {
  display: flex;
  gap: 10px;
  flex-direction: column;
}
@media only screen and (max-width: 600px) {
  #photoCanvas {
    width: 260px;
    height: 260px;
  }
}