/* Fancy Styles */

/* @group Template
===================================================== */

/* @end Template
===================================================== */

.card {
  position: relative;
  margin-bottom: 30px;
  box-shadow: 0 0 1.25rem rgba(31, 45, 61, .05);
}

.hover-translate-y-n10:hover,
.translate-y-n10 {
  transform: translateY(-10px) !important;
}

.hover-shadow-lg:hover {
  box-shadow: 0 1rem 3rem rgba(31, 45, 61, .125) !important;
}

.blur-100 {
  --x-blur: 100px !important;
}



/* @group Typewriter Effect
===================================================== */
/* Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);


.line-1 {
  position: relative;
  top: 50%;
  width: 24em;
  margin: 0 auto;
  border-right: 2px solid rgba(255, 255, 255, .75);
  font-size: 180%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(-50%);
}

/* Animation */
.anim-typewriter {
  animation: typewriter 4s steps(44) 1s 1 normal both,
    blinkTextCursor 500ms steps(44) infinite normal;
}

@keyframes typewriter {
  from {
    width: 0;
  }

  to {
    width: 24em;
  }
}

@keyframes blinkTextCursor {
  from {
    border-right-color: rgba(255, 255, 255, .75);
  }

  to {
    border-right-color: transparent;
  }
}


/* ======== */


/* DEMO-SPECIFIC STYLES */
.typewriter h1 {
  color: #fff;
  overflow: hidden;
  /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange;
  /* The typwriter cursor */
  white-space: nowrap;
  /* Keeps the content on a single line */
  margin: 0 auto;
  /* Gives that scrolling effect as the typing happens */
  /*  letter-spacing: .15em;*/
  /* Adjust as needed */
  animation:
    typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from {
    width: 0
  }

  to {
    width: 100%
  }
}

/* The typewriter cursor effect */
@keyframes blink-caret {

  from,
  to {
    border-color: transparent
  }

  50% {
    border-color: ghostwhite;
  }
}



/* @end Typewriter Effect
===================================================== */