/*
 * 🦄 ⭐ My Little Pony: Friendship is Magic CSS! ⭐ 🦄
 * By a proud brony who believes in the magic of friendship!
 * "Dear Princess Celestia, today I learned that CSS can be magical too..."
 */

/* Importing fonts as magical as Twilight's spellbooks */
@font-face {
    font-family: 'Dancing Script';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/DancingScript.ttf') format('truetype');
}

@font-face {
    font-family: 'Pacifico';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/Pacifico.ttf') format('truetype');
}

/* Making the background as colorful as Rainbow Dash's mane */
body {
    font-family: 'Dancing Script', cursive;
    margin: 0;
    padding: 20px;
    background: linear-gradient(
        45deg,
        #ff99cc,
        #ff99ff,
        #cc99ff,
        #99ccff,
        #99ffcc
    );
    background-size: 400% 400%;
    animation: rainbow 15s ease infinite;
    min-height: 100vh;
}

/* As smooth as Pinkie Pie's party transitions */
@keyframes rainbow {
    0% { background-position: 0% 50% }
    50% { background-position: 100% 50% }
    100% { background-position: 0% 50% }
}

/* Navigation as organized as Twilight's library */
nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* Links as elegant as Rarity's designs */
nav a {
    color: #fff;
    text-decoration: none;
    font-family: 'Pacifico', cursive;
    font-size: 1.2em;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

/* Hover effects as exciting as a Sonic Rainboom */
nav a:hover {
    transform: scale(1.1);
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073;
}

/* Page container as sweet as Apple Jack's apple pies */
.character-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(255,192,203,0.5);
    border: 2px solid rgba(255,255,255,0.5);
}

/* Headers as graceful as Fluttershy with her animals */
h1 {
    font-family: 'Pacifico', cursive;
    color: #ff1493;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

h3 {
    text-align: center;
}

h2 {
    color: #8a2be2;
    font-family: 'Pacifico', cursive;
}

/* Images as precious as the Elements of Harmony */
.character-image {
    max-width: 300px;
    border-radius: 10px;
    margin: 20px auto; /* Changed from margin: 20px 0 */
    box-shadow: 0 0 20px rgba(138,43,226,0.4);
    transition: transform 0.3s ease;
    display: block; /* Added to enable margin auto centering */
}

/* Rest of the existing styles */
.character-image:hover {
    transform: scale(1.05);
}

p {
    font-size: 1.2em;
    line-height: 1.6;
    color: #4b0082;
}

ul li {
    color: #8a2be2;
    font-size: 1.1em;
    margin: 10px 0;
}

.about-society {
    padding: 20px;
    margin-top: 30px;
}

.about-society h2 {
    margin-top: 40px;
    color: #e60073;
}

.about-society h3 {
    font-family: 'Pacifico', cursive;
    color: #8a2be2;
}

.contact-info {
    background: rgba(255, 255, 255, 0.7);
    padding: 20px;
    border-radius: 15px;
    margin-top: 30px;
    text-align: center;
    border: 2px dashed #ff99cc;
}

.fas {
    margin: 0 5px;
    color: #ff1493;
}

.quote-box {
    background: rgba(255, 192, 203, 0.2);
    border-left: 4px solid #ff1493;
    margin: 20px 0;
    padding: 20px;
    border-radius: 0 10px 10px 0;
}

blockquote {
    font-family: 'Pacifico', cursive;
    font-size: 1.3em;
    color: #8a2be2;
    margin: 0;
}

blockquote footer {
    font-size: 0.8em;
    margin-top: 10px;
    color: #ff1493;
    text-align: right;
}

.character-page strong {
    color: #e60073;
}

.character-page h2 .fas {
    font-size: 0.8em;
    margin-right: 10px;
}

/*
 * "That's all everypony! Remember, friendship isn't just magic,
 * it's also well-structured CSS!" - Your Faithful Student
 */