* {
	margin: 0;
	padding: 0;
}

html,
body {
  font-smooth: antialiased;
  font-family: "SFPro", "Helvetica", sans-serif;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.p5c-container {
  z-index: 10;
}

canvas,svg {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  overflow: auto;
  position: fixed;
  object-fit: contain;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
}

#ui-progress-bar,
#ui-generating-video {
  width: 100%;
  position: fixed;
  bottom: 50px;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity cubic-bezier(0.075, 0.82, 0.165, 1) 0.8s;
  mix-blend-mode: difference;
}

#ui-progress-bar .container {
  width: 250px;
  padding: 5px;
  background: #ffffff30;
  border-radius: 20px;
  mix-blend-mode: difference;
}

#ui-progress-bar .container .bar {
  width: 0%;
  height: 4px;
  background: white;
  border-radius: 100px;
  transition: all cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s;
  mix-blend-mode: difference;
}

#ui-generating-video p {
  font-size: 1rem;
  padding: 10px 15px;
  background: #fff;
  color: black;
  border-radius: 20px;
  mix-blend-mode: difference;
}