/* ----- Global & Root Styles ----- */
:root {
  --pot-main: #dd7d5f;
  --pot-shade: #b05428;
}

* {
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #d1e9f0;
}

.heading {
  font-family: "Times New Roman", serif;
  font-weight: bold;
  font-size: 2rem;
  padding-top: 10px;
  text-align: center;
}

/* ----- Background Effect ----- */
.bg {
  animation: slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(
    -60deg,
    #bdfffd 50%,
    #9ffff5 25%,
    #a8f9ff 25%
  );
  bottom: 0;
  left: -50%;
  opacity: 0.5;
  position: fixed;
  right: -50%;
  top: 0;
  z-index: -1;
}

.bg2 {
  animation-direction: alternate-reverse;
  animation-duration: 4s;
}

.bg3 {
  animation-duration: 5s;
}

@keyframes slide {
  0% {
    transform: translateX(-25%);
  }
  100% {
    transform: translateX(25%);
  }
}

/* ----- Main Container ----- */
.desk-container {
  position: relative;
  width: 900px;
  height: 500px;
  margin: 25px auto;
  border: 5px solid #000000;
  border-radius: 10px;
  background-color: lightblue;
}

/* ----- Desk Component ----- */
.desk {
  width: 680px;
  height: 30px;
  background: #77756a;
  border-top: 10px solid #5b574e;
  position: absolute;
  bottom: 150px;
  left: 50%;
  transform: translateX(-50%);
}

.desk:before {
  content: "";
  width: 18px;
  height: 150px;
  background: #5b574e;
  position: absolute;
  top: 20px;
  left: 40px;
}

.desk:after {
  content: "";
  width: 18px;
  height: 150px;
  background: #5b574e;
  position: absolute;
  top: 20px;
  right: 40px;
}

.longer {
  width: 700px;
  height: 11px;
  background: #5b574e;
  position: absolute;
  top: -11px;
  left: -10px;
  z-index: 99999;
}

/* ----- Chair Component ----- */
.chair {
  --c: 12px;
  mask: radial-gradient(
      60% var(--c) at 50% var(--c),
      #0000 calc(100% - 2px),
      #000
    )
    0 calc(-1 * var(--c));
  background: #4a5568;
  width: 130px;
  height: 75px;
  border-radius: 20%;
  position: absolute;
  bottom: -70px;
  left: 300px;
  border: 2px solid #4a5568;
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.15);
  z-index: 2;
}

.chair:before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 20px;
  background: transparent;
  margin-left: 40px;
  box-shadow: 0px 5px 0px rgba(0, 0, 0, 0.1), 0px 9px 0px #4a5568,
    0px 13px 0px rgba(0, 0, 0, 0.1), 0px 17px 0px #4a5568,
    0px 21px 0px rgba(0, 0, 0, 0.1);
}

.chair-holder {
  width: 150px;
  height: 15px;
  background: #4a5568;
  position: absolute;
  bottom: -150px;
  left: 290px;
  border-radius: 30px 30px 0px 0px;
  box-shadow: 0 4px 0 #2d3748;
  z-index: 1;
}

.chair-holder::before {
  content: "";
  display: block;
  width: 33px;
  height: 0;
  border-bottom: 85px solid #718096;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  position: absolute;
  bottom: 10px;
  left: 58px;
}

/* ----- Computer Component ----- */
.imac {
  width: 250px;
  position: absolute;
  top: -210px;
  left: 230px;
}

.black-side {
  width: 250px;
  height: 140px;
  border-radius: 8px 8px 0 0;
  border: 10px solid #212528;
  background: #f8f8f8;
}

.vscode {
  width: 231px;
  height: 122px;
}

.butt {
  width: 250px;
  height: 35px;
  background: #b8b8b8;
  border-radius: 0 0 8px 8px;
}

.holder {
  width: 80px;
  height: 0;
  border-bottom: 25px solid #b8b8b8;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  margin: 0 auto;
}

/* ----- Headphones Component ----- */
.headphone-box {
  position: absolute;
  width: 100px;
  height: auto;
  top: -200px;
  left: 100px;
  margin: auto;
}

.headphone-stand {
  position: absolute;
  width: 7px;
  height: 192px;
  background-color: #131b23;
  top: -192px;
  left: 148px;
}

.headphone-stand-base {
  position: absolute;
  width: 100px;
  height: 20px;
  background-color: black;
  top: -20px;
  left: 100px;
  border-radius: 100%;
}

/* ----- Flower Pot Component ----- */
.box-canvas {
  position: absolute;
  width: 460px;
  height: 600px;
  top: -380px;
  left: -200px;
  transform: scale(0.2);
  z-index: 5;
}

.pot {
  position: absolute;
  width: 210px;
  height: 200px;
  background: linear-gradient(to right, var(--pot-shade), var(--pot-main) 50%);
  border-radius: 0 0 30% 30%;
  left: 160px;
  top: 470px;
}

.pot::before {
  content: "";
  position: absolute;
  width: 230px;
  height: 80px;
  background: radial-gradient(
    var(--pot-shade),
    var(--pot-main) 99%,
    var(--pot-shade)
  );
  border-radius: 50%;
  border-bottom: 2px solid var(--pot-shade);
  top: -30px;
  left: -10px;
}

.pot::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 50px;
  background: #4f211b;
  border-radius: 50%;
  top: -15px;
  left: 15px;
}

.stem {
  position: absolute;
  width: 140px;
  height: 300px;
  border: 10px solid green;
  border-radius: 50% 50% 0 0;
  border-left-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(25deg);
  top: 100px;
  right: 140px;
}

.stem::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 70px;
  background: green;
  transform: rotate(-25deg);
  bottom: -60px;
  right: -20px;
}

.stem::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 75px;
  background: linear-gradient(to top, #014401, green 40%);
  border-radius: 50% 0 0 50%;
  clip-path: polygon(0 0, 100% 74%, 100% 100%, 0% 100%);
  bottom: 0;
  right: 0;
}

.flower {
  position: absolute;
  width: 250px;
  height: 20px;
  top: 125px;
  left: 50%;
  transform: translateX(-50%);
}

.flower::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  background: radial-gradient(orange, orange 40%, yellow);
  border-radius: 50%;
  left: 50%;
  transform: translateX(-50%);
}

.petal {
  position: absolute;
  width: 120px;
  height: 50px;
  background: radial-gradient(ellipse at right, gray, white 50%);
  border-radius: 50%;
  border: 1px solid lightgray;
}

.petal::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 50px;
  background: radial-gradient(ellipse at right, gray, white 50%);
  border-radius: 50%;
  border: 1px solid lightgray;
  transform: rotate(35deg);
  transform-origin: center right;
}

.petal::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 50px;
  background: radial-gradient(ellipse at right, gray, white 50%);
  border-radius: 50%;
  border: 1px solid lightgray;
  transform: rotate(70deg);
  transform-origin: center right;
}

.petal.two {
  transform: rotate(105deg);
  transform-origin: center right;
}

.petal.three {
  transform: rotate(175deg);
  transform-origin: center right;
}

.petal.four {
  transform: rotate(285deg);
  transform-origin: center right;
}

.petal.four::after {
  content: none;
}

/* ----- Cup Component ----- */
.cup {
  width: 37px;
  height: 28px;
  border: 3px solid #cecece;
  border-radius: 0 0 100% 100%;
  position: absolute;
  top: -50px;
  left: 560px;
  box-shadow: 0 10px #f8f8f8 inset, 0px 22px #4f3c37 inset;
  transform: scale(1.5);
}

.cup:before {
  content: "";
  display: inline-block;
  width: 37px;
  height: 3px;
  background: #cecece;
  position: absolute;
  bottom: -6px;
  border-radius: 4px;
  left: -2px;
}

.cup:after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 4px;
  background: transparent;
  border-radius: 0 50% 50% 0;
  border: 3px solid #cecece;
  border-left: none;
  position: absolute;
  right: -9px;
}

/* ----- TODO board Component ----- */
.board {
  width: 220px;
  height: 150px;
  border: 6px solid #8b5d33;
  background: white;
  position: absolute;
  top: -300px;
  right: -60px;
  box-sizing: border-box;
  font-family: cursive;
  padding: 10px 20px;
}

.board:before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 34px;
  background: #f8e13b;
  border-bottom: 3px solid #e9d01b;
  position: absolute;
  bottom: -26px;
  left: 80px;
  transform: rotate(-5deg);
}

.board:after {
  content: "";
  display: inline-block;
  width: 40px;
  height: 34px;
  background: #f8e13b;
  border-bottom: 3px solid #e9d01b;
  position: absolute;
  bottom: -26px;
  left: 14px;
  transform: rotate(8deg);
}

.board ul {
  margin-top: 10px;
}

.board ul li {
  list-style: none;
}

.board ul li:before {
  content: "-";
  margin-right: 5px;
}