* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --orange: #f3360d;
  --yellow: #ffc600;
}

body {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
  background-color: var(--orange);
  color: #fff;
  min-height: 100vh;
}

main {
  padding: 2rem;
}

body {
  align-content: center;
}
/* Not important, just for the grid of avatars */
.avatar-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  justify-content: center;
}

.avatar {
  --size: 150px;
  --noggin: calc(var(--size) * 0.15);
  --height-with-noggin: calc(var(--size) + var(--noggin));
  --border-width: calc(var(--size) * 0.015);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: var(--border-width) solid #fff;
  background-color: var(--yellow);
  background-image: url("https://madcss.com/assets/dots005-CGuUpkHL.svg");
  display: flex;
  align-items: end;
  position: relative;
  --mask-size: calc(var(--size) / 2 - var(--border-width));
  --mask-image:
    linear-gradient(to bottom, orange 0%, orange 50%, transparent 50%),
    /* Circle cutout */
    radial-gradient(
        circle at center center,
        blue 0%,
        blue var(--mask-size),
        transparent var(--mask-size),
        transparent 100%
      );
  --mask-repeat: no-repeat, no-repeat;
  --mask-position:
    center center, center calc(var(--noggin) / 2 + var(--border-width));
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--height-with-noggin);
    background-image: var(--mask-image);
    background-repeat: var(--mask-repeat);
    background-position: var(--mask-position);
    opacity: 0.7;
    display: none;
  }
  img {
    width: 100%;
    height: var(--height-with-noggin);
    object-fit: cover;
    mask-image: var(--mask-image);
    mask-repeat: var(--mask-repeat);
    mask-position: var(--mask-position);
    mask-mode: alpha;
  }
}