img {
max-width:100%;
box-sizing:border-box;
}


html, body {
  height: 100%;
  margin: 0; 
}

body {
  background: radial-gradient( rgb(218, 172, 223), rgb(133, 104, 158), rgb(125, 170, 180));
}

img[src*='moon.png'] {
  position: absolute;
  top: 50px;
  left: 30px; 
  filter: drop-shadow:(5px 5px 10px rgba(98,0,0,0.5));
}

img[src*='wavyline1.png'] {

  position:absolute;
  left: 300px;
  top: 50px;
  opacity: 0.5;
}

h1 {
font-family:'Ballet';
font-size:125px;
position: absolute;
  left: 15%;
  top: 8%;
  opacity: 0.8;

}

h2 { 
font-family:'Georgia';
font-size:10px;
width:200px;
position: absolute;
left: 100px;
top: 500px;

}


.grid-container {
  position: absolute;
padding-bottom: 50px;
  right: 100px;
  max-height: 100vh;        
  flex-direction: column;     
}

.grid-label {
  color: black;
  margin: 10;
  text-align: center;
  font-family:Georgia, 'Times New Roman', Times, serif
  font-size: 30px;
}

.image-grid {  
      bottom: 20px;      
      right: 20px;
      display: grid;
      grid-template-columns: repeat(3, 120px); 
      grid-template-rows: repeat(4);  
      gap: 15px;      
    }

    .image-grid img {
      width: 100%;
      height: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border-radius: 8px;
  
    }

    .image-grid img:hover {
  opacity: .8 ;
    }

 .sources-list {
  position: relative; /* or absolute/fixed if you want */
  top: 80px;
  left: 75px;
  list-style: disc;  
  padding-left: 40px;     
  margin-top: 30px;      
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 16px;
  color: black;

 }

.zodiac-list li {
  margin-bottom: 10px;  
}