/* Shapes with CSS: every piece is drawn inside a 240×240 box (see site.css)
   and coloured with var(--ink). */

/* circle */
.circle {
  background-color: var(--ink);
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

/* 3quarter-circle */
.quarter3-circle {
  border-radius: 50%;
  border: solid 60px var(--ink);
  border-top: solid 60px transparent;
  transform: rotate(-45deg);
}

/* semi-circle1 */
.semi-circle1 {
  width: 120px;
  height: 60px;
  background-color: var(--ink);
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
}

/* semi-circle2 */
.semi-circle2 {
  border-radius: 50%;
  border-bottom: solid 60px transparent;
  border-left: solid 60px transparent;
  border-right: solid 60px var(--ink);
  border-top: solid 60px var(--ink);
  transform: rotate(-45deg);
  position: absolute;
  top: 85px;
}

/* quarter-circle */
.quarter-circle {
  border-radius: 50%;
  border: solid 60px transparent;
  border-top: solid 60px var(--ink);
  transform: rotate(-45deg);
  position: absolute;
  top: 85px;
  left: 80px;
}

/* oval */
.oval {
  background-color: var(--ink);
  width: 160px;
  height: 100px;
  border-radius: 50%;
}

/* egg */
.egg {
  background-color: var(--ink);
  width: 100px;
  height: 140px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

/* pill */
.pill {
  width: 120px;
  height: 60px;
  background-color: var(--ink);
  border-radius: 50px;
}

/* equilateral triangle */
.equil-triangle {
  border-left: solid 60px transparent;
  border-right: solid 60px transparent;
  border-bottom: solid 60px var(--ink);
}

/* isosceles triangle */
.iso-triangle {
  border: solid 40px transparent;
  border-bottom: solid 120px var(--ink);
  position: absolute;
  top: 20px;
}

/* right angled triangle */
.right-triangle {
  border-bottom: solid 120px var(--ink);
  border-left: solid transparent 60px;
}

/* square */
.square {
  background-color: var(--ink);
  width: 120px;
  height: 120px;
}

/* rectangle */
.rectangle {
  background-color: var(--ink);
  width: 160px;
  height: 120px;
}

/* parallelogram */
.parallelogram {
  width: 120px;
  height: 120px;
  background-color: var(--ink);
  transform: skewX(340deg);
}

/* trapedoid1 */
.trapezoid1 {
  width: 160px;
  border-bottom: solid 120px var(--ink);
  border-left: solid 40px transparent;
  border-right: solid 20px transparent;
}

/* trapezoid */
.trapezoid2 {
  width: 100px;
  height: 120px;
  background-color: var(--ink);
  /* position: absolute
  */;
}

.trapezoid2::before {
  content: "";
  position: absolute;
  display: block;
  border-left: solid 40px transparent;
  border-bottom: solid 120px var(--ink);
  top: 60px;
  left: 31px;
}

.trapezoid2::after {
  content: "";
  position: absolute;
  border-right: solid 20px transparent;
  border-bottom: solid 120px var(--ink);
  top: 60px;
  right: 51px;
}

/* rhombus */
.rhombus {
  width: 120px;
  height: 120px;
  background-color: var(--ink);
  transform: rotate(45deg);
}

/* kite */
.kite {
  border-left: solid 60px transparent;
  border-right: solid 60px transparent;
  border-bottom: solid 60px var(--ink);
  position: absolute;
  top: 40px;
}

.kite::before {
  content: "";
  display: block;
  position: absolute;
  top: 59px;
  left: -60px;
  border-left: solid 60px transparent;
  border-right: solid 60px transparent;
  border-bottom: solid 100px var(--ink);
  transform: rotate(180deg);
}

/* pentagon */
.pentagon {
  position: absolute;
  border: solid 50px transparent;
  border-bottom: solid 60px var(--ink);
  top: 10px;
}

.pentagon::before {
  content: "";
  position: absolute;
  display: block;
  width: 100px;
  height: 61px;
  background-color: var(--ink);
  top: 59px;
  left: -50px;
}

/* star */
.star {
  border: solid 80px transparent;
  border-top: solid 120px var(--ink);
  position: absolute;
  top: 80px;
}

.star::after {
  content: "";
  position: absolute;
  display: block;
  border: solid 80px transparent;
  border-bottom: solid 120px var(--ink);
  top: -240px;
  left: -80px;
}

/* crescent */
.crescent {
  position: absolute;
  top: 40px;
  left: 40px;
  background-color: transparent;
  width: 120px;
  height: 120px;
  box-shadow: 10px 15px 0px 10px var(--ink);
  border-radius: 50%;
  transform: rotate(-15deg);
}

/* pyramid */
.pyramid {
  border-top: solid 60px var(--ink);
  border-left: solid 60px color-mix(in srgb, var(--ink) 70%, black);
  border-right: solid 60px color-mix(in srgb, var(--ink) 70%, black);
  border-bottom: solid 60px var(--ink);
}

.horse-shoe {
  width: 100px;
  height: 120px;
  border: solid 30px var(--ink);
  border-right: transparent;
  border-radius: 60px;
  transform: rotate(90deg);
}

.plus {
  background-color: var(--ink);
  width: 20px;
  height: 120px;
}

.plus::before {
  content: '';
  display: block;
  position: absolute;
  background-color: var(--ink);
  width: 20px;
  height: 120px;
  transform: rotate(90deg);
}

/* heart */
.heart {
  background-color: var(--ink);
  width: 70px;
  height: 120px;
  position: absolute;
  left: 60px;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
}

.heart::after {
  content: '';
  display: block;
  position: absolute;
  background-color: var(--ink);
  width: 70px;
  height: 120px;
  position: absolute;
  top: 25px;
  left: 25px;
  border-radius: 50px 50px 0 0;
  transform: rotate(90deg);
}

/* magnifying-glass */
.magnifying-glass {
  width: 100px;
  height: 100px;
  border: 30px solid var(--ink);
  position: absolute;
  top: 45px;
  left: 45px;
  border-radius: 50%;
}

.magnifying-glass::after {
  content: '';
  display: block;
  position: absolute;
  width: 30px;
  height: 70px;
  background-color: var(--ink);
  transform: rotate(-45deg);
  right: -50px;
  bottom: -70px;
}