:root {
  font-family: Helvetica, Arial, sans-serif;
  padding: 0;
  margin: 0;

  /* Red tones */
  --red-100: hsl(0, 100%, 85%);
  --red-300: hsl(0, 100%, 65%);
  --red-500: hsl(0, 100%, 55%);
  --red-700: hsl(0, 58%, 45%);
  --red-900: hsl(0, 61%, 24%);

  /* Dark greys & black */
  --black: hsl(0, 0%, 0%);
  --gray-950: hsl(0, 0%, 4%);
  --gray-900: hsl(0, 0%, 5%);
  --gray-850: hsl(0, 0%, 7%);
  --gray-800: hsl(0, 0%, 10%);
  --gray-750: hsl(0, 0%, 15%);
  --gray-700: hsl(0, 0%, 20%);

  /* Whites */
  --white: hsl(0, 0%, 100%);
  --white-soft: hsl(0, 0%, 98%);
  --white-muted: hsl(0, 0%, 90%);
}

body {
  background-color: var(--black);
  color: var(--white-soft);
  font-size: 16px;
  padding: 0;
  width: 95%;
  margin: 0 auto;
}

svg {
  width: 1.25rem;
  height: 1.25rem;
  /* fill: none;
  stroke: var(--white-muted);
  stroke-width: 1px; */
}

header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;

  background-color: var(--black);
  padding: 1.5rem;
}

.header-left a {
  font-family: 'Space Mono';
  font-weight: 600;
  font-size: 1.25rem;
  background: linear-gradient(to right,
      var(--red-100) 20%,
      var(--red-300) 30%,
      var(--red-500) 50%,
      var(--red-300) 70%,
      var(--red-100) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 500% auto;
  animation: textgradient 5s ease-in-out infinite alternate;
  transition:
    color 0.3s ease-in,
    -webkit-text-fill-color 0.3s ease-in,
    background-clip 0.3s ease-in;
  color: transparent;
  /* Initial color (hidden by -webkit-text-fill-color) */
}

.header-left a:hover {
  -webkit-background-clip: initial;
  /* Remove text clipping */
  background-clip: initial;
  -webkit-text-fill-color: initial;
  /* Restore normal text color */
  color: rgb(255, 255, 255);
  /* Set the desired color */
}

.header-mid {
  display: flex;
  align-items: center;

  padding: 0.5rem 1rem;
  background: var(--gray-800);
  border: solid 1px var(--gray-700);
  border-radius: 0.5rem;
  flex-grow: 1;
  max-width: 25%;
}

.search-bar {
  background: var(--gray-800);
  color: var(--white-muted);
  border: none;
  min-width: 0;
  flex: 1;
}

.search-bar:focus {
  outline: none;
}

.header-right {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: 1.5rem;
}

button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.75rem;

  border: none;
  border-radius: 0.25rem;
  background: var(--gray-750);
  border: solid 1px var(--gray-700);
  cursor: pointer;

  transition: background 0.3s, transform 0.3s;
}

button:hover {
  transition: background 0.3s, transform 0.3s;
  transform: translateY(-3px);
  background: var(--red-700);
}

.x-logo {
  width: 1rem;
  height: 1rem;
}

.tumblr-logo {
  width: 1rem;
  height: 1rem;
  fill: var(--white-muted);
}

.pixiv-logo {
  width: 2.5rem;
  fill: var(--white-muted);
}

main {
  display: flex;
  flex-direction: column;
}

img {
  height: 180px;
  width: auto;
  border-radius: 1.2rem;
}

.title-box {
  position: relative;
  margin: 1.5rem 0;
  z-index: 0;
}

.title-box::before {
  content: '';
  position: absolute;
  top: 0;
  z-index: -1;
  background: url(./images/moving-text.gif) no-repeat center/cover;
  opacity: 0.1;
  width: 100%;
  height: 100%;
  
  /* masking */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 30%,
    black 70%,
    transparent 100%
    );
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;

  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 30%,
    black 70%,
    transparent 100%
    );
  mask-repeat: no-repeat;
  mask-size: cover;
}

.site-title {
  margin: 0 1.5rem;
  padding: 4rem 0;

  font-weight: 700;
  font-size: 4rem;
  font-family: 'Space Mono';
}



.info-gallery-sect {
  display: flex;
  justify-content: center;
  flex-grow: 1;
  gap: 2rem;
}

.about-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 100px;
  padding: 1.5rem 1.5rem;
  height: fit-content;

  background: var(--gray-900);
  border: 1px solid var(--gray-800);
  border-radius: 1.2rem;
}

.about-section h2 {
  text-align: left;
}

.image-gallery {
  flex: 3 1 300px;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}


@keyframes textgradient {
  0% {
    background-position: 0% 50%;
  }

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