/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Font Face Rules */
@font-face {
  font-family: 'Minecrafter';
  src: url('Minecrafter.Reg.ttf') format('truetype');
}

@font-face {
  font-family: 'Minecraft';
  src: url('Minecraft.ttf') format('truetype');
}

body {
  font-family: Arial, sans-serif;
  height: 100vh;
  display: flex;
  justify-content: center; /* Center bubble vertically */
  align-items: center; /* Center bubble horizontally */
  background: url('background.png') no-repeat center center/cover;
  overflow: hidden; /* Prevent scrolling */
}

.bubble-panel {
  background: rgba(20, 20, 20, 0.9); /* Dark mode: nearly black */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.7); /* Deeper shadow for dark mode */
  border-radius: 15px;
  padding: 80px 20px 20px; /* Increased top padding for icon space */
  text-align: center;
  width: 300px;
  backdrop-filter: blur(10px); /* Smooth appearance */
}

.bubble-panel .icon {
  width: 100px;
  height: auto; /* Maintain aspect ratio */
  margin-bottom: -50px; /* Position icon higher above the text */
  animation: floatPulse 6s infinite ease-in-out;
  filter: drop-shadow(0 0 10px #5bc0de) drop-shadow(0 0 20px #5bc0de) drop-shadow(0 0 30px #5bc0de);
}

/* Animation for the floating and pulsing effect */
@keyframes floatPulse {
  0%, 100% {
    transform: translateY(-30px) scale(1); /* Icon starts higher and doesn't touch text */
  }
  50% {
    transform: translateY(-50px) scale(1.1); /* Icon moves further upward during bounce */
  }
}

/* Glowing effect and font for "CodexCraft" */
.bubble-panel h1 {
  font-size: 36px; /* Larger font size */
  font-family: 'Minecrafter', sans-serif; /* Use Minecrafter.Reg.ttf */
  color: #5bc0de; /* Light blue */
  text-shadow: 0 0 3px #5bc0de; /* Minimal glow effect */
  margin-bottom: 10px;
}

/* Glowing effect and font for "codexcraft.com" */
.bubble-panel .server-ip {
  font-size: 18px;
  font-family: 'Minecraft', sans-serif; /* Use Minecraft.ttf */
  color: #5bc0de; /* Light blue */
  text-shadow: 0 0 10px #5bc0de, 0 0 20px #5bc0de, 0 0 30px #5bc0de;
}

.server-status {
  margin-top: 20px;
  text-align: center;
  font-family: 'Minecraft', sans-serif;
  color: #5bc0de;
}

.server-status h2 {
  font-size: 24px;
  margin-bottom: 10px;
  text-shadow: 0 0 5px #5bc0de;
}

.server-status p {
  font-size: 18px;
  text-shadow: 0 0 3px #5bc0de;
}

.status-text {
  font-weight: bold;
}

.status-text.online {
  color: green;
}

.status-text.offline {
  color: red;
}

/* Style for the Maps button */
.maps-button {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 20px;
  font-size: 36px; /* Match "CodexCraft" font size */
  font-family: 'Minecrafter', sans-serif; /* Match "CodexCraft" font */
  color: #5bc0de; /* Match "CodexCraft" color */
  background: none; /* Transparent background */
  border: 2px solid #5bc0de; /* Light blue border */
  border-radius: 5px;
  text-decoration: none; /* Remove underline */
  text-shadow: 0 0 3px #5bc0de, 0 0 10px #5bc0de; /* Matching glow effect */
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.maps-button:hover {
  background-color: #5bc0de; /* Light blue fill on hover */
  color: #ffffff; /* White text on hover */
  box-shadow: 0 0 20px #5bc0de; /* Stronger glow */
}

/* Bubble effect for the server IP ("codexcraft.com") */
.bubble-panel .server-ip {
  font-size: 18px;
  font-family: 'Minecraft', sans-serif; /* Use Minecraft.ttf */
  color: #5bc0de; /* Light blue */
  text-shadow: 0 0 10px #5bc0de, 0 0 20px #5bc0de, 0 0 30px #5bc0de;
  padding: 10px; /* Padding to create space inside the bubble */
  border: 2px solid #5bc0de; /* Light blue border for bubble effect */
  border-radius: 5px; /* Match the button's rounded edges */
  display: inline-block; /* Ensure proper sizing and positioning */
  background: rgba(20, 20, 20, 0.7); /* Slightly darker transparent background */
  box-shadow: 0 0 10px rgba(91, 192, 222, 0.5); /* Subtle glow around the bubble */
  margin-top: 5px; /* Add some space above the bubble */
  text-align: center; /* Center the text inside */
}