
body {
  margin: 0;
  height: 100vh;
  background: #222;
  color: #fff;
  overflow: hidden;
  transform: rotate(0.5deg);
}





.thevoid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, transparent 50px, rgba(0,0,0,0.95) 200px);
  pointer-events: none;
  transition: background 1s;
  z-index: 9997;
}


.candle-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  cursor: pointer;
  transform: rotate(-3deg);
  z-index: 9998;
  width: fit-content;
  height: fit-content;
}

.candle-img {
  width: 300px;
  height: auto;}

.flame {
  position: absolute;
  top: -10px;
  left: 0px;
  width: 300px;
  height: auto;
  opacity: 0;
  transition: all 3s 1s;
  transition: opacity 5s ease;
}

.candle-container.lit .flame {
  opacity: 1;
  animation: flicker 0.15s infinite alternate;
}

@keyframes flicker {
  from { transform: scale(1) rotate(1deg); opacity: 0.9; }
  to { transform: scale(1.1) rotate(-1deg); opacity: 1; }
}






.parent {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;

}

.div1 { grid-area: 1 / 1 / 2 / 3; 
    transform: rotate(-0.5deg);
}
.div2 { grid-area: 2 / 1 / 4 / 2; background-image: url(Images/20251007_093743.jpg);
background-size: contain;
transform: rotate(0.5deg);}
.div3 { grid-area: 2 / 2 / 4 / 3; background-image: url(Images/20251014_195353.jpg);
background-size: contain;
transform: skew(5deg);}
.div4 { grid-area: 2 / 3 / 3 / 5; 
transform: rotate(-30deg);
text-align: right;}
.div5 { grid-area: 2 / 5 / 4 / 6; background-image: url(Images/IMG_1156.PNG);
    background-size: contain;
    background-repeat: no-repeat;
object-fit: fill;
transform: rotate(1deg);}
.div6 { grid-area: 3 / 3 / 5 / 4;
transform: rotate(15deg);}
.div7 { grid-area: 3 / 4 / 5 / 5; 
transition-duration: 10s;}
.div7:hover{transform:scaleX(300%);}
.div8 { grid-area: 4 / 1 / 5 / 3; }
.div9 { grid-area: 4 / 5 / 6 / 6; background-image: url(Images/IMG_1233.png);
background-size: contain;
background-repeat: no-repeat;
transform: skewY(10deg);}