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

canvas {
  display: block;
}

/* 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;
}