@theme {
  --font-darker: "Darker Grotesque", sans-serif;
  --font-dm: "DM Sans", sans-serif;
}

@layer base {
  button {
    @apply cursor-pointer;
  }
}

#blogContent h3 {
  font-size: 26px;
  font-weight: 600;
  margin-top: 16px;
  margin-bottom: 7px;
}

/* Paragraph font */
#blogContent p,
#blogContent li {
  font-family: 'DM Sans', sans-serif;
}

/* Heading font */
#blogContent h1,
#blogContent h2,
#blogContent h3,
#blogContent h4,
#blogContent h5,
#blogContent h6 {
  font-family: 'Darker Grotesque', sans-serif;
  color: #1F2A44;
  font-weight: 700;
  font-size: 45px;
}

/*Typing animation*/

@keyframes typing1 {
    0% {
        width: 0
    }

    40% {
        width: 100%
    }

    60% {
        width: 100%
    }

    100% {
        width: 0
    }
}

@keyframes typing2 {
    0% {
        width: 0
    }

    40% {
        width: 0
    }

    50% {
        width: 100%
    }

    80% {
        width: 100%
    }

    100% {
        width: 0
    }
}

@keyframes blink {
    50% {
        border-color: transparent
    }
}

.typing-line {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    /* border-right: 3px solid white; */
}

/* First line */
.typing-line:nth-child(1) {
    animation: typing1 8s steps(20, end) infinite, blink 0.8s infinite;
}

/* Second line */
.typing-line:nth-child(2) {
    animation: typing2 8s steps(30, end) infinite, blink 0.8s infinite;
}

/*button-animation*/

.neon-border-btn {
    position: relative;
    z-index: 1;
    background: transparent;
    letter-spacing: 0.5px;
}

/* Animated glowing border */
.neon-border-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 3px;
    /* thicker border */
    border-radius: inherit;

    background: linear-gradient(120deg, #C9A227, #000000, #C9A227, #1F2A44, #C9A227);
    background-size: 400% 400%;
    animation: borderMove 5s linear infinite;

    /* GLOW */
    filter: blur(4px);

    /* mask trick */
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* inner background */
.neon-border-btn::after {
    content: "";
    position: absolute;
    inset: 3px;
    background: #C9A227;
    border-radius: inherit;
    z-index: -1;
    transition: 0.3s ease;
}

/* animation */
@keyframes borderMove {
    0% {
        background-position: 0% 50%
    }

    100% {
        background-position: 200% 50%
    }
}

/* Hover = stronger glow */
.neon-border-btn:hover::before {
    filter: blur(6px);
}

.neon-border-btn:hover::after {
    background: #111;
}

.neon-border-btn:hover {
    transform: scale(1.05);
}

/*floating-animation*/

@keyframes floatSmooth {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

.floating-img {
    animation: floatSmooth 4s ease-in-out infinite;
    display: inline-block;
}

/* Tablet view */
@media (max-width: 767px) {
  .connector {
    transform: rotate(90deg);
    transform-origin: center;
  }
}