html,
body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("https://media0.giphy.com/media/jsHNf0F6ggiR28Ynsu/giphy.gif?cid=82a1493b8ms4bxymhtqv2t23yuxxrgsrx0pfguyroojtr0tw&ep=v1_gifs_search&rid=giphy.gif&ct=g");
  /* Set a background image */
}

#center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  color: lightblue;
  width: 25vw;
  /* Set a fixed width */
  height: 25vh;
  /* Set a fixed height */
  font-size: 20px;
  /* Adjust font size */
  cursor: pointer;
  outline: none;
  z-index: 1;
  border-radius: 2vh;

}

.distraction-container {
  max-width: 25vw;
  /* Same width as center button */
  max-height: 25vh;
  /* Same height as center button */
  background-color: transparent;
  padding: 1vh;
}

img {
  max-width: 100%;
  max-height: 100%;
  cursor: pointer;
}

p {
  font-size: 20px;
  text-align: center
}
#center-text{
  margin: auto;

}
#timer {
  margin: auto;
}