body {
  font-family: monospace;
  margin: 0;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#info {
  position: absolute;
  background: rgba(255,255,255,0.85);
  color: black;
  font-size: 14px;
  padding: 5px 10px;
  border: 1px solid black;
  display: none;
  pointer-events: none;
  z-index: 100;
  max-width: 200px;
}


#viewport {
  width: 700px;
  height: 700px;
  overflow: hidden;
  position: relative;
}

#room {
  width: 720px;
  height: 720px;
  position: relative;
  transform-style: preserve-3d;
  overflow: hidden;
  background-color: #EDF7F6;
}


#background {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url('/brisroom.png') no-repeat center center;
  background-size: cover;
  z-index: 0;
}

.room-stuff {
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.lightbulb {
  left: 338px;
  top: 53px;
  width: 42px;
  height: 42px;
  z-index: 10;
}

.lightbulb:hover {
  background: linear-gradient(-45deg, #BB0038, #3a11cf, #55fc4c);
	background-size: 200% 200%;
	animation: gradient 15s ease infinite;
	opacity: 0.6;
	height: 42px;
	width: 42px;
	border-radius: 50%;
	position: absolute;
	left: 340px;
  top: 55px;
  z-index: 10;
}

.lightbulb:active {
  background: linear-gradient(-45deg, #BB0038, #3a11cf, #55fc4c);
	background-size: 300% 300%;
	animation: gradient 15s ease infinite;
	opacity: 0.6;
	height: 100vh;
	width: 100vw;
	position: absolute;
	border-radius: 0%;
	left: 0px;
  top: 0px;
  z-index: 10;
}

 @keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


#selector-board {
      position: absolute;
      transform-style: preserve-3d;
      transform: rotateY(20deg) rotate(6deg) skewX(5deg);
      width: 100px;
      scale: 0.8;
      z-index: 3;
      top: 120px;
    }
    
    #wallselectors {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0px;
      max-width: 80px;
      margin-bottom: 0px;
    }
    
    #bedselectors {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0px;
      max-width: 100px;
      margin-bottom: 5px;
    }

    .option {
      display: flex;
      align-items: center;
      padding: 1px;
      cursor: pointer;
      user-select: none;
    }

    /*styles triggered by :has() pseudo-class */
    body:has(input[value="bedspread 1"]:checked) .bed {
      background-image: url('bed.png');
    }
    body:has(input[value="bedspread 2"]:checked) .bed {
      background-image: url('bed2.png');
    }
    body:has(input[value="white"]:checked) #room {
      background-color: #EDF7F6;
    }
    body:has(input[value="blue"]:checked) #room {
      background-color: #742CFA;
    }
    body:has(input[value="red"]:checked) #room {
      background-color: #BB0038;
    }
    body:has(input[value="green"]:checked) #room {
      background-color: #A0FF86;
    }



.bed {
  left: 310px;
  top: 420px;
  width: 570px;
  height: 290px;
  background-image: url('bed.png');
  clip-path: polygon(0% 35%, 63% 0%, 100% 7%, 100% 100%, 0% 100%);
  z-index: 4;
}

.bed:hover {
  background-image: url('bed.png');
}

.desk {
  left: 258px;
  top: 280px;
  width: 365px;
  height: 314px;
  background-image: url('desk.png');
  z-index: 2;
}

.monitor1 {
  left: 363px;
  top: 310px;
  width: 115px;
  height: 70px;
  background-image: url('monitor1.png');
  z-index: 4;
}

.monitor2 {
  left: 293px;
  top: 282px;
  width: 60px;
  height: 112px;
  background-image: url('monitor1.png');
  z-index: 4;
}

.tablet {
  left: 400px;
  top: 365px;
  width: 125px;
  height: 60px;
  background-image: url('tablet.png');
  z-index: 4;
}

.tablet iframe {
  position: absolute;
  left: 240px;
  top: 88px;
  width: 815px;
  height: 425px;
  background-image: url('tablet.png');
  z-index: 4;
  zoom: 0.1;
  transform: skewX(-30deg) skewY(2deg);
  pointer-events: none;
}

.headphones {
  left: 277px;
  top: 435px;
  width: 50px;
  height: 50px;
  background-image: url('headphones.png');
  z-index: 2;
}

.headphones:hover {
  transform: rotate(20deg) skewX(10deg);
}

.computer {
  left: 235px;
  top: 440px;
  width: 146px;
  height: 120px;
  background-image: url('computer.png');
  z-index: 1;

}

.computer:hover {
  background-image: url('computerlights.gif');

}

.chair {
  left: 235px;
  top: 490px;
  width: 96px;
  height: 100px;
  background-image: url('chair.png');
  z-index: 3;
  perspective: 100px;
}

.chair:hover {
  transform: translateX(-30px);
}


.closet {
  left: -20px;
  top: 305px;
  width: 220px;
  height: 300px;
  background-image: url('closet.png');
  z-index: 1;
  overflow: hidden;
}

.clothing img {
  object-fit: scale-down;
  width: 160px;
  max-height: 300px;
  pointer-events: none;
  transform-style: preserve-3d;
  transform: rotateY(-25deg);
}

.clothing:hover {
  transform-style: preserve-3d;
  transform: rotateZ(5deg);
}

.c1 {
  position: absolute;
  top:-5px;
  left:-35px;
  z-index: 7;
  scale: 0.8;
}

.c2 {
  position: absolute;
  top:10px;
  left:-5px;
  z-index: 6;
  scale: 1.1;
}
.c3 {
  position: absolute;
  top:27px;
  left:20px;
  z-index: 5;
}

.c4 {
  position: absolute;
  top:37px;
  left:55px;
  z-index: 4;
  scale: 1.1;
}

.c5 {
  position: absolute;
  top:60px;
  left:73px;
  z-index: 3;
  scale: 1.3;
}

.c6 {
  position: absolute;
  top: 68px;
  left:93px;
  z-index: 2;
  scale: 1.5;
}

.window {
  left: 550px;
  top: 155px;
  width: 165px;
  height: 262px;
  background-image: url('window.png');
  z-index: 3;
}


#sky {
  position: absolute;
  left: 555px;
  top: 155px;
  width: 145px;
  height: 252px;
  z-index: 1;
  transition: background-color 2s linear;
  clip-path: polygon(5% 12%, 100% 5%, 98% 100%, 5% 95%);
  overflow: hidden;
}

/* Stars */
.stars {
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 3px;
  background: white;
  opacity: 0.8;
  border-radius: 50%;
  z-index: 2;
  animation: twinkle 2s infinite ease-in-out;
  pointer-events: none;
  transition: opacity 1.5s ease-in-out;

  /* scatter */
  box-shadow:
    10px 20px white,
    50px 80px white,
    100px 30px white,
    30px 150px white,
    70px 200px white,
    120px 100px white,
    140px 220px white,
    40px 100px white,
    90px 180px white,
    20px 230px white;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.01); }
}

/* Clouds */
.clouds {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: url('https://i.gifer.com/3F3I.gif') repeat-x;
  background-size: contain;
  opacity: 0;
  z-index: 2;
  transition: opacity 1.5s ease-in-out;
}

@keyframes moveClouds {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}


.blurred {
  filter: blur(3px);
}