/* Tailwind CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&family=Montserrat:wght@500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

/* General Styling */
body {
  margin: 0;
  padding: 0;
  font-family: monospace;
  background-color: #F4F9FF; /* main-bg */
}

/* Typing Animation */
.wrapper {
  display: grid;
  place-items: center;
}

.typing-demo {
  width: 62ch;
  animation: typing 3s steps(22), blink .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid #1E3A8A; /* support */
  font-family: monospace;
  font-size: 2em;
  color: #1E3A8A; /* support */
}

@keyframes typing {
  from {
    width: 0;
  }
}

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

/* Header Styling */
header a {
  @apply hover:cursor-pointer hover:text-[#FF6B6B]; /* primary */
}

/* Frontend Styling */
.frontend a {
  @apply text-lg text-[#11b8a7] px-0 mb-0 md:px-5 md:mb-2 hover:shadow-[0_0_10px_3px_#FF6B6B];
}

.frontend p {
  @apply p-2 m-2 text-white;
}

.frontend img {
  @apply w-[100%] h-[18em] rounded-3xl object-cover;
}

.frontend h2 {
  @apply text-center capitalize text-2xl font-serif font-thin text-[#1E3A8A]; /* support */
}

.frontend h3 {
  @apply text-center break-words font-extrabold md:text-4xl p-6 text-[#D7BA7D]; /* primary */
}

.frontend li {
  @apply text-[#4DABF7] mt-1; /* support-200 */
}

button {
  @apply w-full text-white py-2 rounded-xl hover:bg-support-200 duration-300 transition; /* button contrast */
}

/* Fullstack Styling */
.fullstack a {
  @apply text-[#11b8a7] px-5 mb-2 hover:shadow-[0_0_10px_3px_#FF6B6B];
}

.fullstack img {
  @apply w-[100%] h-[35em] rounded-3xl object-cover;
}

.fullstack p {
  @apply m-2 p-2 text-white; /* support-200 */
}
.fullstack h3 {
    @apply text-center break-words font-extrabold md:text-4xl p-6 text-[#D7BA7D]; /* primary */
}

/* Additional Styling */
body p, h1, h2, a {
  @apply text-white; /* support */
}

.fullstack h3 {
  @apply md:text-4xl text-[#D7BA7D]; /* primary */
}

h2 {
  @apply text-[#569CD6] pt-[1em] my-5; /* primary */
}

.fullstack a {
  @apply text-[#1E3A8A] px-5 mb-2 hover:ring ring-[#FF6B6B] w-full;
}
#offers li {
  @apply text-white;
}

/* Responsive Styling */
@media (max-width: 991px) {
  .typing-demo {
    text-align: center;
    animation: none;
    width: 100%;
  }

  .frontend a,
  .fullstack a {
    width: 95%;
    align-self: center;
  }
}