body {
  font-family: "Inter", sans-serif;
}

.wrapper {
  display: flex;
  flex-direction: column;
}

/* #hero_section {
  height: 100vh;
  display: flex;
  flex-direction: column;
} */

/* .hero_container {
  margin: auto;
} */

#hero_image_container {
  background-image: url(/assets/images/heroImage.jpg);
  height: 500px;
  width: 400px;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  border: solid 5px rgb(0, 0, 0);
  border-radius: 40% 60% 40% 55% / 60% 45% 55% 40%;

  transition: border-radius 1s ease-in-out;
  animation: morph 6s infinite alternate ease-in-out;
}
@keyframes morph {
  0% {
    border-radius: 30% 60% 30% 55% / 60% 35% 55% 30%;
  }
  50% {
    border-radius: 70% 30% 60% 40% / 40% 60% 30% 70%;
  }
  100% {
    border-radius: 50% 50% 40% 60% / 50% 40% 60% 50%;
  }
}

.social_icons {
  display: flex;
}

#nav_bar {
  /*  */
}

#weather-widget {
}

/* Skills icons */
.html-icon {
  background-image: url(/assets/images/svgIcons/html-5-svgrepo-com.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.css-icon {
  background-image: url(/assets/images/svgIcons/css-3-svgrepo-com.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.javascript-icon {
  background-image: url(/assets/images/svgIcons/js-svgrepo-com.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.python-icon {
  background-image: url(/assets/images/svgIcons/python-svgrepo-com.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.react-icon {
  background-image: url(/assets/images/svgIcons/react-svgrepo-com.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.sveltekit-icon {
  background-image: url(/assets/images/svgIcons/svelte-icon-svgrepo-com.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.tailwind-icon {
  background-image: url(/assets/images/svgIcons/tailwind-svgrepo-com.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bootstrap-icon {
  background-image: url(/assets/images/svgIcons/bootstrap-svgrepo-com.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.github-icon {
  background-image: url(/assets/images/svgIcons/github-142-svgrepo-com.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.wordpress-icon {
  background-image: url(/assets/images/svgIcons/wordpress-svgrepo-com.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.figma-icon {
  background-image: url(/assets/images/svgIcons/figma-svgrepo-com.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* optional Tailwind config for custom scale */
.active-dot {
  @apply bg-red-400 scale-150;
}
#modal-desc {
  white-space: pre-line;
}