/* Variables */
:root {
  --primary-color: #27b7f8;
  --secondary-color: #ffffff;
  --dark-color: #575555;
}

/* Global */
body, html {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  color: var(--dark-color);
  background: #f8f9fa;
  height: 100%;
  width: 100%;
  overflow: hidden; /* Prevent scrolling */
}

/* Fondo de partículas */
#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(135deg, #27b7f8, #1d9ce6);
}

/* Main Content Centered */
.main-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  position: relative;
  z-index: 1;
}

.main-logo {
  max-width: 80%;
  width: 400px;
  height: auto;
  /* Adds a subtle shadow for better visibility against the background */
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.2));
  
  /* Optional: Animation for smooth entry */
  animation: fadeIn 1.5s ease-out forwards;
  opacity: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}