/* Import common styles first */
@import url('style1.css');

/* --- ABOUT PAGE SPECIFIC STYLES --- */

/* Override or add styles specifically for the main content area of the about page */
main {
    /* You might want slightly different padding or alignment for the about page's main container */
    /* For example, ensure it's not overly constrained */
     padding: 1rem; /* Adjust padding for mobile if needed */
}


/* App Motive Section Styling */
.app-motive-container {
  padding: 1.5rem; /* Slightly adjusted padding */
  width: 90%; /* Use percentage width for responsiveness */
  max-width: 800px; /* Keep max-width for larger screens */
  margin: 2rem auto; /* Center the container horizontally, add top/bottom margin */
  text-align: center; /* Center the heading within the container */
  background-color: #262626;
  border-radius: 10px;
  box-sizing: border-box; /* Include padding in width calculation */
}

.app-motive-container h2 {
  font-size: clamp(1.8rem, 5vw, 2.2rem); /* Responsive font size */
  color: #af40ff;
  margin-top: 0;
  margin-bottom: 1rem;
}

.app-motive-container p {
  font-size: clamp(1rem, 3vw, 1.1rem); /* Responsive font size */
  line-height: 1.6;
  color: #f0f0f0;
  margin-bottom: 0;
  text-align: left; /* Explicitly set text-align left for readability */
  /* white-space: pre-line; is handled by inline style in HTML to preserve Firestore newlines */
}

/* Button specific spacing for About page */
.btn {
    margin-top: 2rem; /* Ensure adequate space above buttons */
    text-align: center; /* Center the button container div */
}

#dance {
    width:500px;
    filter: invert(1);
}
/* Responsive Adjustments (Optional Example) */
@media (max-width: 600px) {
    .app-motive-container {
        padding: 1rem; /* Less padding on small screens */
        width: 95%; /* Use slightly more width on very small screens */
    }

    .app-motive-container h2 {
        margin-bottom: 0.8rem;
    }

    .ui-btn {
        padding: 10px 15px; /* Slightly smaller button padding */
        font-size: 16px; /* Slightly smaller button font */
    }

    #dance {
        width:250px;
    }
}