@font-face {
  font-family: "DOS24";
  src: url('fonts/Web437_DOS-V_re_ANK24.woff') format('woff');
}

* {
  box-sizing: border-box; 
}

body {
  background-image: url('https://cdn.mos.cms.futurecdn.net/HuGGeENt6kGyixe3hT9tnY.jpg');
  background-attachment: fixed; 
  font-family: "DOS24", monospace;
  text-align: center;
  font-size: 16px;
  color: white;
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  display: inline-block; 
  transition: transform 0.3s ease; 
}

.container:hover {
  transform: scale(1.1); 
}

.image, .image-container img {
  display: block;
  max-width: 100%;       
  height: auto;          
}


.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #00ff00;        
  font-size: 1.5rem;     
  pointer-events: none; 
  text-shadow: 2px 2px 4px black; 
}


@media (max-width: 600px) {
    .image-container {
        flex-direction: column; 
        gap: 30px;             
        align-items: center;  
    }

    .planet-wrapper.sun { width: 70%; }
    .planet-wrapper.gas { width: 50%; }
    .planet-wrapper.ice { width: 40%; }
    .planet-wrapper.rocky { width: 30%; }
    .planet-wrapper.dwarf { width: 20%; }
}