.canvas-toucan {
  --bg: rgb(184, 165, 201);
}
.canvas-toucan * {
  position: absolute;
}
.canvas-toucan .face {
  width: 25%;
  aspect-ratio: 0.5;
  background: radial-gradient(circle at 25% 33%, rgb(72, 43, 87) 9%, transparent 10%), radial-gradient(circle at 0% 50%, whitesmoke 45%, rgb(72, 43, 87) 46%);
  border-radius: 0 50rem 50rem 0;
  top: 15%;
  left: 50%;
  z-index: 1;
}
.canvas-toucan .body {
  width: 25%;
  aspect-ratio: 0.5;
  background: radial-gradient(circle at 100% 100%, blueviolet 60%, transparent 61%), rgb(72, 43, 87) 46%;
  border-radius: 50rem 0 0 50rem;
  top: 40%;
  left: 25%;
}
.canvas-toucan .beak {
  width: 45%;
  height: 20%;
  background: linear-gradient(to right, rgb(72, 43, 87) 40%, rgb(247, 199, 7) 40%, rgb(247, 199, 7) 54%, hotpink 54%);
  border-radius: 4rem 4rem 0 0;
  top: 15%;
  left: 20%;
}

.canvas-clock {
  --bg: lightblue;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

.canvas-clock .border {
  width: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(to bottom right, salmon 35%, transparent 35%, transparent 37%, salmon 37%, salmon 40%, transparent 40%), crimson;
  position: relative;
  margin: auto;
  top: 30%;
  border: 0.2rem solid firebrick;
  box-shadow: -0.4rem 0.3rem cadetblue;
}

.canvas-clock .inner {
  width: 90%;
  aspect-ratio: 1;
  border-radius: inherit;
  background-color: rgb(255, 255, 255);
  box-shadow: 0.3rem 0.3rem darksalmon;
  position: relative;
  top: 5%;
  left: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.canvas-clock .inner span {
  position: absolute;
  font-size: 1.2rem;
  font-weight: 700;
  color: rgb(62, 61, 61);
}
.canvas-clock .inner span:nth-of-type(12) {
  top: 2%;
}
.canvas-clock .inner span:first-of-type {
  top: 9%;
  right: 26%;
}
.canvas-clock .inner span:nth-of-type(2) {
  top: 23%;
  right: 10%;
}
.canvas-clock .inner span:nth-of-type(3) {
  right: 2%;
}
.canvas-clock .inner span:nth-of-type(4) {
  bottom: 20%;
  right: 10%;
}
.canvas-clock .inner span:nth-of-type(5) {
  bottom: 9%;
  right: 26%;
}
.canvas-clock .inner span:nth-of-type(6) {
  bottom: 2%;
}
.canvas-clock .inner span:nth-of-type(7) {
  bottom: 7%;
  left: 26%;
}
.canvas-clock .inner span:nth-of-type(8) {
  bottom: 20%;
  left: 10%;
}
.canvas-clock .inner span:nth-of-type(9) {
  left: 2%;
}
.canvas-clock .inner span:nth-of-type(10) {
  top: 25%;
  left: 8%;
}
.canvas-clock .inner span:nth-of-type(11) {
  top: 9%;
  left: 24%;
}

.canvas-clock .arrows {
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, transparent 45%, rgba(191, 231, 231, 0.2) 45%, rgba(191, 231, 231, 0.2) 55%, transparent 55%, transparent 60%, rgba(191, 231, 231, 0.2) 60%), rgba(159, 220, 220, 0.236);
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
}
.canvas-clock .arrows::after {
  content: "";
  position: absolute;
  background-color: rgb(62, 61, 61);
  aspect-ratio: 1;
  border-radius: 50%;
  width: 4%;
  top: 48%;
}

.canvas-clock .min {
  width: 1%;
  height: 20%;
  background-color: rgb(62, 61, 61);
  border-radius: 2rem;
  position: absolute;
  top: 30%;
  transform-origin: bottom center;
  animation: clock 2s 1s infinite;
}

.canvas-clock .sec {
  width: 1%;
  height: 10%;
  background-color: rgb(62, 61, 61);
  border-radius: 2rem;
  position: absolute;
  top: 40%;
  left: 50%;
  /* transform: rotate(20deg); */
  transform-origin: bottom center;
  animation: clock 3s infinite;
}

.canvas-clock .hours {
  width: 1%;
  height: 30%;
  background-color: indianred;
  border-radius: 2rem;
  position: absolute;
  top: 19%;
  left: 50%;
  /* transform: rotate(90deg); */
  transform-origin: 0% 100%;
  animation: clock 0.5s infinite linear;
}

@keyframes clock {
  to {
    transform: rotate(360deg);
  }
}
*::after, *::before {
  content: "";
  position: absolute;
}

.canvas-ramen {
  --bg: rgb(161, 209, 226);
}

.canvas-ramen > * {
  position: relative;
}

.canvas-ramen .bowl {
  width: 160px;
  height: 80px;
  background: linear-gradient(to bottom, transparent 18%, #dd1155 18%, #dd1155 25%, transparent 25%, transparent 35%, #0096c7 35%, #0096c7 45%, transparent 45%), white;
  border: 4px solid #1A237E;
  margin: auto;
  top: 190px;
  border-radius: 5% 5% 40% 40%;
  box-shadow: inset -17px 0px rgba(69, 90, 100, 0.3);
  z-index: 4;
}

.canvas-ramen .bowl:before {
  background: white;
  border: inherit;
  width: 40%;
  height: 10px;
  border-radius: 10%;
  left: 29%;
  top: 100%;
  box-shadow: inset -15px 0 rgba(69, 90, 100, 0.3);
}

.canvas-ramen .bowl:after {
  background: rgba(69, 90, 100, 0.5);
  width: 140px;
  height: 15px;
  border-radius: 50%;
  left: 5%;
  top: 160%;
}

@keyframes shadow {
  to {
    transform: scale(0.95) translateY(0);
  }
}
@keyframes bowl {
  to {
    transform: translateY(5px);
  }
}
.canvas-ramen .ramen {
  background: radial-gradient(circle, transparent 25%, #1A237E 26%, #1A237E 32%, transparent 33%, transparent 50%, #1A237E 51%, #1A237E 56%, transparent 57%), conic-gradient(transparent 5%, #fae3c6 6%, #fae3c6 10%, transparent 11%), #ffc300;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid #1A237E;
  margin: auto;
  top: 85px;
  left: 20px;
  z-index: 2;
  box-shadow: inset 40px -40px rgba(195, 111, 9, 0.6);
}

.canvas-ramen .ramen:after {
  background: radial-gradient(circle, transparent 25%, #1A237E 26%, #1A237E 32%, transparent 33%, transparent 50%, #1A237E 51%, #1A237E 56%, transparent 57%), conic-gradient(transparent 85%, #fae3c6 85%, #fae3c6 95%, transparent 95%), #ffc300;
  width: inherit;
  height: inherit;
  border: inherit;
  border-radius: inherit;
  top: -12px;
  left: -45px;
  box-shadow: inset -15px -35px rgba(195, 111, 9, 0.6);
}

.canvas-ramen .ramen-two {
  width: 14px;
  height: 27px;
  border: 4px solid #1A237E;
  border-radius: 5px 5px 25px 25px;
  margin: auto;
  top: 28px;
  z-index: 4;
  left: 45px;
  background: linear-gradient(#fae3c6 15%, transparent 16%, transparent 40%, #fae3c6 41%, #fae3c6 70%, transparent 71%), #ffc300;
}

.canvas-ramen .ramen-two:before {
  width: inherit;
  height: 42px;
  border: inherit;
  border-radius: inherit;
  left: 7px;
  top: -4px;
  background: linear-gradient(#fae3c6 15%, transparent 16%, transparent 25%, #fae3c6 26%, #fae3c6 40%, transparent 41%), #ffc300;
  box-sizing: border-box;
}

.canvas-ramen .ramen-two:after {
  width: inherit;
  height: 34px;
  border: inherit;
  border-radius: inherit;
  left: 18px;
  top: -4px;
  background: linear-gradient(#fae3c6 15%, transparent 16%, transparent 30%, #fae3c6 31%, #fae3c6 50%, transparent 51%), #ffc300;
  box-sizing: border-box;
}

.canvas-ramen .ramen-three {
  background: linear-gradient(to right, transparent 20%, #1A237E 21%, #1A237E 28%, transparent 29%, transparent 44%, #1A237E 45%, #1A237E 52%, transparent 53%, transparent 68%, #1A237E 69%, #1A237E 76%, transparent 77%), linear-gradient(to bottom, #fae3c6 5%, transparent 6%, transparent 10%, rgba(195, 111, 9, 0.6) 11%, rgba(195, 111, 9, 0.6) 35%, transparent 36%, transparent 45%, #fae3c6 46%, #fae3c6 65%, transparent 65%), #ffc300;
  width: 50px;
  height: 110px;
  border-radius: 5px;
  border: 4px solid #1A237E;
  margin: auto;
  top: -110px;
  left: -19px;
  z-index: 1;
}

.canvas-ramen .chopstick {
  background: #dd1155;
  border: 4px solid #1A237E;
  width: 180px;
  height: 15px;
  border-radius: 10px;
  margin: auto;
  top: -214px;
  left: 35px;
  box-shadow: 0 2px inset #fae3c6;
}

.canvas-ramen .chopstick:before {
  background: #B71C1C;
  height: 100%;
  border: inherit;
  aspect-ratio: 1;
  border-radius: 50%;
  left: 94%;
  top: -3.5px;
}

.canvas-ramen .chopstick.behind {
  z-index: 0;
}

.canvas-ramen .chopstick.front {
  z-index: 1;
  transform: rotate(7deg);
  top: -210px;
  left: 33px;
}

.canvas-ramen .seaweed {
  background: #70e000;
  border: 4px solid #1A237E;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  margin: auto;
  top: -150px;
  left: -60px;
  transform: rotate(25deg);
}

.canvas-ramen .green-stuff {
  background: #70e000;
  border: 4px solid #1A237E;
  width: 21px;
  height: 12px;
  border-radius: 4px;
  margin: auto;
  top: -205px;
  z-index: 5;
  transform: rotate(25deg);
}

.canvas-ramen .green-stuff:before {
  background: inherit;
  border: 4px solid #1A237E;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  transform: rotate(-89deg);
  box-sizing: inherit;
  top: 21px;
  left: -8px;
}

.canvas-ramen .green-stuff:after {
  background: inherit;
  border: 4px solid #1A237E;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  transform: rotate(52deg);
  box-sizing: inherit;
  top: -2px;
  left: 27px;
}

.canvas-ramen .egg {
  background: linear-gradient(rgba(69, 90, 100, 0.4), rgba(69, 90, 100, 0.2)), white;
  border: 4px solid #1A237E;
  border-radius: 0 25px 25px 0;
  height: 50px;
  width: 25px;
  margin: auto;
  top: -210px;
  left: 70px;
  transform: rotate(15deg);
}

.canvas-ramen .egg:before {
  background: white;
  height: inherit;
  width: inherit;
  border: inherit;
  border-radius: 50%;
  top: -4px;
  left: -20px;
  transform: rotate(10deg);
}

.canvas-ramen .egg:after {
  background: #ffc300;
  height: 19px;
  width: 13px;
  border: none;
  border-radius: 50%;
  top: 12px;
  left: -10px;
  transform: rotate(10deg);
}

.canvas-ramen .bowl-detail {
  background: rgba(255, 255, 255, 0.6);
  width: 20px;
  height: 50px;
  top: -220px;
  margin: auto;
  z-index: 6;
  border-radius: 20px;
  left: -40px;
}

.canvas-egg {
  --bg: rgb(239, 137, 99);
  position: relative;
}
.canvas-egg .pan {
  position: absolute;
  background: radial-gradient(circle at 30% 30%, rgb(90, 89, 89) 1%, transparent 1.1%), radial-gradient(circle at 32% 31%, rgb(90, 89, 89) 0.8%, transparent 0.9%), radial-gradient(circle at 29% 33%, rgb(90, 89, 89) 0.8%, transparent 0.9%), radial-gradient(circle at 67% 25%, rgb(90, 89, 89) 0.8%, transparent 0.9%), radial-gradient(circle at 69% 27%, rgb(90, 89, 89) 0.6%, transparent 0.7%), radial-gradient(circle at 59% 77%, rgb(90, 89, 89) 0.6%, transparent 0.7%), radial-gradient(circle at 49% 77%, rgb(90, 89, 89) 0.8%, transparent 0.9%), radial-gradient(circle at 45% 75%, rgb(90, 89, 89) 1%, transparent 1.1%), radial-gradient(circle at 47% 77%, rgb(90, 89, 89) 0.7%, transparent 0.8%), radial-gradient(ellipse at center, transparent 68%, rgb(90, 89, 89) 69%), radial-gradient(ellipse at center, #212121 60%, #131213 60%);
  width: 65%;
  aspect-ratio: 1.1;
  border-radius: 50%;
  top: 17.5%;
  left: 17.5%;
  box-shadow: 0.3rem 0.3rem 0 rgb(215, 111, 99);
  border: 3px solid #131213;
}
.canvas-egg .pan::after {
  width: 20%;
  height: 6%;
  background-color: silver;
  content: "";
  position: absolute;
  top: 50%;
  right: -20%;
  box-shadow: 0.2rem 0.4rem 0 rgb(215, 111, 99), inset 0.3rem 0rem 0 rgba(22, 22, 22, 0.205);
}
.canvas-egg .pan::before {
  width: 25%;
  height: 10%;
  background-color: #131213;
  top: 48%;
  right: -30%;
  z-index: 1;
  content: "";
  position: absolute;
  box-shadow: 0.3rem 0.3rem 0 rgb(215, 111, 99), inset 0 0.3rem 0 rgba(192, 192, 192, 0.271);
}
.canvas-egg .pan .egg {
  background: radial-gradient(circle at 22% 24%, white 3%, transparent 3%), radial-gradient(circle at 17% 32%, white 2%, transparent 2%), radial-gradient(circle at 25% 34%, white 2%, transparent 2%), radial-gradient(circle at 67% 74%, rgba(249, 174, 83, 0.448) 3%, transparent 3%), radial-gradient(circle at 74% 71%, rgba(249, 174, 83, 0.448) 3%, transparent 3%), radial-gradient(circle at 72% 79%, rgba(249, 174, 83, 0.448) 2%, transparent 2%), radial-gradient(circle at 82% 49%, rgba(249, 174, 83, 0.448) 2.5%, transparent 2.5%), radial-gradient(circle at center, transparent 60%, rgb(245, 229, 203) 60%), cornsilk;
  border-radius: 50%;
  aspect-ratio: 1.1;
  width: 50%;
  position: absolute;
  top: 24%;
  left: 28%;
  box-shadow: 0.4rem 0.4rem 0 #131213;
}
.canvas-egg .pan .egg::after {
  content: "";
  position: absolute;
  width: 14%;
  height: 5%;
  background-color: cornsilk;
  border-radius: 50%;
  bottom: -3%;
  left: 75%;
}
.canvas-egg .pan .egg .yolk {
  background: radial-gradient(ellipse at 25% 30%, cornsilk 10%, transparent 10%), radial-gradient(circle at center, rgb(255, 217, 0) 60%, transparent 60%), radial-gradient(ellipse at 25% 30%, orange 45%, transparent 45%), radial-gradient(ellipse at 75% 70%, rgb(255, 157, 0) 40%, transparent 40%), gold;
  aspect-ratio: 1;
  width: 40%;
  border-radius: 50%;
  position: absolute;
  top: 30%;
  left: 30%;
}

.canvas-bookshelf {
  --bg: beige;
  position: relative;
}
.canvas-bookshelf * {
  position: absolute;
}
.canvas-bookshelf .bookshelf {
  width: 60%;
  height: 10%;
  background: linear-gradient(to bottom, transparent 70%, rgba(165, 42, 42, 0.382) 70%), chocolate;
  border-radius: 0.3rem;
  left: 20%;
  top: 55%;
  border: 3px solid rgb(74, 27, 27);
  box-shadow: 0.3rem 0.5rem 0 rgb(232, 221, 196);
}
.canvas-bookshelf .bookshelf::after, .canvas-bookshelf .bookshelf::before {
  content: "";
  background: linear-gradient(to bottom, rgba(165, 42, 42, 0.382) 30%, transparent 30%), chocolate;
  border-radius: inherit;
  height: 80%;
  width: 10%;
  border: inherit;
  top: 100%;
  box-shadow: 0.2rem 0.2rem 0 rgb(232, 221, 196);
}
.canvas-bookshelf .bookshelf::after {
  left: 15%;
}
.canvas-bookshelf .bookshelf::before {
  right: 15%;
}
.canvas-bookshelf .book {
  border: inherit;
  border-radius: 0.4rem;
  width: var(--width);
  height: var(--height);
  top: calc(var(--height) * -1);
}
.canvas-bookshelf .book:first-of-type {
  --width: 10%;
  --height: 200%;
  background: linear-gradient(to bottom, transparent 10%, rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.8) 17%, transparent 17%, transparent 25%, rgba(255, 255, 255, 0.8) 25%, rgba(255, 255, 255, 0.8) 30%, transparent 30%), rgb(255, 16, 64);
  left: 20%;
}
.canvas-bookshelf .book:nth-of-type(2) {
  --width: 10%;
  --height: 140%;
  background: linear-gradient(to bottom, transparent 20%, rgb(61, 167, 61) 20%, rgb(61, 167, 61) 70%, transparent 70%), rgb(139, 220, 58);
  left: 29%;
}
.canvas-bookshelf .book:nth-of-type(3) {
  --width: 12%;
  --height: 180%;
  background: linear-gradient(to bottom, transparent 20%, white 20%, white 40%, transparent 40%, transparent 70%, white 70%, white 80%, transparent 80%), rgb(42, 227, 218);
  left: 38%;
}
.canvas-bookshelf .book:nth-of-type(4) {
  --width: 7%;
  --height: 240%;
  background: linear-gradient(to top, hotpink 70%, rgb(172, 58, 254) 70%);
  left: 49%;
}
.canvas-bookshelf .book:nth-of-type(5) {
  --width: 13%;
  --height: 200%;
  background: linear-gradient(to bottom, gold 30%, orange 30%, orange 70%, gold 70%);
  left: 55%;
}
.canvas-bookshelf .book:nth-of-type(6) {
  --width: 12%;
  --height: 160%;
  background: linear-gradient(to left, rgb(23, 125, 235) 33%, blue 33%, blue 66%, rgb(23, 125, 235) 66%);
  left: 67%;
}

.canvas-hamburger {
  --bg: rgb(235, 222, 168);
  position: relative;
}
.canvas-hamburger * {
  position: absolute;
}
.canvas-hamburger .shadow {
  width: 55%;
  height: 4%;
  background-color: rgba(66, 52, 44, 0.092);
  border-radius: 50%;
  top: 74%;
  left: 22.5%;
}
.canvas-hamburger .bread {
  background-color: rgb(230, 138, 33);
  width: 50%;
}
.canvas-hamburger .bread.bottom {
  height: 10%;
  border-radius: 0 0 3rem 3rem;
  left: 25%;
  top: 65%;
  overflow: hidden;
}
.canvas-hamburger .bread.bottom::after {
  content: "";
  width: 75%;
  height: 80%;
  border-radius: 5rem;
  background-color: rgb(255, 149, 0);
  top: 40%;
}
.canvas-hamburger .meat {
  background-color: brown;
  width: 50%;
  height: 7%;
  border-radius: 3rem;
  left: 25%;
  top: 58%;
  overflow: hidden;
}
.canvas-hamburger .meat .marking {
  width: 5%;
  height: 80%;
  background-color: rgb(93, 24, 24);
  border-radius: 3rem;
  left: 10%;
  top: -25%;
  transform: rotate(45deg);
}
.canvas-hamburger .meat .marking:nth-of-type(2) {
  left: 22%;
}
.canvas-hamburger .meat .marking:nth-of-type(4) {
  left: 46%;
}
.canvas-hamburger .meat .marking:nth-of-type(3) {
  left: 34%;
}
.canvas-hamburger .meat .marking:nth-of-type(5) {
  left: 90%;
}
.canvas-hamburger .cheese {
  background: linear-gradient(to right, rgb(244, 210, 20) 60%, goldenrod 50%);
  width: 50%;
  height: 3%;
  left: 25%;
  top: 55%;
}
.canvas-hamburger .cheese::after {
  content: "";
  width: 25%;
  aspect-ratio: 1;
  background: linear-gradient(45deg, rgb(244, 210, 20) 50%, goldenrod 50%);
  right: 17%;
  top: -115%;
  transform: rotate(45deg);
}
.canvas-hamburger .lettuce {
  background: radial-gradient(ellipse, rgb(34, 144, 34) 10%, transparent) 30% 20%/20% 30%, linear-gradient(to bottom, yellowgreen 30%, rgb(5, 112, 5) 30%);
  width: 48%;
  height: 6%;
  top: 50%;
  left: 26%;
  border-radius: 1rem;
}
.canvas-hamburger .onions {
  background: linear-gradient(to right, transparent 10%, plum 10%, plum 40%, transparent 40%), purple;
  width: 17%;
  height: 3%;
  left: 31%;
  top: 47.5%;
}
.canvas-hamburger .onions::after {
  content: "";
  width: 100%;
  height: 100%;
  background: inherit;
  left: 125%;
}
.canvas-hamburger .bread.top {
  height: 20%;
  border-radius: 5rem 5rem 0 0;
  left: 25%;
  top: 28%;
  overflow: hidden;
}
.canvas-hamburger .bread.top::after {
  content: "";
  width: 95%;
  height: 80%;
  border-radius: 5rem;
  background-color: rgb(255, 149, 0);
  bottom: 40%;
  left: -20%;
}
.canvas-hamburger .bread.top .seed {
  width: 10%;
  height: 6%;
  background-color: cornsilk;
  top: 20%;
  left: 22%;
  z-index: 1;
  border-radius: 50%;
  transform: rotate(-35deg);
}
.canvas-hamburger .bread.top .seed:nth-of-type(2) {
  left: 42%;
  transform: rotate(-25deg);
}
.canvas-hamburger .bread.top .seed:nth-of-type(3) {
  left: 64%;
  transform: rotate(-30deg);
}
.canvas-hamburger .bread.top .seed:nth-of-type(4) {
  left: 30%;
  top: 40%;
  transform: rotate(36deg);
}
.canvas-hamburger .bread.top .seed:nth-of-type(5) {
  left: 50%;
  top: 40%;
  transform: rotate(45deg);
}
.canvas-hamburger .bread.top .seed:nth-of-type(6) {
  left: 70%;
  top: 40%;
  transform: rotate(38deg);
}
.canvas-hamburger .bread.top .seed:nth-of-type(7) {
  left: 13%;
  top: 40%;
  transform: rotate(25deg);
}
.canvas-hamburger .stick {
  width: 3%;
  height: 15%;
  background-color: brown;
  border-radius: 0 0 2rem 2rem;
  left: 54%;
  top: 17%;
  transform: rotate(15deg);
}
.canvas-hamburger .olive {
  width: 12%;
  height: 8%;
  background-color: forestgreen;
  border-radius: 50%;
  left: 50%;
  top: 20%;
  transform: rotate(-5deg);
  box-shadow: inset -0.5rem -0.5rem rgb(20, 112, 20);
}
.canvas-hamburger .olive::after {
  content: "";
  aspect-ratio: 1;
  width: 30%;
  background-color: rgb(101, 28, 28);
  border-radius: 50%;
  top: 20%;
  left: 10%;
  box-shadow: inset 0.2rem -0.1rem rgb(35, 9, 9);
}

@font-face {
  font-family: "digital";
  src: url(../fonts/digital-7\ \(mono\ italic\).ttf);
}
.canvas-calculator {
  --bg: rgb(16, 190, 190);
  position: relative;
}
.canvas-calculator * {
  position: absolute;
}
.canvas-calculator .border {
  width: 40%;
  aspect-ratio: 0.96;
  background-color: rgb(255, 115, 0);
  left: 30%;
  top: 30%;
  border-radius: 0.5rem;
  border: 3px solid rgb(81, 25, 25);
  box-shadow: -0.4rem 0.5rem 0 rgba(0, 43, 128, 0.122);
}
.canvas-calculator .calculator {
  width: 100%;
  aspect-ratio: 1;
  background-color: orange;
  border-radius: inherit;
  border-bottom: 3px solid rgb(81, 25, 25);
  box-shadow: inset -0.5rem 0 rgb(255, 204, 0);
}
.canvas-calculator .screen {
  width: 80%;
  height: 20%;
  border: 3px solid rgb(81, 25, 25);
  border-radius: inherit;
  background-color: lightblue;
  left: 10%;
  top: 10%;
  font-family: digital, monospace;
  font-size: 1.3em;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline: 0.2rem;
  color: rgb(81, 25, 25);
}
.canvas-calculator .screen::after {
  content: "88888888";
  opacity: 0.2;
}
.canvas-calculator .buttons {
  width: 100%;
  height: 60%;
  bottom: 0;
  display: flex;
}
.canvas-calculator .operators {
  width: 66%;
  height: 100%;
}
.canvas-calculator .operator {
  width: 35%;
  aspect-ratio: 1;
  background-color: hotpink;
  border-radius: 0.3rem;
  border: 3px solid rgb(81, 25, 25);
}
.canvas-calculator .operator.plus {
  left: 17%;
  top: 0%;
}
.canvas-calculator .operator.plus::after {
  content: "";
  width: 50%;
  height: 10%;
  background-color: rgb(82, 19, 99);
  left: 25%;
  top: 45%;
}
.canvas-calculator .operator.plus::before {
  content: "";
  width: 10%;
  height: 50%;
  background-color: rgb(82, 19, 99);
  top: 25%;
  left: 45%;
}
.canvas-calculator .operator.minus {
  top: 0;
  right: 3%;
}
.canvas-calculator .operator.minus::after {
  content: "";
  width: 50%;
  height: 10%;
  background-color: rgb(82, 19, 99);
  left: 25%;
  top: 45%;
}
.canvas-calculator .operator.multiplication {
  bottom: 10%;
  left: 17%;
}
.canvas-calculator .operator.multiplication::after {
  content: "";
  width: 50%;
  height: 10%;
  background-color: rgb(82, 19, 99);
  left: 25%;
  top: 45%;
  transform: rotate(45deg);
}
.canvas-calculator .operator.multiplication::before {
  content: "";
  width: 50%;
  height: 10%;
  background-color: rgb(82, 19, 99);
  left: 25%;
  top: 45%;
  transform: rotate(-45deg);
}
.canvas-calculator .operator.division {
  bottom: 10%;
  right: 3%;
  background: radial-gradient(circle at 50% 70%, rgb(82, 19, 99) 8%, transparent 8%), radial-gradient(circle at 50% 30%, rgb(82, 19, 99) 8%, transparent 8%), hotpink;
}
.canvas-calculator .operator.division::after {
  content: "";
  width: 50%;
  height: 10%;
  background-color: rgb(82, 19, 99);
  left: 25%;
  top: 45%;
}
.canvas-calculator .equal {
  height: 90%;
  width: 20%;
  background-color: rgb(146, 59, 226);
  border-radius: 0.5rem;
  border: 3px solid rgb(81, 25, 25);
  right: 10%;
}
.canvas-calculator .equal::after, .canvas-calculator .equal::before {
  content: "";
  width: 50%;
  height: 4%;
  background-color: rgb(82, 19, 99);
  left: 25%;
  top: 45%;
}
.canvas-calculator .equal::before {
  top: 55%;
}

.canvas-coffee-machine {
  --bg: rgb(180, 255, 180);
  position: relative;
}
.canvas-coffee-machine * {
  position: absolute;
}
.canvas-coffee-machine .machine {
  width: 40%;
  height: 45%;
  background-color: whitesmoke;
  border-radius: 20% 20% 0 0;
  left: 30%;
  top: 30%;
  box-shadow: -0.3rem 0 0 white inset, -1rem 0 0 silver inset;
  border: 3px solid rgb(50, 45, 59);
}
.canvas-coffee-machine .commands-pannel {
  width: 110%;
  height: 25%;
  background-color: orange;
  border-radius: 0.5rem 0.5rem 0.3rem 0.3rem;
  left: -5%;
  border: inherit;
  top: 5%;
  box-shadow: inset -0.2rem 0 rgb(255, 204, 0), inset -1rem 0 rgba(109, 64, 18, 0.499), inset 0 -0.2rem rgba(109, 63, 18, 0.419);
}
.canvas-coffee-machine .button {
  width: 10%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: inherit;
  top: 25%;
}
.canvas-coffee-machine .button:first-of-type {
  background-color: greenyellow;
  box-shadow: inset -0.2rem -0.15rem 0 rgba(0, 128, 0, 0.323), 0 0 0.5rem greenyellow;
  left: 10%;
}
.canvas-coffee-machine .button:nth-of-type(2) {
  background-color: rgb(254, 249, 249);
  box-shadow: inset -0.2rem -0.15rem 0 silver;
  right: 10%;
}
.canvas-coffee-machine .knob {
  border-radius: 50%;
  border: inherit;
  width: 18%;
  aspect-ratio: 1;
  background: radial-gradient(circle, transparent 30%, black 30%, black 38%, transparent 40%), rgb(229, 227, 227);
  top: 10%;
  left: 41%;
}
.canvas-coffee-machine .knob::after {
  content: "";
  width: 70%;
  height: 10%;
  border-radius: 0.2rem;
  border: inherit;
  background-color: whitesmoke;
  top: 37%;
  left: 8%;
  transform: rotate(-35deg);
}
.canvas-coffee-machine .machine-parts {
  width: 40%;
  height: 10%;
  border: inherit;
  background-color: whitesmoke;
  border-radius: 0 0 0.3rem 0.3rem;
  left: 30%;
  top: 29%;
  box-shadow: inset -0.4rem 0 silver;
}
.canvas-coffee-machine .machine-parts:after {
  content: "";
  background-color: inherit;
  border-radius: inherit;
  border: inherit;
  width: 60%;
  height: 30%;
  top: 100%;
  left: 19%;
  box-shadow: inset -0.5rem 0 silver;
}
.canvas-coffee-machine .filter-holder {
  width: 20%;
  height: 7%;
  border-radius: 0 0 0.2rem 0.2rem;
  border: inherit;
  background-color: inherit;
  left: 41%;
  top: 41.5%;
  box-shadow: inset -0.5rem 0 silver;
  z-index: 1;
}
.canvas-coffee-machine .filter-holder:after {
  content: "";
  width: 15%;
  aspect-ratio: 2;
  border: inherit;
  border-radius: 0 0 50% 50%;
  top: 100%;
  left: 37%;
  z-index: -1;
}
.canvas-coffee-machine .filter-holder:before {
  width: 50%;
  height: 3px;
  background-color: rgb(50, 45, 59);
  left: -55%;
  top: 35%;
}
.canvas-coffee-machine .filter-holder-handle {
  width: 20%;
  height: 5%;
  background-color: chocolate;
  border: inherit;
  border-radius: 2rem 0 0 2rem;
  top: 42.5%;
  left: 13%;
}
.canvas-coffee-machine .cup {
  width: 20%;
  aspect-ratio: 1.3;
  background-color: crimson;
  border: inherit;
  border-radius: 0 0 50rem 50rem;
  left: 40%;
  top: 70%;
  box-shadow: inset 0 0.1rem 0 rgba(245, 217, 217, 0.429), inset -0.3rem -0.3rem 0 rgba(87, 32, 1, 0.427);
}
.canvas-coffee-machine .cup::after {
  width: 50%;
  aspect-ratio: 1;
  border-right: 3px solid rgb(50, 45, 59);
  border-bottom: 3px solid rgb(50, 45, 59);
  border-radius: 50%;
  left: 85%;
  top: 5%;
  transform: rotate(-45deg);
  z-index: 0;
}
.canvas-coffee-machine .cup::before {
  width: 0.3rem;
  height: 175%;
  top: -180%;
  left: 48%;
  background-color: chocolate;
}
.canvas-coffee-machine .base {
  width: 110%;
  height: 15%;
  background-color: orange;
  border-radius: 0.3rem 0.3rem 0 0;
  bottom: -1%;
  left: -5%;
  box-shadow: inset -1rem 0 rgba(109, 64, 18, 0.499);
  border: inherit;
}
.canvas-coffee-machine .base::after {
  width: 80%;
  height: 20%;
  background-color: inherit;
  content: "";
  border-radius: inherit;
  border: inherit;
  top: -33%;
  left: 10%;
  box-shadow: inset -0.5rem 0 rgba(109, 64, 18, 0.499);
}
.canvas-coffee-machine .base::before {
  content: "";
  width: 150%;
  left: -25%;
  bottom: -15%;
  border-top: 0.2rem solid rgb(61, 3, 3);
}

.canvas-paw {
  --bg: hotpink;
  position: relative;
}
.canvas-paw * {
  position: absolute;
}
.canvas-paw .paw {
  width: 35%;
  height: 70%;
  background: linear-gradient(to bottom, rgb(239, 192, 6) 30%, transparent 30%), chocolate;
  bottom: 0;
  left: 32.5%;
  border-radius: 50rem 50rem 0 0;
}
.canvas-paw .circle {
  width: 90%;
  aspect-ratio: 1;
  background-color: rgb(239, 192, 6);
  border-radius: 50%;
  left: 5%;
  top: 0%;
}
.canvas-paw .heart {
  --color: chocolate;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle at 60% 65%, var(--color) 64%, rgba(0, 0, 0, 0) 65%) top left/50% 50%, radial-gradient(circle at 40% 65%, var(--color) 64%, rgba(0, 0, 0, 0) 65%) top right/50% 50%, conic-gradient(from -45deg at 50% 85.5%, var(--color) 90deg, rgba(0, 0, 0, 0) 0) bottom/100% 50%;
  background-repeat: no-repeat;
  left: 20%;
  top: 13%;
  transform: rotate(180deg);
}
.canvas-paw .finger {
  width: 35%;
  height: 20%;
  background: radial-gradient(chocolate 30%, transparent 30%), rgb(239, 192, 6);
  border-radius: 50%;
}
.canvas-paw .finger.one {
  left: -5%;
  top: 0%;
  transform: rotate(-10deg);
}
.canvas-paw .finger.two {
  left: 20%;
  top: -10%;
  transform: rotate(-5deg);
}
.canvas-paw .finger.three {
  left: 50%;
  top: -10%;
  transform: rotate(5deg);
}
.canvas-paw .finger.four {
  right: -5%;
  top: 0%;
  transform: rotate(10deg);
}

.canvas-park {
  --bg: papayawhip;
  position: relative;
}
.canvas-park * {
  position: absolute;
}
.canvas-park .ground {
  width: 80%;
  border-bottom: 3px solid rgb(71, 21, 3);
  top: 72%;
  left: 10%;
}
.canvas-park .bench {
  width: 40%;
  height: 10%;
  background: radial-gradient(circle at 15% 25%, rgb(71, 21, 3) 2%, transparent 2%), radial-gradient(circle at 15% 75%, rgb(71, 21, 3) 2%, transparent 2%), radial-gradient(circle at 85% 25%, rgb(71, 21, 3) 2%, transparent 2%), radial-gradient(circle at 85% 75%, rgb(71, 21, 3) 2%, transparent 2%), linear-gradient(to bottom, transparent 45%, rgb(71, 21, 3) 45%, rgb(71, 21, 3) 52%, transparent 50%), rgb(110, 28, 28);
  top: 50%;
  left: 30%;
  z-index: 1;
}
.canvas-park .bench::after {
  content: "";
  width: 110%;
  height: 40%;
  background: rgb(110, 28, 28);
  top: 140%;
  left: -5%;
}
.canvas-park .bench-feet {
  width: 4%;
  height: 5%;
  background-color: rgb(110, 28, 28);
  top: 67.5%;
  left: 33%;
}
.canvas-park .bench-feet::after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: inherit;
  top: -10%;
  left: 750%;
}
.canvas-park .bench-back {
  width: 3%;
  height: 18%;
  background-color: rgb(110, 28, 28);
  top: 47%;
  left: 34.5%;
}
.canvas-park .bench-back::after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: inherit;
  top: 0%;
  left: 940%;
}
.canvas-park .tree-trunk {
  width: 4px;
  height: 40%;
  background-color: rgb(71, 21, 3);
  top: 32%;
  left: 15%;
  z-index: 1;
}
.canvas-park .tree-trunk::after {
  content: "";
  width: 4px;
  height: 20%;
  background-color: inherit;
  top: 20%;
  transform: rotate(30deg);
  transform-origin: bottom center;
}
.canvas-park .tree-trunk::before {
  content: "";
  width: 4px;
  height: 15%;
  background-color: inherit;
  top: 50%;
  transform: rotate(-30deg);
  transform-origin: bottom center;
}
.canvas-park .tree-foliage {
  width: 15%;
  height: 40%;
  background: radial-gradient(circle at 25% 30%, orange 3%, transparent 3%), radial-gradient(circle at 75% 35%, orange 3%, transparent 3%), radial-gradient(circle at 15% 50%, rgb(249, 214, 157) 3%, transparent 3%), radial-gradient(circle at 30% 65%, orange 3%, transparent 3%), radial-gradient(circle at 70% 60%, orange 3%, transparent 3%), radial-gradient(circle at 66% 80%, rgb(249, 214, 157) 3%, transparent 3%), rgb(255, 200, 0);
  border-radius: 50%;
  left: 8%;
  top: 25%;
}
.canvas-park .tree-foliage.three {
  z-index: 1;
}
.canvas-park .tree-trunk.three {
  z-index: 2;
}
.canvas-park .tree-trunk.one {
  left: 83%;
  height: 30%;
  top: 42%;
}
.canvas-park .tree-trunk.two {
  left: 20%;
  height: 20%;
  top: 52%;
}
.canvas-park .tree-foliage.two {
  background-color: rgb(226, 58, 91);
  left: 12.5%;
  height: 30%;
  top: 37%;
}
.canvas-park .tree-foliage.one {
  left: 74%;
  height: 25%;
  width: 18%;
  border-radius: 1rem;
  top: 38%;
  background-color: rgb(255, 149, 0);
}
.canvas-park .leaves {
  width: 100%;
  height: 27%;
  bottom: 0;
}
.canvas-park .leaves span {
  width: 4%;
  height: 5%;
  background-color: var(--leaf);
  border-radius: 4rem 4rem 0 0;
}
.canvas-park .leaves span:first-of-type {
  --leaf: orange;
  top: 5%;
  left: 20%;
  transform: rotate(180deg);
}
.canvas-park .leaves span:nth-of-type(2) {
  --leaf: crimson;
  top: 3%;
  left: 10%;
}
.canvas-park .leaves span:nth-of-type(3) {
  --leaf: gold;
  top: 0;
  left: 14%;
}
.canvas-park .leaves span:nth-of-type(4) {
  --leaf: goldenrod;
  right: 10%;
}
.canvas-park .leaves span:nth-of-type(5) {
  --leaf: peru;
  right: 12%;
  top: 10%;
  transform: rotate(180deg);
}
.canvas-park .leaves span:nth-of-type(6) {
  --leaf: lightsalmon;
  right: 16%;
  top: 2%;
}
.canvas-park .leaves span:nth-of-type(7) {
  --leaf: coral;
  right: 20%;
}

.canvas-lemonade {
  --bg: palegoldenrod;
  position: relative;
}
.canvas-lemonade * {
  position: absolute;
}
.canvas-lemonade .table {
  width: 50%;
  height: 20%;
  background: linear-gradient(to right, transparent 10%, rgb(231, 176, 137) 10%) 10% 10%/9% 10%, rgb(182, 138, 85);
  top: 60%;
  left: 25%;
}
.canvas-lemonade .table::after {
  content: "";
  width: 110%;
  height: 10%;
  border-radius: 1rem;
  background-color: silver;
  top: -10%;
  left: -5%;
}
.canvas-lemonade .pillars {
  width: 5%;
  height: 15%;
  background-color: rgb(231, 176, 137);
  top: 43%;
  left: 25%;
}
.canvas-lemonade .pillars::after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: inherit;
  top: 0;
  left: 900%;
}
.canvas-lemonade .pitcher {
  width: 7%;
  height: 9%;
  background: linear-gradient(to bottom, transparent, rgb(255, 255, 110)), azure;
  top: 49%;
  left: 45%;
  border-radius: 0.2rem 0.2rem 0 0;
}
.canvas-lemonade .pitcher::after {
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, palegoldenrod 30%, transparent 30%), linear-gradient(to right, transparent 30%, azure 60%), transparent;
  width: 70%;
  aspect-ratio: 1;
  left: 70%;
  top: 20%;
}
.canvas-lemonade .top {
  width: 55%;
  height: 2%;
  background-color: rgb(182, 138, 85);
  border-radius: 1rem;
  top: 30%;
  left: 22.5%;
}
.canvas-lemonade .curtain {
  width: 50%;
  height: 15%;
  left: 25%;
  top: 32%;
}
.canvas-lemonade .curtain span {
  --width: calc(100% / 7);
  width: var(--width);
  height: 100%;
  background-color: var(--color);
  border-radius: 0 0 3rem 3rem;
  left: calc(var(--width) * var(--i));
}
.canvas-lemonade .curtain span:nth-child(odd) {
  --color: rgb(255, 255, 110);
}
.canvas-lemonade .curtain span:nth-child(even) {
  --color: rgb(249, 249, 249);
}
.canvas-lemonade .curtain span:first-of-type {
  --i: 0;
}
.canvas-lemonade .curtain span:nth-of-type(2) {
  --i: 1;
}
.canvas-lemonade .curtain span:nth-of-type(3) {
  --i: 2;
}
.canvas-lemonade .curtain span:nth-of-type(4) {
  --i: 3;
}
.canvas-lemonade .curtain span:nth-of-type(5) {
  --i: 4;
}
.canvas-lemonade .curtain span:nth-of-type(6) {
  --i: 5;
}
.canvas-lemonade .curtain span:nth-of-type(7) {
  --i: 6;
}
.canvas-lemonade .bushes {
  width: 20%;
  height: 10%;
  background: radial-gradient(circle at 36% 47%, rgb(231, 87, 116) 3%, transparent 3%), radial-gradient(circle at 26% 60%, rgb(231, 87, 116) 3%, transparent 3%), radial-gradient(circle at 50% 70%, rgb(231, 87, 116) 3%, transparent 3%), radial-gradient(circle at 60% 30%, rgb(231, 87, 116) 3%, transparent 3%), radial-gradient(circle at 40% 80%, rgb(231, 87, 116) 3%, transparent 3%), radial-gradient(circle at 20% 40%, rgb(231, 87, 116) 3%, transparent 3%), rgb(171, 238, 70);
  top: 70%;
  left: 10%;
  border-radius: 50rem 50rem 0 0;
}
.canvas-lemonade .bushes::after {
  content: "";
  width: 80%;
  height: 80%;
  background: radial-gradient(circle at 36% 47%, rgb(125, 19, 40) 3%, transparent 3%), radial-gradient(circle at 26% 60%, rgb(125, 19, 40) 3%, transparent 3%), radial-gradient(circle at 50% 70%, rgb(125, 19, 40) 3%, transparent 3%), radial-gradient(circle at 60% 30%, rgb(125, 19, 40) 3%, transparent 3%), radial-gradient(circle at 40% 80%, rgb(125, 19, 40) 3%, transparent 3%), radial-gradient(circle at 20% 40%, rgb(125, 19, 40) 3%, transparent 3%), rgb(139, 186, 43);
  border-radius: inherit;
  bottom: 0;
  right: -40%;
}
.canvas-lemonade .bushes::before {
  content: "";
  width: 50%;
  height: 50%;
  background: inherit;
  background-color: rgb(58, 120, 7);
  border-radius: inherit;
  bottom: 0;
  right: -260%;
}

.canvas-frog {
  --bg: rgb(209, 235, 229);
  position: relative;
}
.canvas-frog * {
  position: absolute;
}
.canvas-frog .body {
  width: 30%;
  height: 50%;
  background-color: yellowgreen;
  left: 35%;
  bottom: 0%;
  border-radius: 25rem 25rem 0 0;
  z-index: 1;
}
.canvas-frog .body:after {
  content: "";
  width: 80%;
  height: 60%;
  background: radial-gradient(circle at 25% 105%, yellowgreen 20%, transparent 21%), radial-gradient(circle at 75% 105%, yellowgreen 20%, transparent 21%), white;
  border-radius: inherit;
  bottom: 0;
  left: 10%;
}
.canvas-frog .eyes {
  width: 20%;
  aspect-ratio: 1;
  background: radial-gradient(circle at 70% 30%, white 10%, transparent 11%), radial-gradient(circle, black 50%, white 51%, white 60%, transparent 61%), yellowgreen;
  border-radius: 50%;
  top: 50%;
  left: 28%;
  z-index: 1;
}
.canvas-frog .eyes::after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: inherit;
  left: 120%;
}
.canvas-frog .eyes::before {
  content: "";
  width: 20%;
  height: 10%;
  background-color: green;
  border-radius: 3rem;
  top: 70%;
  left: 100%;
}
.canvas-frog .feet {
  width: 15%;
  height: 17%;
  background-color: yellowgreen;
  left: 20%;
  bottom: 0%;
  border-radius: 25rem 25rem 0 0;
  z-index: 0;
}
.canvas-frog .feet::after {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-color: inherit;
  left: 300%;
}
.canvas-frog .cane {
  width: 6px;
  height: 70%;
  bottom: 0;
  background-color: rgb(213, 185, 149);
  right: 10%;
}
.canvas-frog .cane:after {
  width: 500%;
  height: 25%;
  background-color: rgb(163, 139, 110);
  border-radius: 4rem;
  content: "";
  left: -200%;
  top: 2%;
}
.canvas-frog .cane.two {
  width: 4px;
  height: 40%;
  right: 80%;
}

.canvas-makeup {
  --bg: rgb(235, 202, 239);
  position: relative;
}
.canvas-makeup * {
  position: absolute;
}
.canvas-makeup .top, .canvas-makeup .bottom {
  width: 50%;
  height: 30%;
  background-color: rgb(247, 146, 196);
  border-radius: 1rem;
  left: 25%;
}
.canvas-makeup .top {
  top: 20%;
}
.canvas-makeup .top::after {
  width: 40%;
  height: 8%;
  background-color: hotpink;
  content: "";
  left: 30%;
  top: 100%;
}
.canvas-makeup .screen {
  width: 90%;
  height: 85%;
  background: linear-gradient(135deg, rgba(201, 245, 251, 0.336) 15%, transparent 15%, transparent 20%, rgba(201, 245, 251, 0.336) 20%, rgba(201, 245, 251, 0.336) 25%, transparent 25%), rgb(74, 217, 230);
  top: 7.5%;
  left: 5%;
  border-radius: inherit;
}
.canvas-makeup .screen::after {
  content: "";
  width: 90%;
  left: 3%;
  top: 3%;
  height: 90%;
  border-radius: inherit;
  background-color: rgba(116, 238, 242, 0.268);
}
.canvas-makeup .bottom {
  top: 52%;
}
.canvas-makeup .bottom::after {
  content: "";
  border-radius: inherit;
  background-color: #212121;
  width: 90%;
  height: 85%;
  top: 7.5%;
  left: 5%;
}
.canvas-makeup .row {
  width: 90%;
  height: 40%;
  z-index: 1;
  left: 5%;
  top: 10%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.canvas-makeup .row span {
  width: 17%;
  aspect-ratio: 1;
  background-color: var(--color);
  border-radius: 50%;
  position: relative;
}
.canvas-makeup .row span:first-child {
  --color: lightblue;
}
.canvas-makeup .row span:nth-child(2) {
  --color: forestgreen;
}
.canvas-makeup .row span:nth-child(3) {
  --color: rgb(191, 159, 199);
}
.canvas-makeup .row span:last-child {
  --color: rgb(82, 82, 141);
}
.canvas-makeup .row:nth-child(2) {
  bottom: 15%;
  background: linear-gradient(to right, rgb(241, 158, 188) 25%, coral 25%, coral 50%, rgb(244, 211, 135) 50%, gold 75%, rgb(253, 134, 194) 75%);
  top: unset;
  width: 80%;
  height: 35%;
  left: 10%;
  border-radius: 0 0 1rem 1rem;
}

.canvas-laundry {
  --bg: rgb(207, 218, 239);
  position: relative;
}
.canvas-laundry * {
  position: absolute;
}
.canvas-laundry .washing-machine {
  width: 40%;
  aspect-ratio: 1;
  background: linear-gradient(to bottom, transparent 20%, rgb(31, 39, 55) 20%, rgb(31, 39, 55) 22%, transparent 22%), rgb(214, 225, 225);
  border-radius: 1rem;
  border: 4px solid rgb(31, 39, 55);
  left: 30%;
  top: 40%;
  box-shadow: inset 0.3rem -0.3rem 0 rgb(103, 150, 150), inset -0.3rem -0.3rem 0 rgb(103, 150, 150), inset 0rem 0.8rem 0 rgb(255, 255, 255);
  z-index: 1;
}
.canvas-laundry .washing-machine::after {
  content: "";
  width: 20%;
  height: 10px;
  border-radius: 1rem;
  background-color: rgb(103, 150, 150);
  top: 5%;
  left: 10%;
}
.canvas-laundry .washing-machine::before {
  content: "";
  width: 7%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: rgb(103, 150, 150);
  top: 4%;
  left: 84%;
}
.canvas-laundry .window {
  width: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: inherit;
  left: 25%;
  top: 35%;
  background: linear-gradient(135deg, transparent 30%, rgb(255, 255, 255) 30%, rgb(255, 255, 255) 45%, transparent 45%, transparent 50%, rgb(255, 255, 255) 50%, rgb(255, 255, 255) 55%, transparent 55%), rgb(103, 150, 150);
}
.canvas-laundry .glass {
  aspect-ratio: 1;
  width: 75%;
  border: inherit;
  border-radius: 50%;
  top: 12.5%;
  left: 12.5%;
  box-shadow: inset 0.2rem 0.2rem 0 rgb(80, 187, 241), inset -0.2rem -0.2rem 0 rgb(80, 187, 241), inset 0.2rem -0.2rem 0 rgb(80, 187, 241), inset -0.2rem 0.2rem 0 rgb(80, 187, 241);
  background: linear-gradient(135deg, white 45%, transparent 45%), rgb(25, 66, 128);
}
.canvas-laundry .behind {
  width: 40%;
  aspect-ratio: 1;
  background: linear-gradient(to bottom, transparent 20%, rgb(31, 39, 55) 20%, rgb(31, 39, 55) 22%, transparent 22%), rgb(103, 150, 150);
  border-radius: 1rem;
  border: 4px solid rgb(31, 39, 55);
  left: 35%;
  top: 40%;
  box-shadow: inset 0.3rem -0.3rem 0 rgb(103, 150, 150), inset -0.3rem -0.3rem 0 rgb(103, 150, 150), inset 0rem 0.8rem 0 rgb(255, 255, 255);
}
.canvas-laundry .detergent {
  width: 15%;
  height: 20%;
  background: linear-gradient(to bottom, transparent 55%, white 55%, white 80%, transparent 80%), linear-gradient(to right, orangered 10%, transparent 10%), rgb(255, 128, 24);
  top: 60%;
  left: 18%;
  border: 4px solid rgb(31, 39, 55);
  border-radius: 1rem 3rem 1rem 1rem;
  box-shadow: inset 0 0.45rem white, inset 0 -0.3rem 0 orangered;
}
.canvas-laundry .detergent::after {
  content: "";
  border: inherit;
  border-radius: 1rem;
  width: 25%;
  height: 10px;
  background: linear-gradient(to right, transparent 40%, white 40%, white 60%, transparent 60%), rgb(80, 187, 241);
  top: -20%;
  left: 10%;
}
.canvas-laundry .basket {
  width: 25%;
  height: 15%;
  border: 4px solid rgb(31, 39, 55);
  top: 65%;
  left: 65%;
  z-index: 2;
  border-radius: 0 0 2rem 2rem;
  background: gold;
  box-shadow: inset 0.4rem -0.4rem 0 orange, inset -0.4rem 0 0 orange;
  display: flex;
  justify-content: space-evenly;
}
.canvas-laundry .basket::after {
  content: "";
  width: 110%;
  left: -7.5%;
  border: inherit;
  height: 10px;
  border-radius: 1rem;
  top: -25%;
  background-color: gold;
  box-shadow: 0 0.3rem 0 white inset;
}
.canvas-laundry .basket span {
  width: 7px;
  height: 60%;
  background-color: white;
  position: relative;
  border-radius: 0 0 1rem 1rem;
}
.canvas-laundry .towel {
  width: 22%;
  height: 7%;
  border: 4px solid rgb(31, 39, 55);
  border-radius: 0.3rem 3rem 3em 0.3rem;
  background: hotpink;
  box-shadow: inset 0 0.3rem 0 white;
  top: 57%;
  right: 11%;
  z-index: 1;
}
.canvas-laundry .towel.two {
  height: 5%;
  border-radius: 3rem;
  top: 52.7%;
  background: teal;
}

.canvas-desk {
  --bg: rgb(215, 189, 140);
  position: relative;
}
.canvas-desk * {
  position: absolute;
}
.canvas-desk .notebook {
  width: 40%;
  height: 50%;
  background: linear-gradient(to bottom, transparent 45%, white 45%, white 75%, transparent 75%), linear-gradient(to right, transparent 10%, black 10%, black 12%, transparent 12%), #2b2929;
  top: 30%;
  left: 40%;
  border-radius: 0.3rem 1rem 1rem 0.3rem;
  box-shadow: 0.3rem 0.3rem 0 rgba(73, 39, 36, 0.137);
}
.canvas-desk .notebook .notebook-details {
  width: 40%;
  height: 2%;
  background-color: chartreuse;
  border-radius: 2rem;
  top: 50%;
  left: 16%;
}
.canvas-desk .notebook .notebook-details::after {
  content: "";
  width: 30%;
  height: 100%;
  border-radius: inherit;
  background-color: turquoise;
  top: 200%;
}
.canvas-desk .notebook .notebook-details::before {
  content: "";
  width: 130%;
  height: 100%;
  border-radius: inherit;
  background-color: hotpink;
  top: 400%;
}
.canvas-desk .notebook::after {
  content: "";
  width: 5%;
  height: 100%;
  background-color: tomato;
  right: 13%;
}
.canvas-desk .notebook::before {
  width: 10%;
  height: 7%;
  background-color: rgb(212, 84, 69);
  content: "";
  bottom: -7%;
  left: 10%;
}
.canvas-desk .pen {
  width: 4%;
  height: 40%;
  background-color: rgb(83, 173, 229);
  background-color: blueviolet;
  border-radius: 2rem 2rem 0 0;
  top: 35%;
  left: 25%;
  box-shadow: 0.3rem 0.3rem 0 rgba(73, 39, 36, 0.137);
}
.canvas-desk .pen::after {
  content: "";
  width: 80%;
  aspect-ratio: 2;
  border-radius: 0 0 50rem 50rem;
  background-color: gold;
  bottom: -4%;
  left: 10%;
}
.canvas-desk .pen-cap {
  width: 6%;
  height: 15%;
  background-color: gold;
  top: 37%;
  left: 24%;
  box-shadow: 0.3rem 0.3rem 0 rgba(73, 39, 36, 0.137);
}
.canvas-desk .pen-cap::after {
  content: "";
  background-color: gold;
  width: 30%;
  height: 5%;
  top: 25%;
  left: -25%;
}
.canvas-desk .pen-cap::before {
  content: "";
  width: 15%;
  min-height: 80%;
  background-color: gold;
  left: -40%;
  top: 10%;
}

.canvas-radio {
  --bg: rgb(241, 234, 206);
  position: relative;
}
.canvas-radio * {
  position: absolute;
}
.canvas-radio .radio {
  width: 70%;
  height: 45%;
  border-radius: 2rem;
  background-color: rgb(138, 66, 42);
  box-shadow: inset 0 0.2rem 0 rgb(234, 211, 202);
  border: 2px solid rgb(138, 66, 42);
  left: 15%;
  top: 30%;
  border: 2px solid rgb(138, 66, 42);
}
.canvas-radio .radio::after {
  content: "";
  width: 95%;
  height: 90%;
  border-radius: 1.5rem;
  background-color: rgb(235, 210, 189);
  box-shadow: inset 0 -0.3rem 0 rgb(194, 172, 164);
  top: 5%;
  left: 2.5%;
}
.canvas-radio .radio::before {
  width: 100%;
  height: 4%;
  border-radius: 50%;
  background-color: rgba(57, 39, 33, 0.09);
  bottom: -8%;
}
.canvas-radio .feet {
  width: 6%;
  aspect-ratio: 2;
  background-color: rgb(93, 46, 30);
  top: 100%;
  left: 20%;
  border-radius: 0 0 0.3rem 0.3rem;
}
.canvas-radio .feet::after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: inherit;
  border-radius: inherit;
  left: 900%;
}
.canvas-radio .holes {
  width: 60%;
  height: 50%;
  z-index: 1;
  top: 10%;
  left: 3%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}
.canvas-radio .holes span {
  position: relative;
  width: 90%;
  height: 10%;
  background-color: rgb(93, 46, 30);
  border-radius: 1rem;
}
.canvas-radio .main-button {
  aspect-ratio: 1;
  border-radius: 50%;
  width: 17%;
  background: radial-gradient(circle, silver 60%, rgb(39, 14, 14) 60%, rgb(39, 14, 14) 63%, transparent 65%), linear-gradient(to right, beige 50%, rgb(93, 46, 30) 50%), beige;
  right: 11%;
  top: 25%;
  z-index: 1;
  font-family: sans-serif;
  color: white;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.1rem;
  border: 2px solid rgb(39, 14, 14);
}
.canvas-radio .buttons {
  width: 35%;
  height: 30%;
  z-index: 1;
  right: 3%;
  bottom: 5%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.canvas-radio .buttons span {
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
  border: 2px solid rgb(39, 14, 14);
  width: 20%;
  background: radial-gradient(circle, rgb(224, 219, 219) 40%, rgb(167, 164, 164) 40%), silver;
}
.canvas-radio .frequency {
  background-color: whitesmoke;
  width: 53%;
  height: 15%;
  z-index: 1;
  border-radius: 0.5rem;
  bottom: 13%;
  left: 7%;
  border: 2px solid rgb(39, 14, 14);
  display: flex;
  justify-content: space-around;
}
.canvas-radio .frequency::after {
  width: 1.6%;
  height: 50%;
  background-color: crimson;
  bottom: 0;
  left: 40%;
}
.canvas-radio .frequency span {
  background-color: rgb(39, 14, 14);
  position: relative;
  width: 1%;
}
.canvas-radio .frequency span.long {
  height: 60%;
}
.canvas-radio .frequency span.short {
  height: 30%;
}
.canvas-radio .antenna {
  background-color: rgb(39, 14, 14);
  width: 0.5%;
  height: 45%;
  top: -10%;
  left: 17%;
  transform: rotate(65deg);
  transform-origin: bottom center;
  z-index: 0;
}
.canvas-radio .antenna::after {
  content: "";
  width: 300%;
  height: 50%;
  background-color: inherit;
  bottom: 10%;
  right: -80%;
}
.canvas-radio .antenna::before {
  content: "";
  aspect-ratio: 1;
  border-radius: 0.3rem;
  background-color: rgb(93, 46, 30);
  width: 500%;
  border: 1px solid rgb(39, 14, 14);
  left: -250%;
  top: 0%;
}

* {
  box-sizing: border-box;
}

body {
  background-color: #121212;
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: rgb(212, 211, 211);
}

a {
  color: lightcoral;
  text-decoration: none;
}
a:hover {
  color: lightsalmon;
}

header {
  text-align: center;
  padding-block-end: 2rem;
}
header h1 {
  font-size: 3rem;
}
header h1 span {
  color: lightcoral;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  max-width: 1550px;
  margin: auto;
}

.canvas {
  width: 100%;
  aspect-ratio: 1;
  background-color: var(--bg);
  margin: auto;
  overflow: hidden;
  position: relative;
}

.details {
  position: absolute;
  background-color: rgba(47, 47, 47, 0.9568627451);
  width: 100%;
  padding: 1rem;
  z-index: 10;
  bottom: -100%;
  transition: 0.4s;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: normal;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.details * {
  position: relative;
}
.details p:first-of-type {
  font-style: italic;
}

.canvas:hover .details {
  bottom: 0%;
}

footer {
  padding: 2rem;
  text-align: center;
  font-size: 0.8rem;
}/*# sourceMappingURL=index.css.map */