body {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100vh; /* 100% of the viewport height */
  font-family: 'Rethink Sans', sans-serif;
  font-size: large;
  stroke: none;
}

form {
  align-content: center;
  /* display: block; */
  margin-bottom: 20px;
    
}
label, input, button {
  border: 0;
  font-family: 'Rethink Sans', sans-serif;
  font-size: 1.3em;
  padding: 30px;
  border-radius: 12px;   
}

button {
  color: rgb(255, 255, 255);
  background-color: rgb(134, 3, 141);
}

button:active {
  /* padding: 0;
  margin: 0; */
  background-color: rgb(70, 3, 141);
}

button:disabled,
button[disabled]{
  background-color: #cccccc;
  color: #666666;
}

#calculateTimeButton {
  width: 300px;
}

p {
    text-align: center;

}

.flex-container {
  flex: 1; /* Grow to fill available space */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0; /* Optional: Set a background color */
}

.flex-content {
  max-height: 80%; /* Set a maximum width for content */
}



#counter {
  /* margin: 30px; */
  padding: 0;
  line-height: 0;
  /* height: 70%; */
  font-size: 10em;
  color: rgb(134, 3, 141);;
  /* background-color: #666666; */
}