body, html {
  margin: 0;
  padding: 0;
  font-family: 'Press Start 2P', cursive;
    background-image: url('https://i.postimg.cc/WzwWW8jy/textured.png'); /* Replace with your online image link */

  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-height: 100vh;
  padding: 40px;
}

.image-container {
  flex: 1;
  text-align: center;
  max-width: 50%;
}

.profile-photo {
  max-width: 100%;
  height: auto;
  border-radius: 15px;
  transition: transform 0.5s ease;
}

.profile-photo:hover {
  transform: rotate(360deg);
}


.text-container {
  flex: 1;
  
  text-ali
text-align: left;
  font-family: 'Press Start 2P', cursive;
  font-size: 0.8em;
  
  line-height: 1.9em;
  margin-left: 60px;
  max-width: 40%;
  color: #004C6E;
  transition: text-shadow 0.3s ease;
  background-color: rgba(245, 245, 220, 0.5); /* Transparent beige background */
  padding: 20px; /* Add padding for visual spacing */
  border-radius: 5px; /* Optional: rounded corners for the box */
}

.title-container {
  position: absolute;
  left: 50%;
  top: 80%;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center;
  display: flex;
  flex-direction: column;
}

.main-title {
  font-size: 2em;
  margin: 10px 0;
  color: #FFF; /* Adjust text color as needed */
  text-shadow: 0 0 5px #004466, 0 0 10px #004466, 0 0 15px #004466, 0 0 20px #006699, 0 0 25px #006699, 0 0 30px #006699, 0 0 35px #0088cc; /* Muted and darker blue glowing effect */
}


.flying-circle {
  position: fixed;
  width: 50px;  /* Adjust size as needed */
  height: 50px; /* Adjust size as needed */
  background-image: url('https://i.postimg.cc/Fzd8T315/Untitled-1.png'); /* Replace with your online image link */
  background-size: cover;
  border-radius: 50%; /* Optional: keeps it circular; remove if not needed */
  z-index: 1000;
  cursor: pointer;
  left: 0; /* Position at the top-left corner */
  top: 0;  /* Position at the top-left corner */
  border: none; /* Optional: in case you have borders defined */
}    

@media (max-width: 1200px) {
  .container {
    flex-direction: column;
    text-align: center;
  }
  .title-container {
    position: