/* Subpage specific styles */

/* Main content */
.main-content {
    padding-top: 150px;
    padding-bottom: 50px;
    text-align: center;
}

/* Page title */
.page-title {
    margin-bottom: 30px;
}

/* Red subpage (subpage1.php) */
.red-page .page-title {
    color: var(--red-color);
}

.red-page .back-button {
    background-color: var(--red-color);
}

.red-page .back-button:hover {
    background-color: #c0392b;
}

/* Green subpage (subpage2.php) */
.green-page .page-title {
    color: var(--green-color);
}

.green-page .back-button {
    background-color: var(--green-color);
}

.green-page .back-button:hover {
    background-color: #27ae60;
}

/* Blue subpage (subpage3.php) */
.blue-page .page-title {
    color: var(--blue-color);
}

.blue-page .back-button {
    background-color: var(--blue-color);
}

.blue-page .back-button:hover {
    background-color: #2980b9;
}

/* Back button */
.back-button {
    display: inline-block;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 30px;
    transition: background-color 0.3s;
}

/* Responsive styles */
@media (max-width: 768px) {
    .main-content {
        padding-top: 120px;
    }

    .page-title {
        font-size: 1.8rem;
    }
}