@font-face {
  font-family: 'Friends';
  src: url('friends.ttf')  format('truetype')
}

@font-face {
  font-family: 'Sriracha';
  src: url('sriracha.ttf')  format('truetype')
}

@media (max-width: 768px) {
  .content > .beautiful {
    width: 80%;
  }

  .content > div > .full {
    display: none;
  }
}

@media (min-width: 768px) {
  .content > .beautiful {
    width: 60%;
  }

  .content > div > .min {
    display: none;
  }
}

body {
  margin: 0px;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 20rem;
  background-image: linear-gradient(pink, white);
}

.content > div {
  padding: 3rem 0 0;
}

.content > div > span {
  font-family: 'Friends', Fallback, sans-serif;
  font-size: 4rem;
  letter-spacing: 10px;
}

.content > .beautiful {
  padding: 3rem 0 0;
  text-align: center;
  font-family: 'Sriracha', Fallback, sans-serif;
}

.assign {
  padding-top: 6rem;
  margin: 0;
  font-family: 'Sriracha', Fallback, sans-serif;
}

.date {
  padding: 0;
  margin: 0;
  font-family: 'Sriracha', Fallback, sans-serif;
}

.infinity-loader {
  transform: translate(-50%, -50%);
  /*yes, we have to define width and height, otherwise transformation won't work*/
  width: 4rem; /* 2 x width - border-width */
}

.infinity-loader .bg div,
.infinity-loader > .fg > div > div {
  width: 70px; /* width */
  height: 70px; /* width */
  border: 10px solid #aaa; /* border-width solid #aaa */
  box-sizing: border-box; /* so that its border won't increase its width*/
  border-radius: 50%; /* to make the div round*/
  position: absolute;
}

.infinity-loader .right-bg {
  transform: translate(100%, 0);
  left: -10px; /* -border-width */
}

.infinity-loader > .fg > div > div {
  border-color: pink pink transparent transparent;
  transform: rotate(135deg);
  animation: spin 1s linear infinite; /* spin time linear infinite */
  position: static; /*add this otherwise transformation in its parent won't work as expect*/
}

.infinity-loader > .fg > div {
  clip: rect(0, 70px, 35px, 0); /* 0, width, width/2, 0*/
  position: absolute; /* required for using clip: rect() */
}

.infinity-loader > .fg > .bottom-right-rect {
  left: -10px; /* -border-width */
  transform: translateX(100%) scale(1, -1);
}

.infinity-loader > .fg > .bottom-right-rect > div {
  animation-delay: 0.25s; /* time/4 */
}

.infinity-loader > .fg > .top-right-rect {
  left: -10px; /* -border-width */
  transform: translateX(100%) scale(-1, 1);
}

.infinity-loader > .fg > .top-right-rect > div {
  animation-delay: 0.5s; /* (2 x time)/4 */
}

.infinity-loader > .fg > .bottom-left-rect {
  transform: scale(-1);
}

.infinity-loader > .fg > .bottom-left-rect > div {
  animation-delay: 0.75s; /* (3 x time)/4 */
}

.infinity-loader > .fg {
  filter: drop-shadow(0 0 6px orangered);
}

@keyframes spin {
  50%,
  100% {
    transform: rotate(495deg);
  }
}