body {
  background-color: #000;
  color: #ff69b4;
  font-family: "DotGothic16", sans-serif;
  background-image: url("./static/images/background.jpg");
  margin: 0;
  padding: 20px;
  cursor: url("./static/images/cursor.png"), auto;
}

#container {
  width: 800px;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.8);
  border: 3px solid #ff69b4;
  padding: 20px;
  box-shadow: 0 0 10px #ff1493;
}

h1 {
  text-align: center;
  color: #ff1493;
  font-size: 36px;
  text-shadow: 2px 2px 4px #000;
  margin-bottom: 30px;
  animation: bounce 2s infinite alternate;
}

.section {
  border: 1px solid #ff69b4;
  margin: 20px 0;
  padding: 15px;
  background-color: rgba(25, 25, 25, 0.9);
}

.section h2 {
  color: #ff1493;
  border-bottom: 2px dotted #ff69b4;
  padding-bottom: 5px;
  animation: bounce 1s infinite alternate;
}

.identity-box {
  background-color: rgba(40, 40, 40, 0.9);
  border: 2px solid #ff1493;
  padding: 15px;
  margin-top: 20px;
  text-align: center;
}

.identity-box p {
  margin: 10px 0;
  color: #ff69b4;
  text-shadow: 1px 1px 2px #000;
}

#about {
  font-style: italic;
}

#friends {
  text-align: center;
}

.friend-box {
  display: inline-block;
  width: 100px;
  margin: 10px;
  text-align: center;
}

.friend-box img {
  width: 80px;
  height: 80px;
  border: 2px solid #ff69b4;
}

#music-player {
  text-align: center;
  padding: 20px;
  border: 2px dashed #ff69b4;
  margin: 20px 0;
}

.sparkle {
  color: #fff;
  animation: sparkle 1.5s infinite;
}

@keyframes sparkle {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}

#quote {
  font-style: italic;
  text-align: center;
  padding: 20px;
  color: #ff1493;
}

.flag {
  width: 32px; /* Adjust the size as needed */
  height: auto; /* Maintain aspect ratio */
  vertical-align: middle; /* Align with text */
  margin-left: 4px; /* Add spacing between text and flag */
}

.album-content img {
  max-width: 45%;
  margin: 10px;
  border: 2px solid #ff69b4;
  transition: transform 0.2s ease-in-out;
  cursor: pointer;
}

.album-content img:hover {
  transform: scale(1.1);
  box-shadow: 0 0 15px #ff69b4;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
  }
}

@keyframes sparkle {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
}