@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --change-topic-color: 0deg 100% 50%;
    --change-topic-dark: 0deg 57% 20%;
    --probing-q-color: 48deg 100% 50%;
    --probing-q-dark: 48deg 100% 17%;
    --expand-color: 120deg 57% 50%;
    --expand-dark: 120deg 57% 20%;
    --clarifying-q-color: 216deg 99% 55%;
    --clarifying-q-dark: 216deg 57% 20%;
    --meta-color: 312deg 100% 50%;
    --meta-dark: 312deg 57% 20%;
}

/* https://stackoverflow.com/questions/12813573/position-icons-into-circle */
.circle-container {
  --d: 10rem; /* the image size */
  --rel: 0.5; /* how much extra space we want between images, 1 = one image size */
  --r: calc(.5*(1 + var(--rel))*var(--d)/var(--tan) + 0.4*var(--d)); /* circle radius */
  --s: calc(2*var(--r) + var(--d)); /* container size */
  position: relative;
  width: var(--s);
  height: var(--s);
}

.circle-container .person-bricks {
  position: absolute;
  top: 50%; left: 50%;
  /* margin: calc(-.5*var(--d)); */
  --az: calc(var(--i)*1turn/var(--m));
  width: var(--az); height: var(--az);
  transform:
    translateX(-50%)
    translateY(-50%)
    rotate(90deg)
    rotate(var(--az))
    translate(var(--r))
    rotate(-90deg)
}

.custom-bg {
    background-image: url('/static/images/morphing-diamonds.svg'), linear-gradient(to right, #ff7e5f, white);
    background-repeat: repeat;
    background-position: center, center;
}