/* General reset */
html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Ensures padding and borders don't affect element width/height */
}

/* Center + enlarge the default p5.js preload indicator */
#p5_loading {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: Arial, sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: #314152;
  z-index: 99999;
}

canvas {
  display: block; /*position: relative; z-index: 1*/;
}

/* Modal overlay always above canvas */
#exportModalOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: auto;
}

#exportModalOverlay * {
  pointer-events: auto;
}

/* Modal container */
.modal {
  top: 0;
  left: 0;  
  position: absolute;  
  background-color: #F5F5F5; /* Apply the background color to the modal itself */
  border-radius: 15px;
  box-sizing: border-box;
}

/* Apply custom font to modalContent */
.modalContent {
  font-family: 'Serpentine_D_Bold_Italic', Arial, sans-serif;  /* Specify your custom font */
  text-align: center;
  /*background-color: rgba(0, 255, 0, 0.3);  /* Remove background color from text */
  width: 100%;  /* Ensure text takes up full width */
  height: 90%; /* Ensure text takes up full height */
  display: flex;
  align-items: center;
}

/* Apply custom font to modalButtons */
.modalButtons {
  font-family: 'Serpentine_D_Bold_Italic', Arial, sans-serif;  /* Specify your custom font */
  /*background-color: rgba(0, 255, 255, 0.3);  /* Remove background color from text */
  width: 100%;  /* Ensure text takes up full width */
  height: 10%; /* Ensure text takes up full height */
  display: flex;
  align-items: flex-end;
}

/* ModalText container */
.modalText {
  font-family: 'Serpentine_D_Bold_Italic', Arial, sans-serif;  /* Specify your custom font */
  /*background-color: rgba(255, 0, 0, 0.3); */
  color: #314152;
}

/* spaced-text container */
.spaced-text {
  /* background-color: rgba(0, 0, 255, 0.3); */
  color: #808080;
}

.spaced-img {
  /*background-color: rgba(0, 0, 255, 0.3); */
  height: 55%;  /* Adjust the size as needed */
  width: auto;  /* Maintain aspect ratio */
}

/* skip-butt container */
.skip-butt  {
  /*background-color: rgba(0, 0, 255, 0.3);*/
  color: #314152;
}

/* next-butt container */
.next-butt  {
  /*background-color: rgba(0, 0, 255, 0.3);*/
  color: #314152;
  margin-left: auto;
}