style.css

@import url("https://fonts.googleapis.com/css?family=Alata&display=swap");

html,
body {
  margin: 0;
  padding: 0;
  background-color: #e5b94d;
  font-family: "Alata", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
}

.appContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hide {
  display: none;
}

.startButton {
  font-family: "Alata", sans-serif;
  font-size: 30px;
  background-color: #e4e4e4;
}

.info {
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.bodyText {
  font-size: 32px;
}

.timeText {
  animation-name: textshrink;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

.snap {
  margin: 20px 0;
}

.snapTitle {
  display: flex;
  justify-content: space-around;
}

#refresh {
  margin-bottom: 10px;
}

@keyframes textshrink {
  from {
    font-size: 64px;
  }
  to {
    font-size: 32px;
  }
}