styles.css

:root {
  --dark-white-color: #252525;
  --page-background: #fff;
  --blue-gray: #2e334b;
  --light-blue-gray: #51566b;
  --very-light-blue-gray: #6b6f81;
  --light-orange: #ebb885;
  --very-light-orange: #f2d1b0;
  --tan: #d5a779;
  --brown: #8b6e52;
  --light-brown: #a07e5d;
  --very-light-brown: #ae9175;
  --brown-level2: #b58f68;
  --rose: #ff7382;
  --pink: #ffa4ae;
  --light-gray: #adadad;
  --very-light-gray: #e7e7e7;
  --very-light-gray-level2: #e1e1e1;
  --aqua: #13d4ff;
  --light-sky-blue: #80e9ff;
  --sky-blue: #62e5ff;
  --light-green: #bdf4e4;
  --teal: #92adb0;
  --light-yellow: #e0c787;
  --border-thickness: 5px;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: var(--page-background);
  transition: background-color 0.3s;
}

.container {
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

@media (max-width: 992px) {
  .container {
    width: 95%;
  }
}
.frame {
  width: 900px;
  min-width: 900px;
  height: 600px;
  margin-top: 10px;
  padding: 30px;
  box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

@media (max-width: 992px) {
  .frame {
    scale: 0.8;
  }
}
@media (max-width: 768px) {
  .frame {
    scale: 0.4;
    margin-top: -100px;
  }
}
@media (max-width: 420px) {
  .frame {
    scale: 0.37;
    margin-top: -120px;
  }
}
.frame .underline {
  width: 750px;
  height: var(--border-thickness);
  background-color: var(--blue-gray);
  position: absolute;
  bottom: 50px;
  left: 50%;
  translate: -50% 0;
  border-radius: 10px;
}

.frame .underline::before,
.frame .underline::after {
  content: "";
  position: absolute;
  background-color: var(--blue-gray);
  height: var(--border-thickness);
  border-radius: 10px;
}

.frame .underline::before {
  width: 20px;
  left: -30px;
}

.frame .underline::after {
  right: -12px;
  width: var(--border-thickness);
}

.frame .desk {
  position: absolute;
  width: 720px;
  bottom: 52px;
  left: 50%;
  translate: -50% 0;
}

.frame .desk .right-wood {
  position: absolute;
  right: 36px;
  bottom: 0;
  width: 26px;
  height: 174px;
  background-color: var(--tan);
  border-right: solid var(--border-thickness) var(--blue-gray);
  border-left: solid var(--border-thickness) var(--blue-gray);
  overflow: hidden;
}

.desk .right-wood::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 12px;
  top: 0;
  left: 0;
  background-color: #ae9175;
  z-index: 1;
}

.desk .right-wood::after {
  content: "";
  position: absolute;
  top: -5px;
  background-color: var(--light-orange);
  width: 100px;
  height: 140px;
  border-radius: 40px;
  left: -76px;
}

.desk .desktop-wood {
  position: absolute;
  left: 4px;
  top: -196px;
  width: 712px;
  height: 26px;
  border-radius: 50px;
  background-color: var(--light-orange);
  border: solid var(--border-thickness) var(--blue-gray);
  z-index: 10;
  overflow: hidden;
}

.desk .desktop-wood::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: var(--very-light-orange);
}

.desk .brown-wood {
  position: absolute;
  right: 62px;
  top: -170px;
  width: 457px;
  height: 42px;
  background-color: var(--brown);
  border-bottom: solid var(--border-thickness) var(--blue-gray);
  overflow: hidden;
}

.desk .brown-wood .lines {
  position: absolute;
  left: 46px;
  top: 4px;
  width: 50px;
  height: calc(var(--border-thickness) - 1px);
  background-color: var(--blue-gray);
  border-radius: 50px;
  rotate: -50deg;
  z-index: 1;
}

.desk .brown-wood .lines::before,
.desk .brown-wood .lines::after {
  content: "";
  position: absolute;
  background-color: inherit;
  border-radius: inherit;
  width: inherit;
  height: inherit;
}

.desk .brown-wood .lines::before {
  left: 23px;
  top: 11px;
}

.desk .brown-wood .lines::after {
  left: 133px;
  top: 223px;
}

.desk .brown-wood .shadow-effect {
  position: absolute;
  left: -87px;
  top: 8px;
  width: 400px;
  height: 400px;
  background-color: var(--light-brown);
  border-radius: 50px;
}

.desk .brown-wood .shadow-effect::before {
  content: "";
  position: absolute;
  left: 100px;
  top: 25px;
  width: 285px;
  height: 15px;
  background-color: var(--very-light-brown);
  border-radius: 50px;
}

.desk .cabinet {
  position: absolute;
  left: 36px;
  bottom: 0;
  width: 165px;
  height: 90px;
  border: solid var(--border-thickness) var(--blue-gray);
  overflow: hidden;
}

.desk .cabinet.top {
  bottom: calc(90px - var(--border-thickness));
  background-color: var(--light-orange);
}

.desk .cabinet.top > .shadow-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: var(--brown-level2);
}

.desk .cabinet.bottom {
  background-color: var(--tan);
}

.desk .cabinet.bottom > .shadow-effect {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-top: solid 3px var(--very-light-orange);
  border-left: solid 16px var(--very-light-orange);
}

.desk .cabinet.bottom > .shadow-effect::before,
.desk .cabinet.bottom > .shadow-effect::after {
  content: "";
  position: absolute;
  background-color: var(--light-orange);
  border-radius: 10px 20px 20px 10px;
}

.desk .cabinet.bottom > .shadow-effect::before {
  width: 100px;
  height: 100%;
  left: -14px;
  top: 0;
}

.desk .cabinet.bottom > .shadow-effect::after {
  width: 127px;
  height: 142px;
  left: 11px;
  top: -71px;
  rotate: 257deg;
  border-radius: 50%;
}

.desk .cabinet.bottom > .shadow-effect-two {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  border-top: solid 3px var(--very-light-orange);
}

.desk .cabinet .cabinet-door {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  background-color: var(--tan);
  width: 76%;
  height: 68%;
  border: solid var(--border-thickness) var(--blue-gray);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  z-index: 10;
}

.desk .cabinet .the-handle {
  width: 38px;
  height: 8px;
  z-index: 10;
  background-color: var(--blue-gray);
  border-radius: 50px;
}

.desk .cabinet .cabinet-door .shadow-effect {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-top: solid 3px var(--very-light-orange);
  border-left: solid 16px var(--very-light-orange);
}

.desk .cabinet .cabinet-door .shadow-effect::before,
.desk .cabinet .cabinet-door .shadow-effect::after {
  content: "";
  position: absolute;
  background-color: var(--light-orange);
  border-radius: 10px 20px 20px 10px;
}

.desk .cabinet .cabinet-door .shadow-effect::before {
  width: 90px;
  height: 100%;
  left: -14px;
  top: 0;
}

.desk .cabinet .cabinet-door .shadow-effect::after {
  width: 100px;
  height: 90px;
  left: 11px;
  top: -58px;
  rotate: 257deg;
  border-radius: 50%;
}

.desk .cabinet .cabinet-door .shadow-effect-two {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: solid 3px var(--very-light-orange);
}

.frame .desktop {
  position: absolute;
  left: 88px;
  bottom: 248px;
  width: 720px;
}

.frame .desktop .mouse {
  position: absolute;
  right: 154px;
  top: -12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--very-light-gray);
  border: solid var(--border-thickness) var(--blue-gray);
}

.frame .desktop .screen {
  position: absolute;
  right: 210px;
  top: -177px;
  width: 210px;
  height: 180px;
}

.desktop .screen .screen-case {
  position: absolute;
  left: 0;
  top: 12px;
  width: 210px;
  height: 140px;
  z-index: 10;
  border-radius: 15px;
  background-color: var(--very-light-gray-level2);
  border: solid var(--border-thickness) var(--blue-gray);
}

.screen .screen-case .the-screen {
  position: absolute;
  left: 50%;
  top: 4px;
  width: 95%;
  height: 71%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 2px var(--blue-gray);
  background-color: var(--very-light-blue-gray);
  translate: -50% 0;
  border-radius: 10px 10px 0 0;
  transition: background-color 0.3s;
}
.screen .screen-case .the-screen:hover {
  background-color: var(--light-sky-blue);
  transition: background-color 0.3s 0.2s;
}

.screen-case .the-screen::before,
.screen-case .the-screen::after {
  content: "";
  position: absolute;
  height: 400px;
  background-color: var(--light-blue-gray);
  rotate: 45deg;
  transition: 0.2s 0.4s;
}

.screen-case .the-screen::before {
  right: 54px;
  top: -133px;
  width: 40px;
}

.screen .screen-case .the-screen:hover::before {
  right: 260px;
  top: -133px;
  transition: 0.2s;
}

.screen-case .the-screen::after {
  right: -80px;
  top: -140px;
  width: 60px;
}

.screen .screen-case .the-screen:hover::after {
  right: -120px;
  transition: 0.2s;
}

.screen-case .the-screen .text {
  font-size: 1rem;
  font-weight: bold;
  z-index: 10;
  position: relative;
  top: 4px;
  opacity: 0;
  transition: opacity 0.5s;
}

.screen-case .the-screen:hover .text {
  opacity: 1;
  transition: opacity 0.5s 0.2s;
}

.screen .screen-case .bottom {
  position: absolute;
  left: 0;
  bottom: 26px;
  width: 100%;
  height: var(--border-thickness);
  background-color: var(--blue-gray);
}

.screen .screen-case .bottom::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 10px;
  width: 14px;
  height: 14px;
  border: solid 2px var(--blue-gray);
  border-radius: 50%;
  translate: -50%;
}

.desktop .screen .stander {
  position: absolute;
  left: 50%;
  top: 146px;
  width: 40px;
  height: 26px;
  translate: -50% 0;
  background-color: var(--very-light-gray-level2);
  border: solid var(--border-thickness) var(--blue-gray);
}

.desktop .screen .stander::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background-color: var(--light-gray);
}

.desktop .screen .stander-bottom {
  position: absolute;
  left: 50%;
  width: 70px;
  height: 20px;
  bottom: -8px;
  border-radius: 50px;
  translate: -50%;
  background-color: var(--very-light-gray-level2);
  border: solid var(--border-thickness) var(--blue-gray);
}

.desktop .screen .line-effect {
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 30.5px;
  height: 6px;
  background-color: var(--very-light-gray);
  translate: -50% 0;
}

.desktop .screen .line-effect::before,
.desktop .screen .line-effect::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 3px;
  background-color: var(--blue-gray);
  translate: 0 calc(-50% + 0.5px);
}

.desktop .screen .line-effect::before {
  left: 0;
  width: 8px;
  height: 3px;
}

.desktop .screen .line-effect::after {
  left: 12px;
  width: 6px;
}

.frame .desktop .red-cube {
  position: absolute;
  left: 230px;
  bottom: -4px;
  width: 42px;
  height: 46px;
  background-color: var(--rose);
  border-radius: 0 0 15px 15px;
  border: solid var(--border-thickness) var(--blue-gray);
}

.frame .desktop .red-cube::before {
  content: "";
  position: absolute;
  right: -16px;
  top: 2px;
  width: 28px;
  height: 28px;
  border: solid var(--border-thickness) transparent;
  border-color: var(--blue-gray) var(--blue-gray) transparent transparent;
  border-radius: 50%;
  rotate: 45deg;
}

.frame .desktop .red-cube .shadow-effect {
  position: absolute;
  left: 5px;
  top: 0;
  width: 10px;
  height: 18px;
  background-color: var(--pink);
  border-radius: 50px;
}

.frame .desktop .red-cube .shadow-effect::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0;
  width: 33px;
  height: 2px;
  background-color: var(--pink);
}

.frame .desktop .desk-lamp {
  position: absolute;
  left: 70px;
  top: -147px;
  width: 130px;
  height: 150px;
}

.desktop .desk-lamp .lamp-base {
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 76px;
  height: 30px;
  z-index: -1;
  overflow: hidden;
  background-color: var(--aqua);
  border-radius: 50px;
  translate: -50% 0;
  border: solid var(--border-thickness) var(--blue-gray);
}

.desktop .desk-lamp .lamp-base::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 85%;
  height: 3px;
  background-color: var(--sky-blue);
  border-radius: 50px;
}

.desktop .desk-lamp .circle-base {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 30px;
  height: 30px;
  z-index: -2;
  background-color: var(--aqua);
  border-radius: 50%;
  translate: -50% 0;
  border: solid var(--border-thickness) var(--blue-gray);
}

.desktop .desk-lamp .circle-base::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1px;
  width: 8px;
  height: 8px;
  background-color: var(--sky-blue);
  border-radius: 50%;
}

.desktop .desk-lamp .stand {
  position: absolute;
  left: 0px;
  top: 52px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--light-green);
  border-radius: 50%;
  border: solid var(--border-thickness) var(--blue-gray);
}

.desktop .desk-lamp .stand::before,
.desktop .desk-lamp .stand::after {
  content: "";
  position: absolute;
  width: 80px;
  z-index: -3;
  height: var(--border-thickness);
  background-color: var(--blue-gray);
}

.desktop .desk-lamp .stand::before {
  left: -6px;
  top: -26px;
  rotate: 137deg;
}

.desktop .desk-lamp .stand::after {
  left: -6px;
  top: 44px;
  rotate: 44deg;
}

.desktop .desk-lamp .stand .inner-circle {
  width: 35%;
  height: 35%;
  background-color: var(--teal);
  border-radius: 50%;
}

.desktop .desk-lamp .light-holder-container {
  position: absolute;
  left: 43px;
  top: 24px;
  z-index: -4;
  rotate: -42deg;
}

.desktop .desk-lamp .light-holder {
  position: absolute;
  width: 46px;
  height: 50px;
  overflow: hidden;
  background-color: var(--aqua);
  border-radius: 50px 50px 0 0;
  border: solid var(--border-thickness) var(--blue-gray);
}

.desk-lamp .light-holder .lines {
  position: absolute;
  left: -2px;
  bottom: 5px;
  width: 16px;
  height: 4px;
  background-color: var(--blue-gray);
  border-radius: 50px;
}

.desk-lamp .light-holder .lines::before {
  content: "";
  position: absolute;
  right: -6px;
  width: 4px;
  height: 4px;
  background-color: inherit;
  border-radius: inherit;
}

.desk-lamp .light-holder .light-effect {
  position: absolute;
  right: 0;
  top: -10px;
  width: 70%;
  height: 70%;
  background-color: var(--sky-blue);
  border-radius: 50px;
}

.desk-lamp .light-holder .light-effect::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  width: 7px;
  height: 14px;
  z-index: 2;
  border-radius: 50%;
  background-color: var(--light-sky-blue);
  rotate: 324deg;
}

.desk-lamp .light-holder .light-effect::after {
  content: "";
  position: absolute;
  left: -18px;
  top: 11px;
  width: 200%;
  height: 5px;
  z-index: 1;
  background-color: var(--sky-blue);
}

.desk-lamp .light-holder-back {
  position: absolute;
  left: 9px;
  top: -9px;
  width: 27px;
  height: 27px;
  z-index: -1;
  background-color: var(--sky-blue);
  border-radius: 50%;
  border: solid var(--border-thickness) var(--blue-gray);
}

.desk-lamp .lamp-light {
  position: absolute;
  left: 8px;
  top: 33px;
  width: 27px;
  height: 27px;
  z-index: -1;
  border: solid 3px var(--blue-gray);
  border-radius: 50%;
  background-color: var(--light-yellow);
  animation: broken-light 4s 0.5s infinite ease-in-out;
}

@keyframes broken-light {
  0% {
    background-color: var(--light-yellow);
  }
  5%, 15% {
    background-color: #ffe017;
  }
  10%, 20% {
    background-color: var(--light-yellow);
  }
  100% {
    background-color: var(--light-yellow);
  }
}
.desk-lamp .wires-structure {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.desk-lamp .wires-structure .top {
  position: absolute;
  left: 11px;
  top: 7px;
  width: 52px;
  height: 43px;
  border: solid 3px;
  rotate: 92deg;
  border-radius: 2px 39px 4px 29px;
  border-color: transparent transparent var(--blue-gray) var(--blue-gray);
}

.desk-lamp .wires-structure .left-bottom {
  position: absolute;
  left: 3px;
  top: 70px;
  width: 52px;
  height: 32px;
  border: solid 3px;
  border-radius: 2px 39px 4px 29px;
  border-color: transparent transparent var(--blue-gray) var(--blue-gray);
}

.desk-lamp .wires-structure .right-bottom {
  position: absolute;
  left: 32px;
  top: 99px;
  width: 36px;
  height: 27px;
  z-index: -3;
  border: solid 3px;
  border-radius: 2px 39px 4px 29px;
  transform: rotateY(190deg) rotateX(190deg);
  border-color: transparent transparent var(--blue-gray) var(--blue-gray);
}/*# sourceMappingURL=styles.css.map */