* {
  box-sizing:border-box;
  font-family: system-ui, sans-serif;
}

:root {
  --bg:linear-gradient(135deg in oklch,lavender,dodgerblue);
  --color:midnightblue;

  --color-h1:white;
  --border-h1:midnightblue;

  --bg-person:linear-gradient(135deg in oklch,#fff9,#fff3);
}

body {
  min-height:100dvh;
  margin:0;
  padding:1em;

  background:var(--bg);
  background-size:cover;
  background-attachment:fixed;
  color:var(--color);
}


/******/
/* ME */
/******/

section:nth-of-type(1) {

  display:grid;
  align-items:center;
  gap:.5em 1em;

  padding:1em;

  border-radius:1em;
  background:var(--bg-person);

  h1 {
    margin:0;
    font-family:"Comic Sans MS", fantasy;
    font-size: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
    
    text-transform:uppercase;
    line-height:1.1;

    @supports(paint-order: stroke fill) {
      color:white;
      letter-spacing:-.1em;
      word-spacing:.2em;
      -webkit-text-stroke: .15em midnightblue;
      paint-order: stroke fill;
      filter:
        drop-shadow(.05em .05em 0 midnightblue)
        drop-shadow(.05em .05em 0 midnightblue);
    }
  }
}




/**************/
/* ME + IMAGE */
/**************/

section:nth-of-type(1):has(img) {
  grid-template-columns:clamp(6em, 40%, 12em) 1fr;

  img {
    order:-1;
    display:block;
    width:100%;
    flex-shrink:0;
    aspect-ratio:1;
    object-fit:cover;
    border-radius:.5em;
  }
}




/*****************/
/* ME + BIRTHDAY */
/*****************/


section:nth-of-type(1):has(time) {
  grid-template-rows:3fr 1fr;

  h1 {
    align-self:end;
  }

  time {
    align-self:start;
  }

  img{
    grid-row:span 2;
  }
}




/*************/
/* EVERYBODY */
/*************/

section:nth-of-type(2) {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(min(10em, 100%), 1fr));
  gap:1em;

  h2 {
    grid-column:1/-1;
    margin-block-end:0;
    font-weight:400;
  }

  article {
    aspect-ratio:1;
    padding:1em;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    border-radius:1em;
    background:var( --bg-person);

    h3 {
      margin:.25em;
      font-family:"Comic Sans MS", fantasy;
      font-size:1em;
      text-align:center;
      line-height:1.1;
    }
  
    img {
      order:-1;
      display:block;
      width:3em;
      aspect-ratio:1;
      object-fit:cover;
      border-radius:.5em;;
    }
  }
}