<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#bg {
  
  width: 100%;
  height: 100%;
}

h1 {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translatex(-50%);
  color: #f5f5f5;
  font-size: 32px;
  line-height: 60px;
  font-family: pacifico;
  text-align: center;
}

#fg {
  background: url("chrismas_morning_view.png");
  background-size: cover;
  border: 2px solid #555555;
  position: fixed;
  border-radius: 9px;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  transform: translate(-50%, -50%);
}

.window-frame {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  transform: translate(-50%, -50%);
  perspective: 2000px;
}
.window-frame:hover {
  cursor: pointer;
}
.window-frame:hover .left {
  transform: rotate3d(0, 1, 0, -140deg);
}
.window-frame:hover .right {
  transform: rotate3d(0, 1, 0, 140deg);
}
.window-frame h1 {
  color: firebrick;
}
.window-frame .window {
  background: url("window.png");
  background-size: 200px 400px;
  width: 200px;
  height: 400px;
  transform-style: preserve-3d;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}
.window-frame .window.left {
  float: left;
  transform-origin: left center;
}
.window-frame .window.right {
  float: right;
  transform-origin: right center;
}</pre></body></html>