body {
    background-color: #000000;  /* Pure black */
    color: #ffffff;             /* Pure white */
    text-align: center;           /* Centers the text */
    padding-top: 100px;           /* Pushes text down from the top */
}

h1 {
    font-size: 80px;              /* Makes 'Muve' big and bold */
    letter-spacing 5px;           /* Adds space between letter for a 'brand' look*/
}
button{
    background-color: #ffffff;  /* White button */
    color: #000000;             /* Black text */
    padding: 15px 30px;           /* Size of the button */
    font-size: 18px;
    border: none;
    border-radius: 50px;          /* Rounded edges */
    cursor: pointer;              /* Shows the 'hand' icon on hover */
    transition: 0.3s;             /* Smooth color change */
}

button:hover {
    background-color: #00ffcc; /* Turns neon green when you hover! */
}
/* This only triggers when the screen is narrower than 600px */
@media (max-width: 600px) {
  h1 {
    font-size: 2.5rem; /* Makes the title smaller on phones */
    padding: 0 20px;   /* Adds a little space so text doesn't hit the screen edges */
  }
}
/* The Container: Centers everything and adds spacing */
.workout-grid {
    display: flex;
    flex-direction: column; /* Stacks cards vertically for mobile */
    gap: 20px;
    padding: 20px;
    max-width: 500px;
    margin: 0 auto; /* Centers the whole list */
}

/* The Card: The white box for each workout */
.card {
    background: #f4f4f4;
    padding: 20px;
    border-radius: 15px; /* Rounded corners make it look like an app */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border-left: 8px solid #333; /* A little accent color stripe */
}

.card h3 {
    margin: 0 0 10px 0;
    color: #333;
}

.card p {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
}
/* Specific colors based on Category */
/* We will use JavaScript to add these classes in the next step! */

.category-stretch { border-left-color: #74ebd5; }      /* Teal */
.category-animal-movement { border-left-color: #f6d365; } /* Gold */
.category-core { border-left-color: #ff9a9e; }         /* Pink/Red */
.category-lower-body { border-left-color: #a1c4fd; }   /* Blue */
.category-upper-body { border-left-color: #fdcfb4; }   /* Orange */
.category-meditate { border-left-color: #d4fc79; }     /* Light Green */