@import url("styles/fonts.css");
@import url("styles/shortcuts.css");
@import url("styles/animations.css");
@import url("styles/colors.css");

body {
  margin: 0;
}

.hero {
  display: flex;
  flex-direction: row;
  gap: 50px;
  justify-content: center;
  padding: 150px 50px;
  background: url(resources/images/starry_night.webp), var(--starry-night-bg);
  background-size: 1024px;
  color: var(--starry-night-text);
  animation: space-infinite-scroll 120s linear infinite;

  @media screen and (max-width: 700px) {
    flex-direction: column;
    padding: 75px 25px;
    justify-content: stretch;
  }
}

#hero-left-column {
  gap: 30px;
}

#hero-right-column {
  gap: 10px;
  width: 500px;
  justify-content: center;
  @media screen and (max-width: 700px) {
    width: 100%;
  }
}

.hero-chara {
  animation: floating 6s ease-in-out infinite;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  width: 100%;
}

.social-links {
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.social-links img {
  transition: transform 0.2s;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.social-links img:hover {
  transform: translateY(-5px) scale(1.1);
}

.bg-title-ref {
  position: relative;
}

.bg-title {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -5;
  height: 144px;
  filter: hue-rotate(250deg) saturate(89%) brightness(27%);
  opacity: 0.2;
  @media screen and (prefers-color-scheme: dark) {
    filter: hue-rotate(250deg) saturate(89%) brightness(27%) invert(1);
  }
  @media screen and (max-width: 700px) {
    height: 96px;
    left: 0;
    right: auto;
  }
}

.project-card {
  width: 350px;
  background-color: var(--container-bg);
  box-shadow: var(--secondary-container-bg) 8px 8px 0px;
  @media screen and (max-width: 700px) {
    width: 100%;
  }
}

.link-button {
  display: block;
  text-decoration: none;
  color: white;
  background-color: var(--accent-color);
  padding: 14px 20px 10px 20px;
  align-self: flex-start;
}

.link-button:hover {
  background-color: var(--accent-color-hover);
}

.link-button:first-of-type:not(:last-of-type) {
  margin-bottom: 10px;
}