/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  line-height: 1.6;
  height: 100vh;
  margin: 0;
  background-image: linear-gradient(to bottom right, #8B0000, #CD5C5C);
  background-color: red;
  color: #FBC841;
  font-family: IMFellEnglishSC-Regular;
}

/* Grid container */
.container {
    display: grid;
    grid-template-areas: 
        "header header"
        "sidebar main"
        "footer footer";
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    gap: 15px;
    padding: 15px;
}

/* Header styles */
.header {
    grid-area: header;
    background-color: #2c3e50;
    color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-content {
    padding: 1.5rem;
}

.nav-menu {
    list-style: none;
    display: flex;
    gap: 2rem;
}

.nav-menu li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.nav-menu li a:hover {
    background-color: #3498db;
    transform: translateY(-2px);
}

/* Sidebar styles */
.sidebar {
    grid-area: sidebar;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
}

.sidebar-content {
    padding: 1.5rem;
}

.sidebar h3 {
    margin-bottom: 1rem;
    color: #2c3e50;
    border-bottom: 2px solid #ecf0f1;
    padding-bottom: 0.5rem;
}

.sidebar ul {
    list-style: none;
    margin-bottom: 2rem;
}

.sidebar ul:last-child {
    margin-bottom: 0;
}

.sidebar ul li {
    margin-bottom: 0.5rem;
}

.sidebar ul li a {
    color: #34495e;
    text-decoration: none;
    padding: 0.75rem;
    display: block;
    border-radius: 6px;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.sidebar ul li a:hover {
    background-color: #f8f9fa;
    border-left-color: #3498db;
    transform: translateX(5px);
}

/* Main content styles */
.main {
    grid-area: main;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
}

.main-content {
    padding: 2rem;
}

.main h1 {
    color: #2c3e50;
    margin-bottom: 1.5rem;
    font-size: 2.5rem;
    border-bottom: 3px solid #3498db;
    padding-bottom: 0.5rem;
}

.main h2 {
    color: #2c3e50;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

.main p {
    margin-bottom: 1.2rem;
    text-align: justify;
    line-height: 1.7;
}

/* Footer styles */
.footer {
    grid-area: footer;
    background-color: #34495e;
    color: white;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.footer-content {
    padding: 1.5rem;
}

.footer p {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Responsive design */
@media (max-width: 768px) {
    .container {
        grid-template-areas: 
            "header"
            "sidebar"
            "main"
            "footer";
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px;
    }
    
    .nav-menu {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .nav-menu li a {
        text-align: center;
        display: block;
    }
    
    .main h1 {
        font-size: 2rem;
    }
    
    .header-content,
    .sidebar-content,
    .main-content,
    .footer-content {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .container {
        gap: 8px;
        padding: 8px;
    }
    
    .main h1 {
        font-size: 1.5rem;
    }
    
    .main h2 {
        font-size: 1.3rem;
    }
}