@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@900&family=Sumana:wght@700&display=swap");
body {
  align-items: center;
  background-color: #ffffff00;
flex-wrap: wrap;


@font-face {
  font-family: system-ui;
  src:url(./system-ui.woff);
  
}

  justify-content: center;
  height: 100vh;
  margin: 0;
}
.person {
  align-items: center;
  display: flex;
  flex-direction: column;
  width: 202px;
}
.container {
  border-radius: 50%;
  height: 290px;
  -webkit-tap-highlight-color: transparent;
  transform: scale(0.48);
  transition: transform 250ms cubic-bezier(0.34, 0.5, 0, 1.71);
  width: 383px;
}
.container:after {
    background-color: #ffffff00;
  content: "";
  height: 10px;
  position: absolute;
  top: 390px;
  width: 100%;
}
.container:hover {
  transform: scale(0.54);
}
.container-inner {
  clip-path: path(
    "M 390,400 C 390,504.9341 304.9341,590 200,590 95.065898,590 10,504.9341 10,400 V 10 H 200 390 Z"
  );
  position: relative;
  transform-origin: 50%;
  top: -210px;
  width: 384px;
}
.circle {
  background-color: #79f0a2;
  border-radius: 50%;
  cursor: pointer;
  height: 380px;
  left: 10px;
  pointer-events: none;
  position: absolute;
  top: 210px;
  width: 380px;
}
.circleGreen{
  background-color: #79f0a2;
  border-radius: 50%;
  cursor: pointer;
  height: 380px;
  left: 10px;
  pointer-events: none;
  position: absolute;
  top: 210px;
  width: 380px;
}
.circleBluelite{
  background-color: #dbe9ff;
  border-radius: 50%;
  cursor: pointer;
  height: 380px;
  left: 10px;
  pointer-events: none;
  position: absolute;
  top: 210px;
  width: 380px;
}

.circlePurplelite {
  background-color: #885ebf33;
  border-radius: 50%;
  cursor: pointer;
  height: 380px;
  left: 10px;
  pointer-events: none;
  position: absolute;
  top: 210px;
  width: 380px;
}


.circleGrey{
  background-color: #e7e7e7;
  border-radius: 50%;
  cursor: pointer;
  height: 380px;
  left: 10px;
  pointer-events: none;
  position: absolute;
  top: 210px;
  width: 380px;
}



.circlePink{
  background-color: #f7d9ef;
  border-radius: 50%;
  cursor: pointer;
  height: 380px;
  left: 10px;
  pointer-events: none;
  position: absolute;
  top: 210px;
  width: 380px;
}
.circleBlue{
  background-color: #c7dff8;
  border-radius: 50%;
  cursor: pointer;
  height: 380px;
  left: 10px;
  pointer-events: none;
  position: absolute;
  top: 210px;
  width: 380px;
}

.circleBlack{
  background-color: #000000;
  border-radius: 50%;
  cursor: pointer;
  height: 380px;
  left: 10px;
  pointer-events: none;
  position: absolute;
  top: 210px;
  width: 380px;
}




.img {
  pointer-events: none;
  position: relative;
  transform: translateY(20px) scale(1.15);
  transform-origin: 50% bottom;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.container:hover .img {
  transform: translateY(0) scale(1.2);
}
.img1 {
  left: 22px;
  top: 164px;
  width: 340px;
}
.img2 {
  left: -46px;
  top: 174px;
  width: 444px;
}
.img3 {
  left: -16px;
  top: 144px;
  width: 466px;
}

.imgUni {
  left: 39px;
  top: 210px;
  width: 340px;
}

.h3{

  color: #dddddd;
}
.imgCurve {
  left: 85px;
  top: 256px;
  width: 241px;
}
.img0x {
  left: 66px;
  top: 265px;
  width: 266px;
}

.name {
  color: #404245;
  font-size: 36px;
  font-weight: 600;
  margin-top: 16px;
  text-align: center;
}
.title {
  color: #4e4e4e;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 16px;
  font-weight: 500;

  margin-top: 4px;
}

.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 3px;
  grid-row-gap: 8px;
  }
  
  .div1 { grid-area: 2 / 1 / 3 / 2; }
  .div2 { grid-area: 2 / 2 / 3 / 3; }
  .div3 { grid-area: 2 / 3 / 3 / 4; }
  .div4 { grid-area: 2 / 4 / 3 / 5; }


  label {
    display: block;
    /* background: lightgrey; */
    width: 100px;
    height: 100px;
}

#demo:checked + label {
    background: blue;
    color: white;
}