body {
    margin: 0;
    min-height: 100vh;
    
    background: #050505;
    color: white;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    font-family: Arial, sans-serif;
}

.path-button {
    background: #c9a76a;
    color: black;
    
    text-decoration: none;
    
    padding: 15px 25px;
    border-radius: 10px;
    
    font-weight: bold;
    
    display: inline-block;
    
    transition: all 0.2s ease;
}

.path-button:hover {
    transform: translateY(-3px);
    
    box-shadow: 0 8px 20px rgba(201, 167, 106, 0.35);
}

.back-button {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 20px;
    
    background-color: #c9a76a;
    color: #0d0d0d;
    
    text-decoration: none;
    font-weight: bold;
    
    border-radius: 10px;
    
    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.back-button:visited {
    color: #0d0d0d;
}

.back-button:hover {
    background-color: #d9b87b;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(201, 167, 106, 0.35);
}

.hero {
    text-align: center;
}

.hero img {
    width: 400px;
    max-width: 80vw;
    height: auto;
}

h1 {
    color: #c9a76a;
    font-size: 3rem;
    margin-bottom: 10px;
}

h2 {
    color: #d9b87b;
    font-size: 2rem;
    margin-top: 20px;
    margin-bottom: 25px;
    letter-spacing: 1px;
}

p {
    color: #cccccc;
}

.paths {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
    flex-wrap: wrap;
}

button {
    background: #c9a76a;
    color: black;
    
    border: none;
    padding: 12px 24px;
    
    border-radius: 10px;
    
    cursor: pointer;
    font-weight: bold;
}

button {
    transition: all 0.2s ease;
}

button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(201, 167, 106, 0.35);
}


/* ===== Path Pages ===== */

.path-page {
    margin: 0;
    
    min-height: 100vh;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    color: white;
    
    font-family: Arial, sans-serif;
}

.path-content {
    text-align: center;
}

.path-content h1 {
    font-size: 4rem;
    margin-bottom: 10px;
}

.path-content p {
    color: #cccccc;
    font-size: 1.2rem;
}

/* Warrior */

.warrior-page {
    background: linear-gradient(
    135deg,
    #0d0d0d,
    #1a1a1a,
    #2a2014
    );
}

.warrior-page h1 {
    color: #c9a76a;
}

/* Defender */

.defender-page {
    background: linear-gradient(
        135deg,
        #0d0d0d,
        #141b22,
        #1f2833
    );
}

.defender-page h1 {
    color: #7fa6d6;
}

/* Scholar */
.scholar-page {
    background: linear-gradient(
        135deg,
        #0d0d0d,
        #1b1b24,
        #25203a
    );
}

.scholar-page h1 {
    color: #9b87d3;
}

/* Back Button */

.back-button {
    display: inline-block;
    
    margin-top: 20px;
    
    background: #c9a76a;
    color: black;
    
    text-decoration: none;
    
    padding: 12px 20px;
    
    border-radius: 10px;
    
    font-weight: bold;
    
    transition: all 0.2s ease;
}

.back-button:hover {
    background: #d9b87b;
    
    transform: translateY(-2px);
    
    box-shadow: 0 8px 20px rgba(201, 167, 106, 0.35);
}

.back-button:visited {
    color: black;
}