body {
	  font-family: Montserrat, sans-serif;
	  font-weight: 900;
	}
	
	body,
	body * {
	  cursor: none;
	}

.shapes {
	  position: relative;
	  height: 100vh;
	  width: 100vw;
	  background: #2128bd;
	  overflow: hidden;
	}
	
	.shape {
	  will-change: transform;
	  position: absolute;
	  border-radius: 50%;
	}
	
	.shape.shape-1 {
	  background: #005ffe;
	  width: 650px;
	  height: 650px;
	  margin: -325px 0 0 -325px;
	}
	
	.shape.shape-2 {
	  background: #ffe5e3;
	  width: 440px;
	  height: 440px;
	  margin: -220px 0 0 -220px;
	}
	
	.shape.shape-3 {
	  background: #ffcc57;
	  width: 270px;
	  height: 270px;
	  margin: -135px 0 0 -135px;
	}

.content {
	  top: 0;
	  left: 0;
	  position: absolute;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  height: 100vh;
	  width: 100vw;
	  background: #fff;
	  mix-blend-mode: screen;
	}
	
	h1 {
	  font-size: 100px;
	  color: #000;
	  margin: 0;
	  text-align: center;
	}

	
	
	h3 {
	  font-size: 18px;
	  color: #000;
	  margin: 12px 0 0 0;
	  line-height: 4;
	  text-align: center;
	}



@media (min-width: 419px) {
	  h1 {
		font-size: 100px;
		font-size: calc((0.0989119683 * 100vw + (58.5558852621px)));
	  }
	}
	
	@media (min-width: 1430px) {
	  h1 {
		font-size: 200px;
	  }
	}
	
	.cursor {
	  position: fixed;
	  background: #2128bd;
	  width: 20px;
	  height: 20px;
	  margin: -10px 0 0 -10px;
	  border-radius: 50%;
	  will-change: transform;
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
	  pointer-events: none;
	  z-index: 10000;
	}
	
::-moz-selection {
	  color: #fff;
	  background: #2128bd;
	}
	
	::selection {
	  color: #fff;
	  background: #2128bd;
	}
	






#checklist_wrapper {
	  background: #fff;
	  height: 40vh;
	  font: 400 16px "Varela Round", sans-serif;
	  display: flex;
	  position: relative;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  margin-bottom: 120px;
	}


#checklist {
	  --background: #ffffff;
	  --text: #414856;
	  --check: #4F29F0;
	  --disabled: #C3C8DE;
	  --width: 300px;
	  --height: 140px;
	  --border-radius: 10px;
	  background: var(--background);
	  width: var(--width);
	  height: var(--height);
	  border-radius: var(--border-radius);
	  position: relative;
	  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
	  padding: 30px 45px;
	  display: grid;
	  grid-template-columns: 30px auto;
	  align-items: center;
	}
	#checklist label {
	  color: var(--text);
	  position: relative;
	  cursor: pointer;
	  display: grid;
	  align-items: center;
	  width: -webkit-fit-content;
	  width: -moz-fit-content;
	  width: fit-content;
	  transition: color 0.3s ease;
	}
	#checklist label::before, #checklist label::after {
	  content: "";
	  position: absolute;
	}
	#checklist label::before {
	  height: 2px;
	  width: 8px;
	  left: -27px;
	  background: var(--check);
	  border-radius: 2px;
	  transition: background 0.3s ease;
	}
	#checklist label:after {
	  height: 4px;
	  width: 4px;
	  top: 8px;
	  left: -25px;
	  border-radius: 50%;
	}
	#checklist input[type=checkbox] {
	  -webkit-appearance: none;
	  -moz-appearance: none;
	  position: relative;
	  height: 15px;
	  width: 15px;
	  outline: none;
	  border: 0;
	  margin: 0 15px 0 0;
	  cursor: pointer;
	  background: var(--background);
	  display: grid;
	  align-items: center;
	}
	#checklist input[type=checkbox]::before, #checklist input[type=checkbox]::after {
	  content: "";
	  position: absolute;
	  height: 2px;
	  top: auto;
	  background: var(--check);
	  border-radius: 2px;
	}
	#checklist input[type=checkbox]::before {
	  width: 0px;
	  right: 60%;
	  transform-origin: right bottom;
	}
	#checklist input[type=checkbox]::after {
	  width: 0px;
	  left: 40%;
	  transform-origin: left bottom;
	}
	#checklist input[type=checkbox]:checked::before {
	  -webkit-animation: check-01 0.4s ease forwards;
			  animation: check-01 0.4s ease forwards;
	}
	#checklist input[type=checkbox]:checked::after {
	  -webkit-animation: check-02 0.4s ease forwards;
			  animation: check-02 0.4s ease forwards;
	}
	#checklist input[type=checkbox]:checked + label {
	  color: var(--disabled);
	  -webkit-animation: move 0.3s ease 0.1s forwards;
			  animation: move 0.3s ease 0.1s forwards;
	}
	#checklist input[type=checkbox]:checked + label::before {
	  background: var(--disabled);
	  -webkit-animation: slice 0.4s ease forwards;
			  animation: slice 0.4s ease forwards;
	}
	#checklist input[type=checkbox]:checked + label::after {
	  -webkit-animation: firework 0.5s ease forwards 0.1s;
			  animation: firework 0.5s ease forwards 0.1s;
	}
	
	@-webkit-keyframes move {
	  50% {
		padding-left: 8px;
		padding-right: 0px;
	  }
	  100% {
		padding-right: 4px;
	  }
	}
	
	@keyframes move {
	  50% {
		padding-left: 8px;
		padding-right: 0px;
	  }
	  100% {
		padding-right: 4px;
	  }
	}
	@-webkit-keyframes slice {
	  60% {
		width: 100%;
		left: 4px;
	  }
	  100% {
		width: 100%;
		left: -2px;
		padding-left: 0;
	  }
	}
	@keyframes slice {
	  60% {
		width: 100%;
		left: 4px;
	  }
	  100% {
		width: 100%;
		left: -2px;
		padding-left: 0;
	  }
	}
	@-webkit-keyframes check-01 {
	  0% {
		width: 4px;
		top: auto;
		transform: rotate(0);
	  }
	  50% {
		width: 0px;
		top: auto;
		transform: rotate(0);
	  }
	  51% {
		width: 0px;
		top: 8px;
		transform: rotate(45deg);
	  }
	  100% {
		width: 5px;
		top: 8px;
		transform: rotate(45deg);
	  }
	}
	@keyframes check-01 {
	  0% {
		width: 4px;
		top: auto;
		transform: rotate(0);
	  }
	  50% {
		width: 0px;
		top: auto;
		transform: rotate(0);
	  }
	  51% {
		width: 0px;
		top: 8px;
		transform: rotate(45deg);
	  }
	  100% {
		width: 5px;
		top: 8px;
		transform: rotate(45deg);
	  }
	}
	@-webkit-keyframes check-02 {
	  0% {
		width: 4px;
		top: auto;
		transform: rotate(0);
	  }
	  50% {
		width: 0px;
		top: auto;
		transform: rotate(0);
	  }
	  51% {
		width: 0px;
		top: 8px;
		transform: rotate(-45deg);
	  }
	  100% {
		width: 10px;
		top: 8px;
		transform: rotate(-45deg);
	  }
	}
	@keyframes check-02 {
	  0% {
		width: 4px;
		top: auto;
		transform: rotate(0);
	  }
	  50% {
		width: 0px;
		top: auto;
		transform: rotate(0);
	  }
	  51% {
		width: 0px;
		top: 8px;
		transform: rotate(-45deg);
	  }
	  100% {
		width: 10px;
		top: 8px;
		transform: rotate(-45deg);
	  }
	}
	@-webkit-keyframes firework {
	  0% {
		opacity: 1;
		box-shadow: 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0;
	  }
	  30% {
		opacity: 1;
	  }
	  100% {
		opacity: 0;
		box-shadow: 0 -15px 0 0px #4F29F0, 14px -8px 0 0px #4F29F0, 14px 8px 0 0px #4F29F0, 0 15px 0 0px #4F29F0, -14px 8px 0 0px #4F29F0, -14px -8px 0 0px #4F29F0;
	  }
	}
	@keyframes firework {
	  0% {
		opacity: 1;
		box-shadow: 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0;
	  }
	  30% {
		opacity: 1;
	  }
	  100% {
		opacity: 0;
		box-shadow: 0 -15px 0 0px #4F29F0, 14px -8px 0 0px #4F29F0, 14px 8px 0 0px #4F29F0, 0 15px 0 0px #4F29F0, -14px 8px 0 0px #4F29F0, -14px -8px 0 0px #4F29F0;
	  }
	}