@import url("https://fonts.googleapis.com/css2?family=Bitcount+Prop+Double:wght@100..900&family=Datatype:wght@100..900&family=Pixelify+Sans:wght@400..700&display=swap");
/*This is to ensure the project area is display size, and removes any excess element beyond the display*/
body {
  width: 100vw;
  height: 100vh;
  max-height: 100%;
  max-width: 100%;
  overflow: hidden;
  background-color: white;
}
/*Aligns the button at the center*/
#ClickButton {
  width: 5rem;
  margin: auto;
  margin-top: 0;
  font-family: Arial, Helvetica, sans-serif;
}
/* Makes it so that the elements inside only move within the display size*/
main {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
/* Feedback to show users they hovering over an interactive element*/
#ClickButton:hover {
  cursor: pointer;
}
/* engaging feedback for a common action users do with buttons, which is hold them */
#ClickButton:active {
  transform: scale(19);
  transition-duration: 5s;
}

h1 {
  display: flex;
  justify-content: center;
  font-family: Datatype;
}
/* the [open] is there to ensure the styling on applies when the dialog is active; 
without [open] display:flex; interferes with the button and dialog function*/
#Warning[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  
  /*Dialog boxes behave differently and cannot be moved via flex; this code brings box into the center*/
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

#dialogtext {
  font-family: Datatype;
}

#Acknowledged {
  width: 8rem;
  font-family: Arial, Helvetica, sans-serif;
}
/* Feedback to show users they hovering over an interactive element*/
#Acknowledged:hover {
  cursor: pointer;
}

#number {
  font-size: 20rem;
  font-family: Pixelify Sans;
}