/*
Theme Name: Jennifer Williams Assignment 3B
Author: Jennifer Williams
Description: Assignment 3b Hobby Theme.
Version: 1
Tags: two-columns, custom-menu, featured-images, custom-colors, blog
*/

body { 
    font-family: 'Quicksand', 'Segoe UI', sans-serif; 
    margin: 0; 
    background-color: #fff0f5; 
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: #5e35b1;
}

header { 
    background: linear-gradient(135deg, #fce4ec, #f3e5f5, #e1bee7); 
    color: #ad1457; 
    padding: 100px 20px; 
    text-align: center;
    border-bottom: 5px solid #f8bbd0;
}

header h1 { 
    margin: 0; 
    font-size: 3.5em; 
    text-shadow: 2px 2px 0px #ffffff;
}

header p { 
    font-size: 1.4em; 
    color: #7b1fa2; 
    font-weight: 300;
}

#main-container { 
    display: flex; 
    max-width: 1200px;
    margin: 50px auto; 
    gap: 40px; 
    padding: 0 20px;
    flex: 1;
}

#sidebar { 
    width: 280px; 
    background: #fdf2f8; 
    padding: 35px; 
    border-radius: 30px;
    box-shadow: 0 15px 35px rgba(240, 98, 146, 0.15);
    height: fit-content;
    border: 2px solid #f8bbd0;
}

#sidebar h3 { 
    color: #d81b60; 
    font-size: 1.5em;
    border-bottom: 3px dotted #f48fb1; 
    padding-bottom: 10px; 
}

#sidebar ul { list-style: none; padding: 0; }
#sidebar li { margin: 18px 0; }
#sidebar a { color: #8e24aa; text-decoration: none; font-weight: 700; transition: 0.3s; }
#sidebar a:hover { color: #d81b60; letter-spacing: 1px; }

#content { 
    flex: 1; 
    padding: 60px; 
    background: #faf5ff; 
    border-radius: 30px;
    box-shadow: 0 15px 35px rgba(149, 117, 205, 0.15);
    border: 2px solid #e1bee7;
}

#content h2 { color: #6a1b9a; font-size: 2.5em; margin-bottom: 25px; }

article { margin-bottom: 50px; line-height: 1.8; }

img { 
    max-width: 100%; 
    height: auto; 
    border-radius: 25px; 
    border: 8px solid #fce4ec;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

footer { 
    background: #4a148c; 
    color: #fce4ec; 
    text-align: center; 
    padding: 60px; 
    margin-top: auto;
}

@media (max-width: 768px) {
    #main-container { flex-direction: column; }
    #sidebar { width: auto; }
}