/*****************************
* HERO TEXT
*****************************/

.hero-text {
     flex: 1;
     min-width: fit-content;
     height: 50vh;
     display: inline-block;
     flex-direction: row;
     justify-content: center;
     padding: 5em;
     font-family: var(--primary-font);
     text-align: left;
     margin: var(--zero);

     h2 {
          margin-bottom: 0.1em;
          overflow: hidden;
          border-right: .15em solid var(--tertiary-colour);
          white-space: nowrap;
          letter-spacing: .05em;
          animation:
               typing 5s steps(40, end) forwards 2s,
               blink-caret 0.75s step-end infinite;
     }

     h4 {
          font-weight: normal;

          &#hover-text {

               opacity: 0;
               transition: opacity 0.5s ease-out;

               &.fade-in {
                    opacity: 1;
               }

               &.leave {
                    opacity: 0;
               }
          }
     }

     .accent-divider {
          background-color: var(--secondary-colour);
          width: 100%;
          height: 10px;
          margin: 1em 0;
     }
}

@keyframes typing {
     from {
          width: 0
     }

     to {
          width: 100%
     }
}

@keyframes blink-caret {

     from,
     to {
          border-color: transparent;
     }

     50% {
          border-color: var(--tertiary-colour);
     }
}