styles.css

/* Gradient page curl from: https://codepen.io/JoostKiens/pen/sIwmb */
:root {
  --theme: #cacbcb;
}

body {
  background-color: var(--theme);
  color: #353434;
  font-family: "Coming Soon", cursive;
  margin: 0;
  transition: 0.15s background-color;
}

.sticky-note {
  --buffer: 15px;
  box-shadow: 7px -7px 12px rgba(0, 0, 0, 0.05);
  width: 250px;
  max-width: calc(100% - (var(--buffer) * 2));
  min-height: 250px;
  padding: var(--buffer);
  transform: rotate3d(0, 0, 1, -3deg);
}
.sticky-note:before {
  content: "";
  position: relative;
  width: calc(100% + (var(--buffer) * 2));
  height: 35px;
  left: -15px;
  top: -15px;
  display: block;
  background-color: rgba(0, 0, 0, 0.06);
}
.sticky-note li[contenteditable] {
  outline: 0;
}
.sticky-note li[contenteditable]:last-child:empty:after {
  content: "";
  border-left: 2px solid #353434;
  animation: blink 1.3s steps(2, end) infinite;
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.sticky-note li[contenteditable]:focus + li:after {
  content: none !important;
}

.yellow {
  background-color: #F5F58A;
}

.page-curl.yellow:after {
  background-image: linear-gradient(45deg, var(--theme), var(--theme) 45%, #fcfcda 50%, #fbfbd0 50%, #F5F58A 56%, #efef44 62%, #eeee3a 80%, #d4d412 100%);
}

/*
.page-curl.yellow:after {
	background-image: linear-gradient(
		45deg, 
		$light, 
		mix($light, lighten($hex, 30%), $weight: 25%) 45%,
		lighten($hex, 17%) 50%, 
		lighten($hex, 15%) 50%, 
		$hex 56%,
		darken($hex, 15%) 62%, 
		darken($hex, 17%) 80%, 
		darken($hex, 30%) 100% 
	);

	@include dark() {
		background-image: linear-gradient(
			45deg, 
			$dark, 
			mix($dark, darken($hex, 30%), $weight: 100%) 45%,
			darken($hex, 17%) 50%,
			darken($hex, 15%) 50%,
			$hex 56%,
			lighten($hex, 15%) 62%,
			lighten($hex, 17%) 80%,
			lighten($hex, 30%) 100%
		);
	}
}
*/
.purple {
  background-color: #acacf1;
}

.page-curl.purple:after {
  background-image: linear-gradient(45deg, var(--theme), var(--theme) 45%, #f6f6fe 50%, #ededfc 50%, #acacf1 56%, #6b6be6 62%, #6262e4 80%, #2929db 100%);
}

/*
.page-curl.purple:after {
	background-image: linear-gradient(
		45deg, 
		$light, 
		mix($light, lighten($hex, 30%), $weight: 25%) 45%,
		lighten($hex, 17%) 50%, 
		lighten($hex, 15%) 50%, 
		$hex 56%,
		darken($hex, 15%) 62%, 
		darken($hex, 17%) 80%, 
		darken($hex, 30%) 100% 
	);

	@include dark() {
		background-image: linear-gradient(
			45deg, 
			$dark, 
			mix($dark, darken($hex, 30%), $weight: 100%) 45%,
			darken($hex, 17%) 50%,
			darken($hex, 15%) 50%,
			$hex 56%,
			lighten($hex, 15%) 62%,
			lighten($hex, 17%) 80%,
			lighten($hex, 30%) 100%
		);
	}
}
*/
.green {
  background-color: #84ef84;
}

.page-curl.green:after {
  background-image: linear-gradient(45deg, var(--theme), var(--theme) 45%, #d1f9d1 50%, #c8f8c8 50%, #84ef84 56%, #40e640 62%, #37e537 80%, #19c119 100%);
}

/*
.page-curl.green:after {
	background-image: linear-gradient(
		45deg, 
		$light, 
		mix($light, lighten($hex, 30%), $weight: 25%) 45%,
		lighten($hex, 17%) 50%, 
		lighten($hex, 15%) 50%, 
		$hex 56%,
		darken($hex, 15%) 62%, 
		darken($hex, 17%) 80%, 
		darken($hex, 30%) 100% 
	);

	@include dark() {
		background-image: linear-gradient(
			45deg, 
			$dark, 
			mix($dark, darken($hex, 30%), $weight: 100%) 45%,
			darken($hex, 17%) 50%,
			darken($hex, 15%) 50%,
			$hex 56%,
			lighten($hex, 15%) 62%,
			lighten($hex, 17%) 80%,
			lighten($hex, 30%) 100%
		);
	}
}
*/
.orange {
  background-color: #ffbc42;
}

.page-curl.orange:after {
  background-image: linear-gradient(45deg, var(--theme), var(--theme) 45%, #ffdb99 50%, #ffd78f 50%, #ffbc42 56%, #f59e00 62%, #ea9700 80%, #a86c00 100%);
}

/*
.page-curl.orange:after {
	background-image: linear-gradient(
		45deg, 
		$light, 
		mix($light, lighten($hex, 30%), $weight: 25%) 45%,
		lighten($hex, 17%) 50%, 
		lighten($hex, 15%) 50%, 
		$hex 56%,
		darken($hex, 15%) 62%, 
		darken($hex, 17%) 80%, 
		darken($hex, 30%) 100% 
	);

	@include dark() {
		background-image: linear-gradient(
			45deg, 
			$dark, 
			mix($dark, darken($hex, 30%), $weight: 100%) 45%,
			darken($hex, 17%) 50%,
			darken($hex, 15%) 50%,
			$hex 56%,
			lighten($hex, 15%) 62%,
			lighten($hex, 17%) 80%,
			lighten($hex, 30%) 100%
		);
	}
}
*/
p, .text {
  font-size: 1em;
}

.strike {
  text-decoration: line-through;
  opacity: 0.75;
}

.centered-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.page-curl {
  --curl: 50px;
  position: relative;
}
.page-curl:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--curl);
  height: var(--curl);
  transition: 0.15s background-image;
  box-shadow: 3px -3px 3px rgba(0, 0, 0, 0.05);
}

.colour-picker {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 20px 0;
  padding: 0;
}
.colour-picker li {
  width: 30px;
  height: 30px;
  margin: 0 15px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  cursor: pointer;
}

.theme {
  position: fixed;
  bottom: 0;
  right: 0;
  margin: 10px 20px;
}

.theme svg {
  cursor: pointer;
  fill: #353434;
  transition: 0.15s fill;
}
.theme svg:before {
  content: attr(title);
  content: "Test";
  color: red;
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root {
    --theme: #353434;
  }

  .theme svg {
    fill: #cacbcb;
  }
}

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