@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&display=swap');

:root{
  --paper:#ffffff;
  --ink:#1c2024;
  --accent:#5a7793;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#14171a;
    --ink:#eceeec;
    --accent:#9dc0da;
  }
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--paper);
  font-family:'Nunito', ui-sans-serif, system-ui, sans-serif;
}

.row{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:clamp(20px,6vw,64px);
  padding:clamp(32px,8vw,72px) clamp(16px,5vw,40px);
}

.figures{
  display:flex;
  align-items:center;
  gap:clamp(2px,1vw,10px);
}

figure.stick{
  margin:0;
  width:clamp(96px,16vw,160px);
  color:var(--ink);
  flex:none;
}

figure.stick svg{
  display:block;
  width:100%;
  height:auto;
}

figure.stick.flip{
  transform:scaleX(-1);
}

a.pointto{
  font-size:clamp(20px,3.4vw,30px);
  font-weight:600;
  color:var(--accent);
  text-decoration:none;
  white-space:nowrap;
  border-bottom:3px solid transparent;
  transition:border-color .2s ease;
}

a.pointto:hover,
a.pointto:focus-visible{
  border-color:var(--accent);
}