/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: floralwhite;
  /*background-image: url('media/bg1.jpg');*/
  color: black;
  font-family: Verdana Italic;
  cursor: none; /* hide the real cursor */
  /*background-image: url('white bg feathers.gif');*/
}
html, body {
  margin: 0;
  height: 100%;
  cursor: none;
}
img {
  width: 100%;
}
h1 {
  border: 2px solid powderblue;
  padding: 30px;
  margin: 50px;
}
p {
  border: 2px solid powderblue;
  padding: 30px;
  margin: 100px;
}
/*dialog {*/
/*  width: 300px;*/
/*  padding: 20px;*/
/*  border: 2px solid #333;*/
/*  border-radius: 8px;*/
/*  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);*/
/*  position: fixed;*/
/*  top: 230px;*/
/*  right: 800px;*/
/*}*/
/*dialog::backdrop {*/
/*            background-color: rgba(0, 0, 0, 0.5);*/
/*}*/
.logo1 {
  width: 95px;
  height: 95px;
  position: fixed;
  top: 230px;
  right: 400px;
}
.logo2 {
  width: 300px;
  height: 140px;
  position: fixed;
  top: 200px;
  right: 100px;
}
.sky-image {
  position: fixed;
  top: 120px;    /* match these to line up with the transparent cutout */
  left: 170px;
  width: 425px;
  height: 300px;
  object-fit: cover;  /* crops to fill the space without distorting */
  z-index: 1;
}
.window {
  width: 500px;
  height: 400px;
  position: fixed;
  top: 100px;
  left: 100px;
  z-index: 2; /* stays on top, frame shows over the sky image */
}

#customCursor {
  position: fixed;
  top: 250px;
  left: 460px;
  width: 60px;   /* adjust to taste */
  height: 60px;
  pointer-events: none; /* so it doesn't block clicks */
  z-index: 9999;
  transform: translate(-50%, -50%); /* centers the image on the pointer */
}