@import url("https://fonts.googleapis.com/css2?family=Comfortaa&display=swap");
input, .luigi, .luigi .head, .nose, .hat, .brim, .hair, .eyes, .ears, .mustache, .eyebrows, .letter, .hair-bottom, label, .title, .instructions,
input *,
.luigi *,
.luigi .head *,
.nose *,
.hat *,
.brim *,
.hair *,
.eyes *,
.ears *,
.mustache *,
.eyebrows *,
.letter *,
.hair-bottom *,
label *,
.title *,
.instructions *,
input:after,
.luigi:after,
.luigi .head:after,
.nose:after,
.hat:after,
.brim:after,
.hair:after,
.eyes:after,
.ears:after,
.mustache:after,
.eyebrows:after,
.letter:after,
.hair-bottom:after,
label:after,
.title:after,
.instructions:after,
input:before,
.luigi:before,
.luigi .head:before,
.nose:before,
.hat:before,
.brim:before,
.hair:before,
.eyes:before,
.ears:before,
.mustache:before,
.eyebrows:before,
.letter:before,
.hair-bottom:before,
label:before,
.title:before,
.instructions:before {
  box-sizing: border-box;
  position: absolute;
  content: "";
}

.title, .instructions {
  display: flex;
  justify-content: center;
  left: 0;
  right: 0;
  color: #fff;
  font-family: "Comfortaa", cursive;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  background-color: #3a5889;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
body:has(input:checked) {
  background: radial-gradient(circle at center, #5a7cb0 0%, #3a5889 55%, #223a5e 100%);
}

.title {
  top: 5%;
  font-size: 1.3rem;
}

.instructions {
  bottom: 10%;
}

label {
  cursor: pointer;
  height: 500px;
  width: 500px;
}

.luigi {
  height: 500px;
  width: 500px;
}
.luigi:after {
  top: 0;
  left: 0;
  height: 500px;
  width: 500px;
  background-position: center;
  background-size: cover;
  opacity: 0.5;
}
.luigi .head {
  height: 205px;
  width: 140px;
  background: #f8ccb3;
  top: 200px;
  left: 177px;
  border-radius: 90% 90% 100% 100%;
}
.luigi .head:after {
  top: -10px;
  left: -11px;
  background: #f8ccb3;
  border-radius: 49% 49% 49% 49%/29% 29% 29% 29%;
  width: 163px;
  height: 151px;
  height: 122px;
}

.nose {
  height: 70px;
  width: 80px;
  background: #f8ccb3;
  left: 41%;
  top: 53%;
  border-radius: 55% 50% 45% 45%/50% 50% 45% 45%;
  width: 87px;
  height: 82px;
}

.hat {
  background: #1ca42f;
  top: 80px;
  left: 140px;
  border-radius: 50% 50% 45% 45%/50% 50% 45% 45%;
  width: 212px;
  height: 225px;
}
.hat:before {
  border-radius: 90% 90% 90% 90%;
  width: 225px;
  height: 220px;
  top: 10px;
  top: 15px;
  left: -6px;
  background: #1ca42f;
}
.hat:after {
  width: 73px;
  height: 72px;
  background: #ffffff;
  border-radius: 50% 50% 45% 45%;
  top: 28px;
  left: 73px;
}

.brim {
  top: 39%;
  left: 159px;
  background-clip: content-box;
  padding: 1px;
  border-radius: 49% 49% 49% 49%/36% 36% 36% 36%;
  width: 176px;
  height: 159px;
  box-shadow: 0 -20px 0 0 #025a10;
}
.brim:after {
  top: -5px;
  left: -2px;
  border-radius: 49% 49% 49% 49%/36% 36% 36% 36%;
  width: 181px;
  height: 159px;
  box-shadow: inset 0 9px 0 0 #025a10;
}
.brim:before {
  top: -8px;
  top: -16px;
  left: 1px;
  background: transparent;
  width: 175px;
  height: 79px;
  border-radius: 49% 49% 49% 49%;
  box-shadow: inset 0 9px 0 0 #1ca42f;
}

.hair {
  border-radius: 39% 36% 39% 46%/39% 36% 39% 46%;
  width: 18px;
  height: 89px;
  background: #501000;
  top: 45.7%;
  left: 158px;
  transform: rotate(-10deg);
  overflow: hidden;
  background-clip: content-box;
  padding: 1px;
}
.hair + .hair {
  left: 319px;
  transform: rotate(10deg) scaleX(-1);
}
.hair:after {
  width: 28px;
  height: 70px;
  left: 13px;
  top: 0px;
  transform: rotate(-10deg);
  border-radius: 39% 36% 39% 46%;
  background: #f8ccb3;
}

.eyes {
  top: 45%;
  left: 40%;
  background: #37cbfe;
  background-clip: content-box;
  transform: rotate(-4deg);
  border-radius: 49% 49% 49% 49%/36% 36% 36% 36%;
  width: 35px;
  height: 65px;
  box-shadow: inset 7px 11px 0 0 #ffffff;
}
.eyes + .eyes {
  left: 260px;
  transform: rotate(4deg) scaleX(-1);
}
.eyes:before {
  top: 20px;
  background: #07061b;
  left: 13px;
  border-radius: 49% 49% 49% 49%/36% 36% 36% 36%;
  transform: rotate(2deg);
  width: 20px;
  height: 35px;
}
.eyes:after {
  height: 8px;
  width: 8px;
  background: #ffffff;
  top: 20px;
  left: 20px;
  border-radius: 49% 49% 49% 49%;
}

.ears {
  top: 49%;
  left: 135px;
  transform: rotate(-25deg);
  background: #f8ccb3;
  border-radius: 49% 49% 49% 49%/49% 49% 49% 49%;
  width: 58px;
  height: 87px;
}
.ears + .ears {
  left: 303px;
  transform: rotate(25deg) scaleX(-1);
}
.ears:after {
  top: 12px;
  left: 14px;
  background: #e5b69b;
  border-radius: 49% 49% 49% 49%/49% 49% 49% 49%;
  width: 58px;
  height: 67px;
}

.mustache {
  background: #f8ccb3;
  top: 275px;
  left: 175px;
  border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
  width: 85px;
  height: 80px;
  box-shadow: inset 0px -46px 0px 0px #270300;
}
.mustache + .mustache {
  left: 234px;
  transform: scaleX(-1);
}

.eyebrows {
  background: transparent;
  top: 39%;
  left: 37%;
  border-radius: 50% 46% 46% 46%/50% 46% 46% 46%;
  width: 51px;
  height: 85px;
  background-clip: content-box;
  padding: 1px;
  box-shadow: inset 1px 25px 0px -10px #270300;
}
.eyebrows + .eyebrows {
  left: 260px;
  transform: scaleX(-1);
}

.letter {
  border-radius: 8% 8% 8% 8%/8% 8% 8% 8%;
  width: 38px;
  height: 49px;
  top: 23.6%;
  left: 46%;
  background: #1ca42f;
}
.letter:after {
  top: -1px;
  left: 13px;
  width: 27px;
  height: 35px;
  transform: rotate(-5deg) skew(-9deg);
  background: #ffffff;
}

.hair-bottom {
  background: #501000;
  top: 66.5%;
  left: 37%;
  border-radius: 43% 45% 45% 47%/43% 45% 45% 47%;
  width: 30px;
  height: 55px;
}
.hair-bottom + .hair-bottom {
  left: 55.8%;
}

input {
  display: none;
  top: 0px;
  z-index: 1;
}
input:checked ~ .luigi {
  filter: drop-shadow(0px 0px 3px #07061b);
}
input:checked ~ .luigi .nose {
  filter: drop-shadow(0 1px 2px #07061b);
  background: radial-gradient(circle, rgb(253, 231, 209) 17%, rgb(235, 181, 150) 57%, rgb(205, 126, 81) 84%);
}
input:checked ~ .luigi .hat {
  background: radial-gradient(circle, rgb(131, 210, 136) 37%, rgb(70, 138, 73) 60%, rgb(70, 138, 73) 58%, #025a10 70%);
}
input:checked ~ .luigi .hat:before {
  background: rgb(131, 210, 136);
  background: radial-gradient(circle, rgb(131, 210, 136) 37%, #34b03b 53%, #025a10 79%, rgb(131, 210, 136) 90%);
}
input:checked ~ .luigi .hat:after {
  background: rgb(255, 255, 255);
  background: linear-gradient(180deg, rgb(255, 255, 255) 40%, rgb(228, 228, 228) 100%);
  filter: drop-shadow(0px 0px 2px #1ca42f);
}
input:checked ~ .luigi .brim {
  box-shadow: 0 -20px 0px 0 #1ca42f, 0 -22px 1px 0px #025a10;
}
input:checked ~ .luigi .brim:after {
  box-shadow: inset 0 9px 0px 0 #025a10;
  filter: drop-shadow(0 2px 3px #07061b);
  filter: drop-shadow(0 6px 3px rgb(162, 114, 90));
}
input:checked ~ .luigi .brim:before {
  display: none;
}
input:checked ~ .luigi .eyes {
  filter: drop-shadow(0px -1px 1px #6a6363);
  background: linear-gradient(180deg, rgb(87, 177, 212) 34%, rgb(46, 137, 172) 69%, rgb(39, 110, 138) 96%);
}
input:checked ~ .luigi .mustache {
  background: transparent;
  box-shadow: 0px 5px 4px 0px #795c4d, inset 0px -16px 4px 0px #170a08, inset 0px -36px 5px 0px #270300, inset 0px -46px 0px 0px #170a08;
}
input:checked ~ .luigi .ears {
  background: rgb(244, 199, 175);
  background: linear-gradient(153deg, rgb(244, 199, 175) 18%, rgb(222, 173, 148) 34%, rgb(207, 150, 119) 58%);
}
input:checked ~ .luigi .ears:after {
  background: #ba8366;
  filter: drop-shadow(0 2px 2px #ba8366);
}
input:checked ~ .luigi .eyebrows {
  filter: drop-shadow(0px 1px 1px #07061b);
}
input:checked ~ .luigi .head {
  background: rgb(219, 172, 147);
  background: radial-gradient(circle, rgb(219, 172, 147) 49%, rgb(190, 148, 125) 63%, rgb(164, 118, 95) 86%);
}
input:checked ~ .luigi .head:after {
  background: radial-gradient(circle, rgb(251, 238, 224) 29%, rgb(243, 203, 181) 45%, rgb(227, 163, 129) 70%);
}
input:checked ~ .luigi .hair {
  background-image: linear-gradient(90deg, #07061b 20%, rgb(41, 7, 0) 30%, rgb(41, 7, 0) 70%, #07061b 85%);
  filter: drop-shadow(4px 6px 4px rgb(162, 114, 90));
}
input:checked ~ .luigi .hair:after {
  background: linear-gradient(90deg, rgb(162, 114, 90) 20%, rgb(232, 187, 163) 53%);
}
input:checked ~ .luigi .hair-bottom {
  filter: drop-shadow(0px 2px 0px #07061b);
}

/*# sourceMappingURL=style.css.map */