@import url('https://fonts.googleapis.com/css2?family=Cabin+Condensed:wght@400;700&display=swap');

@font-face {
  font-family: "stamp";
  src: url("old_stamper.ttf");
}

#main {
  font-family: 'Cabin Condensed';
  width: 800px;
  height: 800px;
  margin-left: auto;
  margin-right: auto;
}

#buttonContainer {
  margin-bottom: 18px;
  font-size: 20px;
}

button {
  border: none;
  background-color: #6FD4C5;
  padding: 10px 20px;
  margin-right: 10px;
  font-size: 18px;
  color: white;
  border-radius: 10px;
  outline: none;
}

button:hover {
  background-color: #95EBE1;
  cursor: pointer;
}

#imageContainer {
  position: relative;
  border-radius: 15px;
  width: 800px;
  height: 800px;
  overflow: hidden;
}

#imageContainer img {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 128px;
  width: 800px;
  height: 800px;
  background: url("spinner.gif");
  background-size: 128px;
  background-repeat: no-repeat;
  background-position: center;
}

#credit {
  margin-top: 20px;
}

@keyframes stamp {
  from {
    opacity: 1;
    transform: rotate(-25deg) scale(1);
  }

  to {
    opacity: 0;
    transform: rotate(-25deg) scale(2);
  }
}

#stamp {
  position: absolute;
  width: 800px;
  height: 800px;
  line-height: 800px;
  transform: rotate(-25deg);
  font-family: stamp;
  font-size: 80px;
  color: #0f0;
  text-shadow: 0 0 30px black, 0 0 30px black, 0 0 30px black;
  text-align: center;
  animation-name: stamp;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
}

/* Make sure the font loads at page load */
#dummy-stamp {
  opacity: 0;
  font-family: stamp;
}