style-about-me.css

body > article#about-me {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  gap: 1.5em;

  padding-bottom: 25vh;
}

body > article#about-me > h1 {
  --transform: translate(0, 0);

  position: relative;

  margin-bottom: 2rem;

  color: var(--a1);
  filter: drop-shadow(0 0 5rem var(--a1a));

  font-family: var(--blob2-font);
  font-size: 5em;
  font-weight: 400;
  text-align: center;
}
body.portrait > article#about-me > h1 {
  margin-left: -1em;
  margin-right: -1em;

  font-size: 4em;
}
body > article#about-me > h1 > span {
  display: inline-block;
}
body > article#about-me > h1 > span:first-child {
  margin: 0 0.5em;
}
body > article#about-me > h1 > span:not(:first-child) {
  --transform: translate(-50%, -50%);

  z-index: -1;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: var(--transform);

  width: max-content;
  max-width: 100%;

  opacity: 0.5;

  font-family: var(--blob3-font);

  pointer-events: none;
  user-select: none;
}

body > article#about-me > section {
  width: 100%;
  max-width: min(100%, 45rem);

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: center;
  gap: 1.5em;

  font-size: 1.25em;
  line-height: 1.5em;
}
body > article#about-me > section:not(:first-of-type) {
  margin-top: 5rem;
}
body > article#about-me > section > h3 {
  color: var(--a1);

  font-size: 2em;
  font-weight: 800;
  text-transform: lowercase;
}
body > article#about-me > section > p {
  color: var(--fg2);
}
body > article#about-me > section > p a {
  position: relative;

  color: var(--a1);

  text-decoration: none;
}
body > article#about-me > section > p a::before {
  content: "";

  position: absolute;
  top: 100%;
  left: 0;
  right: 100%;

  height: 0.1rem;

  background-color: var(--a1);

  transition: right 0.25s;
}
body > article#about-me > section > p a:hover::before {
  right: 0;
}

body > article#about-me > section.programming > section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 0.5em;
}
body > article#about-me > section.programming > section button {
  padding: 0.75em 1em;

  background-color: var(--a1aa);
  border-radius: 0.75em;
  color: var(--a1);
  box-shadow: var(--blob-box);

  font-weight: 400;
  letter-spacing: 0.075em;
  text-transform: lowercase;

  transition: color 0.25s;
}
body > article#about-me > section.programming > section button:hover {
  color: var(--fg1);
}
body > article#about-me > section.programming > p.projects {
  text-align: center;
}

body > article#about-me > section.art > p > span:has(> span > img) {
  margin-top: 3em;

  width: 100%;
  max-width: 100%;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;

  user-select: none;

  cursor: pointer;
}
body > article#about-me > section.art > p > span > span:has(> img) {
  position: relative;

  width: 50%;
  max-width: 50%;
  overflow: hidden;

  display: block;

  background-color: var(--a1);
  border-radius: 3rem;

  transition: filter 0.25s;
}
body.portrait > article#about-me > section.art > p > span > span:has(> img) {
  width: 100%;
  max-width: 100%;
}
body > article#about-me > section.art > p > span > span:has(> img)::after {
  content: "";

  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  border-radius: 3rem;
  box-shadow: inset 0 0 2rem var(--a1aa);
}
body > article#about-me > section.art > p > span > span > img {
  width: 100%;
  height: auto;

  display: block;

  opacity: 0.5;
  filter: grayscale(1) brightness(1.25) contrast(2);

  mix-blend-mode: multiply;

  pointer-events: none;

  transition: opacity 0.25s, filter 0.25s, mix-blend-mode 0.25s;
}
body > article#about-me > section.art > p > span > span:hover > img {
  opacity: 0.85;
  filter: grayscale(0) brightness(1) contrast(1);

  mix-blend-mode: normal;
}

body > article#about-me > section.awards > section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 0.5em;
}
body > article#about-me > section.awards > section button {
  padding: 0.75em 1em;

  background-color: var(--a1aa);
  border-radius: 0.75em;
  color: var(--a1);
  box-shadow: var(--blob-box);

  font-weight: 400;
  letter-spacing: 0.075em;
  text-transform: lowercase;

  transition: color 0.25s;
}
body > article#about-me > section.awards > section button:hover {
  color: var(--fg1);
}
body > article#about-me > section.awards > section button > span {
  opacity: 0.5;
}