@font-face {
  font-family: myfont;
  src: url('ShinyFlakesRegular-8M23Z.ttf');
}

body {
  font-family: myfont;
  height: 100vh;
  margin: 0;
  display: grid;
  justify-content: center;
  background: url('tudor-bg.jpg') no-repeat;
  background-size: 100% 100%;
  align-items: stretch;
  align-content: center;
  position: relative;
}
#form {
  display: grid;
  justify-content: center;
  align-items: center;
  margin-bottom: 230%;
}

.text-photo {
  color: #35D1E6;
  font-size: 22px;
  font-weight: 4;
  text-align: center;
}

.text-success {
  color: #4CAF50;
  font-size: 22px;
  font-weight: 4;
  text-align: center;
}

.text-error {
  color: #af504c;
  font-size: 22px;
  font-weight: 4;
  text-align: center;
}


.pulse ion-icon {
  font-size: 30px;
  position: absolute;
  padding: 25px;
}

.pulse {
  width: 5rem;
  color: #FFF;
  transition: all .5s ease;

}

.pulse-photo {
  background: #35D1E6;
  box-shadow: 0 0 0 0 #35D1E633;
}


.pulse-waiting {
  background: #c0d144;
  box-shadow: 0 0 0 0 #c0d14433;
}

.pulse-success {
  background: #4CAF50;
  box-shadow: 0 0 0 0 #4CAF5033;
}

.pulse-error {
  background: #af504c;
  box-shadow: 0 0 0 0 #af504c33;
}

.pulse,
.pulse::before,
.pulse::after {
  content: "";
  display: grid;
  grid-area: 1/1;
  aspect-ratio: 1;
  border-radius: 50%;

  
  /* animation here */
  animation: pulsing 3s linear infinite var(--s, 0s);
}

.pulse-photo:hover {
  background: #35D1E688;
  color: #FFFFFF99;
}

.pulse-waiting:hover {
  background: #c0d14488;
  color: #FFFFFF99;
}

.pulse-success:hover {
  background: #4CAF5088;
  color: #FFFFFF99;
}

.pulse-error:hover {
  background: #af504c88;
  color: #FFFFFF99;
}

.pulse::before {
  --s: 1s;
}

.pulse::after {
  --s: 2s;
}

/* animation */
@keyframes pulsing {
  to {
    box-shadow: 0 0 0 5rem #0000;
  }
}