@font-face {
    font-family: 'VT323';
    font-display: swap;
    src: url('https://fonts.googleapis.com/css2?family=VT323&display=swap') format('woff2');
}
/* NIGHT DAY */

.night-toggle {
    width: 2vw;
    height: 2vw;
    right: 5vw;
    top: 1.6vw;
    position: fixed;
    background: var(--white);
    border:0.15vw solid #000000;
    border-radius: 50%;
    padding: 0.4vw 0.3vw;
    transition: 1s;
}
.night-toggle:hover {
    width: 2vw;
    height: 2vw;
    background: var(--black);
}
.night-toggle:hover .moon {
    background: var(--black);
    box-shadow: -0.3vw 0.05vw 0 0.1vw var(--white);
}
.night-toggle:hover{
    cursor: pointer;
}
.moon {
      background-color: transparent;
      box-shadow: -0.3vw 0.05vw 0 0.1vw var(--black);
      border-left:0.2vw solid var(--black);
      border-radius:50%;
      width: 0.8vw;
      height: 0.8vw;
      margin-left:0.5vw;
      margin-top:0;
      transition: 2s;
    }
.sun {
      background-color: var(--white);
      border-radius:50%;
      width: 0.9vw;
      height: 0.9vw;
      transition: 2s;
      margin-left:0.12vw;
      margin-top:0.05vw;
      background: var(--black);
}

/* GROUND z-index */
.ground{z-index:1!important;}

/* ROOM */

.room{
    width: 100vw;
    height: 100vh;
    position: fixed;
    bottom: 0;
    right:0;
    display: flex;
    flex-direction: row;
    align-items: start;
    align-content: start;
    justify-content: space-between;
    padding: 0;
    
    z-index: 9;
}

/* ROOM LEFT */

.room_left {
    width: 40%;
    height:94.9vh;
    z-index: 25;
    padding: 0 0 6vw 8vw;
    position: fixed;
}
.content-left{
    width: 17vw;
    position: fixed;
    bottom: 7vw;
    left: 8vw;
}

/* ROOM RIGHT */
.room_right{
    width:60%;
    height:100vh;
}

/* ROOM RIGHT ITEMS */

.mug{
    position: absolute;
    bottom: 10.9vw;
    right: 15.5vw;
}
#mug{
    width:1.8vw;
    height: 2.2vw;
}
#mug path{
    fill:#fff; 
    stroke:#000; 
    stroke-miterlimit:10; 
    stroke-width:0.1vw;
}

#mug #mug_group .mug_smoke{   
    stroke-width:0.15vw!important;
    stroke:#000; 
    stroke-miterlimit:10;
}


.table{
    width: 30vw;
    height: 9.2vw;
    position: fixed;
    bottom: 2vw;
    right:10.5vw;
    background-image: url("../assets/table.svg");
    background-repeat: no-repeat;
    background-position: center bottom;
    z-index:25;
}

.lamp-1{
    bottom: 33vw;
    right:26vw;
}
.c_lamp{
    width: 6vw;
    height: 18.1vw;
    position: fixed;
    z-index: 0;
}

.c_lamp::after{
    content: " ";
    width: 90vw;
    height: 80.8vw;
    position: absolute;
    bottom: -80vw;
    left:-37.5vw;
    background: var(--socket-color);
    clip-path: polygon(42% 0, 48% 0, 100% 100%, 0% 100%);
}

.c_lamp span:nth-child(1){
    width: 0.15vw;
    height: 11vw;
    position: absolute;
    top: 0;
    right:2.9vw;
    background: rgb(0, 0, 0);
}
.c_lamp span:nth-child(2){
    width: 0.8vw;
    height: 1.6vw;
    position: absolute;
    top: 11vw;
    right:2.6vw;
    background: rgb(0, 0, 0);
}
.c_lamp span:nth-child(3){
    width: 6vw;
    height: 4.8vw;
    position: absolute;
    top: 12.6vw;
    right:0;
    background: rgb(0, 0, 0);
    clip-path: polygon(30% 0, 70% 0, 100% 100%, 0% 100%);
    z-index: 2;
}
.c_lamp span:nth-child(4){
    width: 1.6vw;
    height: 1.6vw;
    position: absolute;
    top: 16.5vw;
    right:2.2vw;
    background: rgb(255, 255, 255);
    border-radius: 50%;
    border: 0.15vw solid black;
    z-index: 1;
}
/* MONITOR */

.monitor{
    width: 11.7vw;
    min-height: 7.8vw;
    position: absolute;
    bottom: 11.1vw;
    right:21.4vw;
    background-image: url("../assets/monitor_1.svg");
    background-repeat: no-repeat;
    background-position: top center;
    z-index:100;
}
.screen-type {
    color: white;
    width: 10.8vw;
    padding: 1vw 1vw;
    font-size: 0.7vw;
    line-height: 0.9vw;
    background: black;
    margin: 0.4vw;
    height: 6.1vw;
    font-family: 'joystix monospace', sans-serif;
}
.screen-type:after {
    content: "";
    margin-left: 5px;
    border-right: 4px solid rgb(255, 255, 255);
    width: 0;
    font-size: 0.5vw;
    -webkit-animation: blink 850ms steps(2, start) infinite;
    animation: blink 850ms steps(2, start) infinite;
}
  
  @-webkit-keyframes blink {
    to {
      visibility: hidden;
    }
  }
  
  @keyframes blink {
    to {
      visibility: hidden;
    }
  }

.speaker-audio{
    width: 1vw;
    height: 3.25vw;
    position: fixed;
    bottom: 11.1vw;
    right:19.5vw;
    z-index:25;
}
.speaker-left{
    width: 1vw;
    height: 3.25vw;
    position: fixed;
    bottom: 11.1vw;
    right:35.2vw;
    z-index:5;
}
.speaker-box{
    width: 1.9vw;
    height: 2.8vw;
    background: rgb(255, 255, 255);
    border-radius: 3vw;
    position: relative;
    border: 0.15vw solid black;
    padding: 0.1vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: center;
    align-items: center;
}
.speaker-box::before{
    content: "";
    width: 2.1vw;
    height: 2.82vw;
    background: rgb(0, 0, 0);
    border-radius: 1.8vw;
    position: absolute;
    z-index: -1;
    top: -0.12vw;
    left: 0;
    border: 2px solid black;
}
.low-driver{
    width: 1.45vw;
    height: 1.45vw;
    background: rgb(255, 255, 255);
    border-radius: 4vw;
    border: 0.30vw double black;
    display: flex;
    justify-content: center;
    align-content: center;
    padding: 0.22vw;
}
.low-driver::before{
    content: "";
    width: 0.4vw;
    height: 0.4vw;
    background: rgb(0, 0, 0);
    border-radius: 1vw;
    border: 0.15vw solid black;
}
.stand{
    width: 1.5vw;
    height: 0.4vw;
    background: rgb(255, 255, 255);
    position: absolute;
    border: 0.15vw solid black;
    bottom: 0;
    left: 0.35vw;
    border-radius: 0.18vw 0.18vw 0 0;
}
.stand::before{
    content: "";
    width: 0.7vw;
    height: 0.2vw;
    background: rgb(0, 0, 0);
    position: absolute;
    bottom: 0.18vw;
    left: 0.25vw;
}
.chair{
    
    width: 8.6vw;
    min-height: 11vw;
    position: absolute;
    bottom: 2vw;
    right:26vw;
    background: url("../assets/chair-2.svg");
    background-repeat: no-repeat;
    background-position: top center;
    z-index:9999;
}

#chairtop {
    padding: 0;
    width: 7vw;
    height: 4.5vw;
    cursor: move;
    z-index: 2;
  }

  /* BOOKS */

.books {
    width: 2.6vw;
    height: 3.8vw;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-content: flex-start;
    position: fixed;
    bottom: 11.2vw;
    right:42.5vw;
    color: var(--black);
}

.books::before{
    content: " ";
    position: absolute;
    width: 2.6vw;
    height: 3.8vw;
    background: #000;
    z-index: 1;
}

.books div {
    border:0.15vw solid black;
    font-size: 0.3vw;
    font-family: 'joystix monospace', sans-serif;
    line-height: 0.3vw;
    writing-mode: vertical-rl;
    z-index: 2;
    background: var(--white)
}

.aquarium {
    width: 3.8vw;
    height: 4.2vw;
    position: fixed;
    bottom: 11.1vw;
    right:38vw;
    z-index:10;
    overflow: hidden;
}
.aquarium #aquarium_animation{
    width: 100%;
    height: 100%;
}

#bubbles circle {
    animation: rise 3s infinite, wiGggle 3s infinite;
}

@keyframes rise {
0% {
    transform: translateY(20px);
    opacity: 0;
}
25% {
    opacity: 1;
}
100% {
    transform: translateY(0px);
    opacity: 0;
}
}

@keyframes wiggle {
0%, 100% {
    transform: translateX(0);
}
25% {
    transform: translateX(-2px);
}
75% {
    transform: translateX(2px);
}
}

#bubbles circle:nth-child(1) {
    animation-delay: 0s;
    animation-duration: 5s, 2s;
}

#bubbles circle:nth-child(2) {
    animation-delay: 1s;
    animation-duration: 6s, 2.5s;
}

#bubbles circle:nth-child(3) {
    animation-delay: 2s;
    animation-duration: 5.5s, 2.2s;
}

#bubbles circle:nth-child(4) {
    animation-delay: 3s;
    animation-duration: 6.5s, 2.8s;
}

@keyframes wave {
0%, 100% {
    d: path("M5,16c8.4,0,8.4,2,16.8,2s8.4-2,16.9-2,8.4,2,16.9,2");
}
50% {
    d: path("M5,16c8.4,1,8.4,0,16.8,1s8.4,1,16.9,1,8.4,0,16.9,1");
}
}

#aquarium_animation_water path {
    animation: wave 4s infinite;
}

#fish1 {
    position: absolute;
    top: 2vw;
    left: 0;
    transform: translateY(-40%);
    animation: swim 10s infinite;
    width: 2vw;
    height: 0.6vw;
}

@keyframes swim {
    0% {
        transform: translate(0, 0%) scaleX(-1);
    }
    25% {
        transform: translate(1.8vw, 60%) scaleX(-1);
    }
    50% {
        transform: translate(1.8vw, 60%) scaleX(1);
    }
    75% {
        transform: translate(0, 20%) scaleX(1);
    }
    100% {
        transform: translate(0, 0%) scaleX(-1);
    }
}
.marbella{
    min-width: 3vw;
    position: fixed;
    bottom: 24vw;
    right:40vw;
    background:black;
    z-index:25;
    padding: 0.4vw 0.3vw 0.4vw 0.5vw;
    box-shadow: 0.2vw 0.2vw #000;
}
.marbella p{
    color: white;
    font-size: 1.1vw;
    line-height: 1vw;
    letter-spacing: 0.2vw;
    font-family: 'joystix monospace', sans-serif;
}

.switch{
    width: 2vw;
    position: fixed;
    bottom: 15vw;
    right:71.5vw;
    background-image: url("../assets/switch.svg");
    background-repeat: no-repeat;
    background-position: top center;
    z-index:2;
}

.clock{
    position: fixed;
    bottom: 25vw;
    right:24.5vw;
    z-index:2;
}
.clock-wrap {
    overflow: hidden;
    position: relative;
    width: 4.6vw;
    height: 4.6vw;
    border: 0.3vw solid black;
    border-radius: 50%;
}

.minute,
.hour {
    position: absolute;
    height: 1.4vw;
    width: 0.15vw;
    margin: auto;
    top: -35%;
    left: 0;
    bottom: 0;
    right: 0;
    background: var(--black);
    transform-origin: bottom center;
    transform: rotate(0deg);
    z-index: 1;
}

.minute {
    position: absolute;
    height: 1.8vw;
    width: 0.15vw;
    top: -40%;
    left: 0;
    transform: rotate(90deg);
}

.second {
    position: absolute;
    height: 1.8vw;
    width: 0.1vw;
    margin: auto;
    top: -42%;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 0.2vw;
    background: #000000;
    transform-origin: bottom center;
    transform: rotate(180deg);
    z-index: 1;
}

.dot {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 0.7vw;
    height: 0.7vw;
    background: var(--white);
    border: 0.15vw solid var(--black);
    border-radius: 50%;
    margin: auto;
    z-index: 1;
}

/* AUDIO */

#toggleButton.off, #toggleButton.on {
    width: 0.5vw;
    height: 0.5vw;
    border: 0.15vw solid var(--black);
    border-radius: 4vw;
    position: absolute;
    bottom: 0.2vw;
    cursor: pointer;
}
#toggleButton.off {
    background: rgb(255, 0, 0)!important;
}

#toggleButton.on {
    cursor: pointer;
    background-color: #0f0; /* Green color */
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.6); /* Glowing effect */
    animation: flickeraudio 0.4s infinite;
    animation:  0.2s infinite;
}

@keyframes flickeraudio {
0% {
    opacity: 1;
    transform: scale(1);
}
10% {
    opacity: 0.8;
    transform: scale(1.1);
}
20% {
    opacity: 1;
    transform: scale(1);
}
30% {
    opacity: 0.6;
    transform: scale(0.9);
}
40% {
    opacity: 0.9;
    transform: scale(1);
}
50% {
    opacity: 0.7;
    transform: scale(1.05);
}
60% {
    opacity: 1;
    transform: scale(1);
}
70% {
    opacity: 0.5;
    transform: scale(0.95);
}
80% {
    opacity: 0.8;
    transform: scale(1);
}
90% {
    opacity: 1;
    transform: scale(1);
}
100% {
    opacity: 0.7;
    transform: scale(1);
}
}

.color-options {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    position: fixed;
    bottom: 12vw;
    right: 48vw;
    z-index: 250;
    background-color: var(--white);
    padding: 0.15vw;
    border:0.15vw solid var(--black);
}
.color-options label {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.color-box {
    width: 0.6vw;
    height: 1.4vw;
    border:0.15vw solid var(--black);
    border-bottom: 0.4vw solid var(--black);
    margin-right: 0;
}

input.color-radio {
    display: none;
}
    
/* CAT */
.help {cursor: help;}
.cat {
    position: fixed;
    width: 1.8vw;
    height:  1.8vw;
    bottom: 2.2vw;
    z-index: 100;
    right:37.6vw;
    border-radius: 50%;
    transition: 0.8s;
}
.cat:hover::before {
    content: "";
    position: absolute;
    width: 0.6vw;
    height: 1.6vw;
    border-radius: 0.4vw;
    bottom: -1vw;
    background: black;
    z-index: 100;
    right:1vw;
    opacity: 1;
}
.face {
    position: absolute;
    width: 100%;
    height: 100%;
}
.eye {
    position: absolute;
    width: 0.8vw;
    height: 0.8vw;
    background-color: white;
    border-radius: 50%;
    bottom: 0.6vw;
}
.eye-left {
    left: 0.01vw;
}

.eye-right {
    right: 0.01vw;
}

.pupil {
    position: absolute;
    width: 0.3vw;
    height: 0.3vw;
    background-color: black;
    border-radius: 50%;
    top: 0.24vw;
    left: 0.22vw;
    transition: transform 0.1s;
}

.hover-text {
    position: absolute;
    bottom: 1.8vw; 
    left: 0.9vw;
    transform: translateX(-50%);
    display: none; 
}

.cat:hover .hover-text {
    display: block; 
    bottom: 1.8vw;
    left: 0.9vw;
    color: rgb(255, 255, 255);
    font-size: 0.6vw;
    font-weight: bold;
    position: absolute;
    z-index: 99;
}


/* FAN */
.fan {
    width: 4.1vw;
    height: 4.5vw;
    flex-direction: column;
    justify-content: space-around;
    background: rgb(255, 255, 255);
    border: 0.15vw solid black;
    position: fixed;
    bottom: 17vw;
    right: 41vw;
    z-index: 9999;
    padding: 0.15vw;
    border-radius: 0.3vw;
    
    }

.fan .fan-buttons, .fan .fan-image, .fan {
    display: flex;
    align-items: center;
    justify-content: center;
}
      
      
.fan-image {
    width: 3.2vw;
    height: 3.2vw;
    border-radius: 50%;
    margin: 0 auto;
    overflow: hidden;
    background: #000;
    border: 0.15vw solid black;

}
.fan .fan-image img {
    width: 2.8vw;
    height: 2.8vw;
}
.fan .fan-buttons {
    justify-content: space-between;
    align-items: center;
    align-content: center;
}
.fan .fan-buttons p {
    background: #ffffff;
    padding: 0.05vw 0.15vw;
    color: var(--black);
    cursor: pointer;
    user-select: none;
    border-radius: 1vw;
    font-size: 0.25vw;
    border: 0.15vw solid black;
    margin-right: 0.1vw;
    margin-top: 0.1vw;
    max-height: 0.8vw;
    line-height: 0.25vw;
    font-family: 'joystix monospace', sans-serif;
}

.one,
.two,
.stop {
    animation: rotatefan linear infinite;
    animation-play-state: running;
}

@keyframes rotatefan {
100% {
    transform: rotate(360deg);
}
}
@media only screen and (max-width: 400px) {
.fan .fan-image img {
    min-width: 2.8vw;
}
}
    
/* OUTLET AND PLUG DRAGABLE */

    .socket{
    width: 4.4vw;
    min-height: 1.9vw;
    position: fixed;
    bottom: 4vw;
    right:54vw;
    background-image: url("../assets/socket.svg");
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 1;
}
    
.socket_cable {
    width: 12.5vw;
    height: 4vw;
    position: fixed;
    bottom: 2vw;
    right: 0;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 1000;
}

#outlet {
    width: 1.8vw;
    height: 1.8vw;
    position: relative;
    background: rgb(255, 255, 255);
    border: 0.15vw solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    box-shadow: 0.15vw 0.15vw black;
}

#outlet div {
    width: 1.3vw;
    height: 1.3vw;
    font-size: 12px;
    background: rgb(255, 255, 255);
    border-radius: 50%;
    border: 0.15vw solid black;
    cursor: pointer;
    z-index: 1;
}

#outlet:before {
    content: '';
    width: 0.3vw;
    height: 0.3vw;
    position: absolute;
    border-radius: 50%;
    background: #000000;
    left: 0.35vw;
    top: 40%;
    z-index: 2;
}

#outlet:after {
    content: '';
    width: 0.3vw;
    height: 0.3vw;
    position: absolute;
    border-radius: 50%;
    background: #000000;
    right: 0.35vw;
    top: 40%;
    z-index: 2;
}


#plug {
    width: 1.1vw;
    height: 1.4vw;
    bottom: calc(3.8vw - 1.1vw);
    right: calc(9.4vw - 1.1vw);
    position: fixed;
    background:
        radial-gradient(circle at 50% 100%, black, transparent 33%),
        linear-gradient(to top, #222 50%, transparent 50%),
        linear-gradient(to right, transparent 14%, DarkGray 14%, DarkGray 26%, transparent 26%, transparent 70%, DarkGray 70%, DarkGray 82%, transparent 82%);
    cursor: pointer;
    border-radius: 0 0 50% 50%;
    z-index: 99;
}
    
#cord {
    width: 9vw;
    height: 6vh;
    bottom: 0;
    right: 0;
    border-left: 0.25vw solid #111;
    border-bottom: 0.25vw solid #111;
    border-radius: 0 0 0 15rem;
    pointer-events: none;
    position: fixed;
    z-index: 1;
}

.plugged {
    bottom: calc(5.4vw - 1.1vw) !important;
    right: calc(12.15vw - 1.1vw) !important;
    background: black !important;
    border-radius: 40% !important;
    box-shadow: inset 0 0 0.9vw black;
}

.plugged + #cord {
    width: calc(12.8vw - 1.1vw) !important;
    height: calc(5.4vw - 1.1vw) !important;
    z-index: 3 !important;
}

/* PICTURE */

.picture {
    width:7vw;
    position: fixed;
    top: 24vw;
    margin: 0 1vw;
    right: 3vw;
    }
.hook {
    width: 0.3vw;
    height: 0.3vw;
    background-color: #000000;
    margin: 0 auto 1.7vw auto;
    border-radius: 50%;
}
.hook:before {
    content: '';
    width: 3vw;
    height: 3vw;
    border: 0.15vw solid #000000;
    position: absolute;
    left: 2vw;
    top:0.55vw;
    transform: rotate(45deg);
    z-index: -1;
    border-radius: 0.15vw;
}
.frame {
    height: 8vw;
    border-top: 0.3vw solid #000000;
    border-right: 0.3vw solid #000000;
    border-bottom: 0.3vw solid #000000;
    border-left: 0.3vw solid #000000;
    box-shadow: 0.3vw 0.3vw 0 0 rgb(0, 0, 0);
    z-index: 1;
}
.inside {
    height: 7.6vw;
    background: linear-gradient(149deg, #d3d4d5 0%, #d3d4d5 50%, #cccccc 51%, #cccccc 100%);
    border: 0.6vw solid #fff;
    box-shadow: 0.1vw 0.1vw 0.1vw 0.1vw rgba(189, 193, 194, 0.3) inset;
}


/* CABINETS */

#cabinet1{
    position: fixed;
    width: 7.9vw;
    bottom: 2vw;
    right:39.5vw;
}
.cabinet{
    width: 7vw;
    height: 9.2vw;
    border-top: 0.3vw solid var(--black);
    border-left: 0.3vw solid var(--black);
    border: 0.15vw solid var(--black);
    background: var(--white);
    padding: 0.30vw;
    z-index: 3;
}
.cabinet:before {
    content: "";
    position: absolute;
    top: -0.12vw;
    right: -2.5vw;
    background-color: var(--black);
    width: 2.5vw;
    height: 9.1vw;
}
.cabinet:after{
    content: "";
    position: absolute;
    border: 0.15vw solid var(--black);
    inset: 0.30vw;
}
.shelf{
    width: 7vw;
    height: 2.86vw;
    display: flex;
    background: var(--black);
    position: relative;
    cursor: pointer;
    transition-duration: 0.2s;
    margin-bottom: -0.12vw;
}
.shelf-front{
    width: 7vw;
    height: 2.86vw;
    z-index: 999;
    background: var(--white);
    border: 0.15vw solid var(--black);
    transition-duration: 0.3s;
    transition-timing-function: easy;
}
.shelf-front::after{
    content: "";
    width: 2vw;
    height: 0.6vw;
    border: 0.15vw solid var(--black);
    border-top: 0.3vw solid var(--black);
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 99999;
}

.shelf-front:hover{
    transform: translateX(-2vw);
    border-right: 0.4vw solid var(--black);
    z-index: 6;
    
}

.shelf-front:hover .paper::before{
    content: " ";
    position: fixed;
    left: -0.15vw;
    bottom: -0.15vw;
    width: 6.8vw;
    height: 2.86vw;
    z-index: 999;
    background: var(--white);
    border: 0.15vw solid var(--black);
    transition: 0;
    animation: cover 0s;
    
}
@keyframes cover {
    0%{ opacity: 1;}
    100%{opacity: 1;}
}
.paper{
    display: none;
    text-align: center;
    padding: 0.8vw 0.3vw 0 0;
    overflow: hidden;
}
.paper p{
    font-size: 1vw;
    transform: rotate(60deg);
    letter-spacing: -0.05vw;
}
.shelf-front:hover .paper{
    position: absolute;
    top: -3.8vw;
    left: 1.5vw;
    width: 3.2vw;
    height: 3.8vw;
    background: var(--white);
    border: 0.15vw solid var(--black);
    display: block;
    z-index: 2;
    animation: paper 1s;
}

@keyframes paper {
    0%{top: 0; height: 0; }
    100%{top: -3.8vw; height: 3.8vw; }
}

/* PC */
#pc {
    width: 4.93vw;
    height: 8.55vw;
    position: fixed;
    bottom: 2vw;
    right: 16vw;
    background-repeat: no-repeat;
    background-position: top center;
    z-index: 26;
    border: 0.15vw solid var(--black);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    background: var(--white);
}
.pc-front {
    width: 80%;
    position: relative;
}
.pc-front::after {
    content: "";
    position: absolute;
    border: 0.15vw solid var(--black);
    inset: 0.18vw;
}
.pc-side {
    width: 20%;
    background: var(--black);
    position: relative;
}
.pc-front span:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    height: 15%;
    width: 100%;
    background: none;
    border-bottom: 0.15vw solid var(--black);
}
.pc-front span:nth-child(2) {
    position: absolute;
    top: 15%;
    left: 0;
    height: 15%;
    width: 100%;
    background: none;
    border-bottom: 0.15vw solid var(--black);
    z-index: 9;
}
.pc-front span:nth-child(3) {
    position: absolute;
    top: 30%;
    left: 0;
    height: 15%;
    width: 100%;
    background: none;
    border-bottom: 0.15vw solid var(--black);
}
.pc-front span:nth-child(4) {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55%;
    background: none;
    z-index: 9;
}

/* PC PARTS */

/* PC CD SLOT */
.pc-front span:nth-child(2) span {
    position: absolute;
    top: 0.17vw;
    left: 0.48vw;
    height: 0.8vw;
    width: 2.8vw;
    background: var(--white);
    border: 0.1vw solid var(--black);
}
.pc-front span:nth-child(2) span span:nth-child(1) {
    position: absolute;
    top: 0.04vw;
    left: 0.07vw;
    height: 0.30vw;
    width: 2.51vw;
    background: var(--white);
    border: 0.1vw solid var(--black);
}

.pc-front span:nth-child(2) span span:nth-child(2) {
    position: absolute;
    top: 0.4vw;
    left: 1.7vw;
    height: 0.15vw;
    width: 0.15vw;
    background: var(--white);
    border: 0.1vw solid var(--black);
    border-radius: 50%;
}
.pc-front span:nth-child(2) span span:nth-child(3) {
    position: absolute;
    top: 0.38vw;
    left: 2.06vw;
    height: 0.20vw;
    width: 0.5vw;
    background: var(--white);
    border: 0.1vw solid var(--black);
    border-radius: 0.1vw;
    cursor: pointer;
}
.pc-front span:nth-child(2) span span:nth-child(3):hover {
    background: red;
}

/* PC SWITCH SLOT */
.pc-front span:nth-child(4) span {
    height: 2vw;
    width: 1vw;
    background: var(--white);
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: 0.15vw solid var(--black);
    display: flex;
    flex-direction: column;
}
.pc-front span:nth-child(4) .pc-switch-slot span:nth-child(1) {
    height: 0.4vw;
    width: 0.4vw;
    background: rgb(255, 255, 255);
    border-radius: 50%;
    border: 0.15vw solid var(--black);
    position: absolute;
    top: 0.35vw;
    cursor: pointer;
}
.pc-front span:nth-child(4) .pc-switch-slot span:nth-child(2) {
    height: 0.25vw;
    width: 0.25vw;
    background: var(--white);
    border-radius: 50%;
    border: 0.1vw solid var(--black);
    top: 0.95vw;
}
.pc-front span:nth-child(4) .pc-switch-slot span:nth-child(3) {
    height: 0.25vw;
    width: 0.25vw;
    background: var(--white);
    border-radius: 50%;
    border: 0.1vw solid var(--black);
    position: absolute;
    top: 1.4vw;
}

#windowsButton.off {
    cursor: pointer;
    stroke-width:0px;
    width: 0.26vw;
    height: 0.26vw;
    position: absolute;
    top: -0.02vw;
    right:-0.02vw;
    background: rgba(255, 0, 0, 0);
    border-radius: 1vw;
    border: 0;
}
#windowsButton.off:hover {
    background: rgb(38, 255, 0);
}
#windowsButton.on {
    cursor: pointer;
    stroke-width:0px;
    width: 0.26vw;
    height: 0.26vw;
    position: absolute;
    top: -0.02vw;
    right:-0.02vw;
    border-radius: 50%;
    background-color: #0f0; /* Green color */
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.6); /* Glowing effect */
    animation: flicker 0.2s infinite;
    border:0;
}

@keyframes flicker {
0% {
    opacity: 1;
    transform: scale(1);
}
10% {
    opacity: 0.8;
    transform: scale(1.3);
}
20% {
    opacity: 1;
    transform: scale(1);
}
30% {
    opacity: 0.6;
    transform: scale(0.85);
}
40% {
    opacity: 0.9;
    transform: scale(1);
}
50% {
    opacity: 0.7;
    transform: scale(1.05);
}
60% {
    opacity: 1;
    transform: scale(1);
}
70% {
    opacity: 0.5;
    transform: scale(0.95);
}
80% {
    opacity: 0.8;
    transform: scale(1);
}
90% {
    opacity: 1;
    transform: scale(1);
}
100% {
    opacity: 0.7;
    transform: scale(1);
}
}
    
/* WINDOW */

.window-frame {
    height: 16vw;
    min-height: 17vw;
    max-width: 16vw;
    z-index: 1;
    position: fixed;
    bottom: 13vw;
    right: 53vw;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    border: 0.15vw solid var(--black);
    border-right: 0.3vw solid var(--black);
    }
    .window-frame .window {
    width: 16vw;
    height: 16.8vw;
    background: var(--white);
    padding: 1vw 0.6vw;
    }
    .window-frame .window .blinds-top {
    position: absolute;
    width: 18vw;
    height: 1vw;
    background: var(--white);
    left: -1vw;
    margin-top: -1.2vw;
    border: 0.15vw solid var(--black);
    border-right: 0.3vw solid var(--black);
    }
    .window-frame .window .blinds-top .strings {
    position: absolute;
    width: 0.15vw;
    height: 17.5vw;
    background: var(--black);
    margin-top: 0.8vw;
    transition: 0.5s;
    }
    .window-frame .window .blinds-top .strings:hover {
    height: 18.5vw;
    }
    .window-frame .window .blinds-top .strings::after {
    content: "";
    position: absolute;
    width: 0.35vw;
    left: -0.1vw;
    height: 0.5vw;
    background: var(--black);
    bottom: 0;
    z-index: 22;
    }
    .window-frame .window .blinds-top .strings:last-child {
    left: 20%;
    }
    .window-frame .window .blinds-top .strings:nth-child(2) {
    right: 20%;
    }
    .window-frame .window .blinds-top .blind-container {
    position: absolute;
    width: 17vw;
    height: 16vw;
    left: 0.2vw;
    margin-top: 1vw;
    }
    .window-frame .window .blinds-top .blind-container .blind {
    width: 100%;
    height:0.8vw;
    background: var(--black);
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transform: rotateX(85deg);
    transform: rotateX(85deg);
    }
    
    .window-frame .window .pane {
    float: left;
    width: 46%;
    height: 99%;
    margin: 2%;
    background: var(--white);
    border: 0.15vw solid var(--black);
    border-left: 0.3vw solid var(--black);
    }

/* Triggered by the 'hovered' class added by JS */
.window-frame .window .blinds-top .blind-container.hovered * {
    -webkit-transform: rotateX(10deg);
    transform: rotateX(10deg);
}
    
/* MOBILE RESPONSIVE ***********************************************************************/

@media only screen and (max-width: 767px) {
    
    /* Remove */
    .window-frame, .cat, .cabinet, .socket, .picture, .clock, .socket_cable {display: none;}

    /* GROUND */

    .ground{
        height: 20px;
        width: 100%;
        position: absolute;
        bottom: 40px;
        background-blend-mode: multiply;
        border-top: 2px solid black;
        border-bottom: 2px solid var(--black);
        z-index: 9999;
    }
    .ground::before{
        content: "";
        height: 1px;
        width: 100%;
        position: absolute;
        top: 1px;
        background: var(--black);
    }

    /* ROOM */

    .room{
        width: 100vw;
        height: calc(100svh - 38px) !important;
        position: relative;
        bottom: 0;
        right:0;
        display: flex;
        flex-direction: column;
        align-items: start;
        align-content: start;
        justify-content: space-between;
        padding: 0;
        z-index: 9;
        overflow: hidden;
    }

    /* ROOM LEFT */

    .room_left {
        width: 100%;
        height:25svh;
        z-index: 25;
        padding: 0;
        position: fixed;
        
    }
    .content-left{
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
    }
    /* ROOM RIGHT */
    .room_right{
        width:100%;
        height:75svh;
    }
    .table{
        width: 96vw;
        height: 36.55vw;
        position: absolute;
        bottom: 2px;
        right:2vw;
        background-image: url("../assets/table.svg");
        background-repeat: no-repeat;
        background-position: center bottom;
        z-index:25;
    }

    /* PC */
    #pc {
        width: 22vw;
        height: 33vw;
        position: absolute;
        bottom: 2px;
        right: 12.3vw;
        background-repeat: no-repeat;
        background-position: top center;
        z-index: 26;
        border: 1.5px solid var(--black);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: nowrap;
        background: var(--white);
    }

    .pc-front {
        width: 80%;
        position: relative;
    }
    .pc-front::after {
        content: "";
        position: absolute;
        border: 2px solid var(--black);
        inset: 2px;
    }
    .pc-side {
        width: 20%;
        background: var(--black);
        position: relative;
    }
    .pc-front span:nth-child(1) {
        position: absolute;
        top: 0;
        left: 0;
        height: 15%;
        width: 100%;
        background: none;
        border-bottom: 1px solid var(--black);
    }
    .pc-front span:nth-child(2) {
        position: absolute;
        top: 15%;
        left: 0;
        height: 15%;
        width: 100%;
        background: none;
        border-bottom: 1px solid var(--black);
        z-index: 9;
    }
    .pc-front span:nth-child(3) {
        position: absolute;
        top: 30%;
        left: 0;
        height: 15%;
        width: 100%;
        background: none;
        border-bottom: 1px solid var(--black);
    }
    .pc-front span:nth-child(4) {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 55%;
        background: none;
        z-index: 9;
    }
    
    /* PC PARTS */
    
    /* PC CD SLOT */
    .pc-front span:nth-child(2) span {
        position: absolute;
        top: 5%;
        left: 7.5%;
        height: 85%;
        width: 86%;
        background: var(--white);
        border: 1.5px solid var(--black);
    }
    .pc-front span:nth-child(2) span span:nth-child(1) {
        position: absolute;
        top: 70%;
        left: 5%;
        height: 5%;
        width: 10%;
        background: var(--white);
        border: 1px solid var(--black);
    }
    
    .pc-front span:nth-child(2) span span:nth-child(2) {
        position: absolute;
        top: 70%;
        left: 82%;
        height: 5%;
        width: 5%;
        background: var(--white);
        border: 1px solid var(--black);
        border-radius: 50%;
    }
    .pc-front span:nth-child(2) span span:nth-child(3) {
        position: absolute;
        top: 70%;
        left: 90%;
        height: 7%;
        width: 7%;
        background: var(--white);
        border: 1px solid var(--black);
        border-radius: 0.1vw;
        cursor: pointer;
    }
    .pc-front span:nth-child(2) span span:nth-child(3):hover {
        background: red;
    }
    
    /* PC SWITCH SLOT */
    .pc-front span:nth-child(4) span {
        height: 50%;
        width: 35%;
        background: var(--white);
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        border: 2px solid var(--black);
        display: flex;
        flex-direction: column;
    }
    .pc-front span:nth-child(4) .pc-switch-slot span:nth-child(1) {
        height: 7px;
        width: 7px;
        background: rgb(255, 255, 255);
        border-radius: 50%;
        border: 2px solid var(--black);
        position: absolute;
        top: 25%;
        cursor: pointer;
    }
    .pc-front span:nth-child(4) .pc-switch-slot span:nth-child(2) {
        height: 6px;
        width: 6px;
        background: var(--white);
        border-radius: 50%;
        border: 1px solid var(--black);
        top: 55%;
    }
    .pc-front span:nth-child(4) .pc-switch-slot span:nth-child(3) {
        height: 6px;
        width: 6px;
        background: var(--white);
        border-radius: 50%;
        border: 1px solid var(--black);
        position: absolute;
        top: 80%;
    }
    
    #windowsButton.off {
        cursor: pointer;
        stroke-width:0px;
        width: 6px;
        height: 6px;
        position: absolute;
        top: -0.02vw;
        right:-0.02vw;
        background: rgba(255, 0, 0, 0);
        border-radius: 1vw;
        border: 0;
    }
    #windowsButton.off:hover {
        background: rgb(38, 255, 0);
    }
    #windowsButton.on {
        cursor: pointer;
        stroke-width:0px;
        width: 6px;
        height: 6px;
        position: absolute;
        top: -0.02vw;
        right:-0.02vw;
        border-radius: 50%;
        background-color: #0f0; /* Green color */
        box-shadow: 0 0 20px rgba(0, 255, 0, 0.6); /* Glowing effect */
        animation: flicker 0.2s infinite;
        border:0;
    }

    .lamp-1{
        display: none;
    }

    .c_lamp_mobile_wrap{
        width: 100vw;
        height: 63vh;
        position: absolute;
        bottom: 40px;
        overflow: hidden;
    }
    .lamp-1-mobile{
        top: 0!important;
        right:40vw;
    }
    .c_lamp_mobile{
        width: 20vw;
        height: 12.5vh;
        position: absolute;
        z-index: 0;
    }
    
    .c_lamp_mobile::after{
        content: " ";
        width: 120vw;
        height: 60vh;
        position: absolute;
        bottom: -60vh;
        left:-49.3vw;
        background: var(--socket-color);
        clip-path: polygon(44% 0, 55% 0, 100% 100%, 0% 100%);
    }
    
    .c_lamp_mobile span:nth-child(1){
        width: 2px;
        height: 25vw;
        position: absolute;
        top: 0;
        right:9.5vw;
        background: rgb(0, 0, 0);
    }
    .c_lamp_mobile span:nth-child(2){
        width: 5px;
        height: 3vw;
        position: absolute;
        top: 12vw;
        right:9.1vw;
        background: rgb(0, 0, 0);
    }
    .c_lamp_mobile span:nth-child(3){
        width: 20vw;
        height: 12vw;
        position: absolute;
        top: 15vw;
        right:0;
        background: rgb(0, 0, 0);
        clip-path: polygon(30% 0, 70% 0, 100% 100%, 0% 100%);
        z-index: 2;
    }
    .c_lamp_mobile span:nth-child(4){
        width: 5.6vw;
        height: 5.6vw;
        position: absolute;
        top: 23.5vw;
        right:6.8vw;
        background: rgb(255, 255, 255);
        border-radius: 50%;
        border: 1.5px solid black;
        z-index: 1;
    }

    footer{
    height: 40px;
    padding: 0 20px;
    text-align: center;
    }
    footer p, footer a {
    font-size: 14px!important;
    line-height: 40px;
    }
    .more-info-dark{
    background: var(--white);
    }

    /* NIGHT DAY */

    .night-toggle {
        width: 8vw!important;
        height: 8vw!important;
        right: 15vw!important;
        top: 3vw!important;
        position: fixed;
        background: var(--white);
        border:2px solid var(--black);
        border-radius: 50%;
        padding: 0.4vw 0.3vw;
        transition: 1s;
    }
    .night-toggle:hover {
        width: 8vw;
        height: 8vw;
        background: var(--black);
    }

    .night-toggle:hover .moon {
        background: var(--black);
        box-shadow: -0.9vw 0vw 0 0.5vw var(--white);
    }
    .night-toggle:hover{
        cursor: pointer;
    }
    .moon {
        background-color: transparent;
        box-shadow: -1vw 0vw 0 0.5vw var(--black);
        border-left:2vw solid var(--white);
        border-radius:50%;
        width: 3.2vw;
        height: 3.2vw;
        margin-left:2.5vw;
        margin-top:1.4vw;
        transition: 2s;
        }
    .sun {
        background-color: var(--white);
        border-radius:50%;
        width: 4vw;
        height: 4vw;
        transition: 2s;
        margin-left:1.4vw;
        margin-top:1vw;
        background: var(--white);
    }

    /* MONITOR */

    .monitor{
        width: 40.7vw;
        min-height: 27.4vw;
        position: absolute;
        bottom: 36.7vw;
        right:21.4vw;
        background-image: url("../assets/monitor_1.svg");
        background-repeat: no-repeat;
        background-position: top center;
        z-index:100;
    }
    .screen-type {
        width: 37.7vw;
        padding: 1.5vw 1.5vw;
        font-size: 11px;
        line-height: 13px;
        margin: 1.4vw;
        height: 21.3vw;
    }
    .screen-type:after {
        content: "";
        margin-left: 8px;
        border-right:2px solid rgb(255, 255, 255);
        width: 0;
        font-size: 12px;
        -webkit-animation: blink 850ms steps(2, start) infinite;
        animation: blink 850ms steps(2, start) infinite;
    }
    /* CHAIR MOBILE */

    .chair{
        width: 38.6vw;
        min-height:45vw;
        bottom: 0;
        right:40vw;
        background: url("../assets/chair-2.svg");
        background-repeat: no-repeat;
        background-position: top center;
    }
    
    #chairtop {
        width: 28.6vw;
        height: 20.5vw;
      }
    /* MARBELLA */
    .marbella{
        min-width: 9vw!important;
        position: absolute;
        bottom: 70vw;
        right:63vw;
        background:black!important;
        z-index:25;
        padding: 1.4vw 1.3vw 1.4vw 1.5vw!important;
        box-shadow: 0.2vw 0.2vw #000;
        z-index: 9999;
    }
    .marbella p{
        color: white!important;
        font-size: 2.8vw!important;
        line-height: 2.8vw!important;
        letter-spacing: 0.2vw;
    }

    /* FAN */
    .fan {
        width: 12.6vw;
        height: 14.5vw;
        background: rgb(255, 255, 255);
        border: 1.5px solid black;
        position: absolute;
        bottom: 52vw;
        right: 66vw;
        padding: 2px;
        border-radius: 4px;
    }

    .fan .fan-buttons, .fan .fan-image, .fan {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .fan-image {
        width: 9.4vw;
        height: 9.4vw;
        border: 2px solid black;
    }
    .fan .fan-image img {
        width: 8.9vw;
        height: 8.9vw;
    }
    .fan .fan-buttons p {
        background: #ffffff;
        padding: 0.1vw 0.3vw;
        color: var(--black);
        border-radius: 1vw;
        font-size: 1.5vw!important;
        border: 0.15vw solid black;
        margin-right: 0.1vw;
        margin-top: 1vw;
        max-height: 2.5vw;
        line-height:1.8vw;
    }

    /* SPEAKERS */

    .speaker-audio{
        width: 6vw;
        height: 9vw;
        position: absolute;
        bottom: 36.5vw;
        right:14.5vw;
        z-index:25;
    }
    .speaker-left{
        width: 6vw!important;
        height: 9vw!important;
        position: absolute;
        bottom: 36.5vw;
        right:63vw!important;
        z-index:25;
        display: block;
    }
    .speaker-box{
        width: 5.5vw;
        height: 7.5vw;
        background: rgb(255, 255, 255);
        border-radius: 3vw;
        position: relative;
        border: 2px solid black;
        padding: 1px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-content: center;
        align-items: center;
    }
    .speaker-box::before{
        content: "";
        width: 6vw;
        height: 7.4vw;
        background: rgb(0, 0, 0);
        border-radius: 2.2vw;
        position: absolute;
        z-index: -1;
        top: -0.5vw;
        left: 0;
        border: 2px solid black;
    }
    .low-driver{
        width: 4vw;
        height: 4vw;
        background: rgb(255, 255, 255);
        border-radius: 4vw;
        border: 4px double black;
        display: flex;
        justify-content: center;
        align-content: center;
        padding: 0.4vw;
    }
    .low-driver::before{
        content: "";
        width: 1vw;
        height: 1vw;
        background: rgb(0, 0, 0);
        border-radius: 1vw;
        border: 0.15vw solid black;
    }
    .stand{
        width: 90%;
        height: 5px;
        background: rgb(255, 255, 255);
        position: absolute;
        border: 2px solid black;
        bottom: 0;
        left: 0.35vw;
        border-radius: 0.18vw 0.18vw 0 0;
    }
    .stand::before{
        content: "";
        width: 60%;
        height: 0.8vw;
        background: rgb(0, 0, 0);
        position: absolute;
        bottom: 3px;
        left: 0.8vw;
    }

    /* AUDIO */

    #toggleButton.off, #toggleButton.on {
        width: 1.5vw;
        height: 1.5vw;
        border: 2px solid var(--black);
        border-radius: 4vw;
        position: absolute;
        bottom: 0.2vw;
        cursor: pointer;
    }
    #toggleButton.off {
        background: rgb(255, 0, 0)!important;
    }

    #toggleButton.on {
        cursor: pointer;
        background-color: #0f0; /* Green color */
        box-shadow: 0 0 20px rgba(0, 255, 0, 0.6); /* Glowing effect */
        animation: flickeraudio 0.4s infinite;
        animation:  0.2s infinite;
    }

    /* AQUARUM */

    .aquarium {
        width: 10.8vw;
        height: 12.2vw;
        position: absolute;
        bottom: 36.5vw;
        right:86vw;
        z-index:10;
    }
    #fish1 {
        position: absolute;
        top: 3.6vw;
        left: 1.5vw;
        transform: translateY(-60%);
        animation: swim 10s infinite;
        width: 3vw;
        height: 1.8vw;
    }

      /* BOOKS */

    .books {
        width: 14.6vw;
        height: 21vw;
        background: red;
        text-align: center;
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-content: flex-start;
        position: fixed;
        bottom: 36.5vw;
        right:72.5vw;
        color: var(--black);
    }

    .books::before{
        content: " ";
        position: absolute;
        width: 14.6vw;
        height: 21vw;
        background: #000;
        z-index: 1;
    }

    .books div {
        border:2px solid black;
        font-size: 6px;
        font-family: 'joystix monospace', sans-serif;
        line-height: 6px;
        writing-mode: vertical-rl;
        z-index: 2;
        background: var(--white)
    }

    .mug{
        position: absolute;
        bottom: 36vw;
        right: 5.5vw;
    }
    #mug{
        width:6vw;
        height: 8.2vw;
        stroke-width:2px!important;
    }

    #mug path{
        fill:#fff; 
        stroke:#000; 
        stroke-miterlimit:10; 
        stroke-width:2px;
    }
    
    #mug #mug_group .mug_smoke{   
        stroke-width:2px!important;
        stroke:#000; 
        stroke-miterlimit:10;
    }

}