/* Add CSS styles here! */
* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}
body {
  font-family: sans-serif;
  /* https://www.cssportal.com/html-colors/shades-of-gray.php */
  background-color: black;
  height: 100%;
  width: 100%;
  position: relative;
}

.newText > p {
  font-family: "Libre Baskerville", serif;
  font-size: calc(0.7em + 0.7vw);
  color: white !important;
  line-height: calc(1em + 0.9vw);
  white-space: pre-wrap;
  /* margin-bottom: calc(1vw + 1vh); */
  opacity: 1;
  text-indent: calc(1vw + 1vh);
  padding-right: calc(1vw + 1vh);
  /* padding-bottom: 1.3vh; */
}

#modalContainer p {
  color: white;
  font-family: "Helvitica", sans-serif;
  font-size: calc(0.6em + 0.6vw);
  line-height: calc(0.8em + 0.8vw);
  margin-bottom: calc(0.8em + 0.8vw);
  user-select: none;
}

@media only screen and (max-width: 600px) {
  /* For mobile phones: */
  .newText > p {
    font-size: calc(0.8em + 0.8vw);
    line-height: calc(1.2em + 1vw);
    /* padding-bottom: 1.3vh; */
  }
}

/* .newText {
  transition: height 0.5s ease-out;
} */

.invisible {
  opacity: 0;
}

.visible {
  opacity: 1;
}

/* fade animations */
.fadeIn {
  animation: fadeIn 1s forwards;
}

.fadeOut {
  animation: fadeOut 1s forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}



.App {
  height: 100%;
  width: 100%;
}