/* Base page styling - applies to everything on the page */
body {
    font-family: 'Times New Roman', Times, serif; /* Professional news-style font */
    background-color: #700db6; /* background colour */
    color: white; /* default text colour */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    line-height: 1.6; /* Space between lines of text */
}

/* Main container - centers content and limits width */
.container {
    max-width: 800px; /* Page won't get wider than 800px */
    margin: 40px auto; /* Centre horizontally with 40px top/bottom space */
    padding: 20px; /* Inner spacing */
}

/* Header styling - top section with title */
header {
    text-align: center; /* Centre-align text */
    margin-bottom: 40px; /* Space below header */
    border-bottom: 1px solid #444; /* Light grey border */
    padding-bottom: 20px; /* Space between text and border */
}

/* Main title styling */
h1 {
    font-size: 2.5em; /* Large font size */
    margin: 0; /* No margin */
    font-family: 'Times New Roman', Times, serif;
}

/* Subtitle styling */
.subtitle {
    font-size: 1.2em; /* Slightly larger than normal text */
    color: #CCC; /* Light grey colour */
    margin-top: 10px; /* Space above subtitle */
}

/* Navigation styling */
.nav-wrapper {
    background-color: #3A3A3A; /* Same colour as content boxes */
    border: 1px solid #444; /* Same border as content boxes */
    border-radius: 4px; /* Rounded corners */
    padding: 10px; /* Space inside navigation bar */
    margin-top: 15px; /* Space between subtitle and nav */
    width: calc((100% - 20px) * 2 / 3); /* Same width as main content box (flex: 2 of 3) */
    margin-left: auto;
    margin-right: auto; /* Centre the navigation bar */
}
nav {
    text-align: center; /* Centre the links */
}
nav a {
    color: #CCC; /* Light grey link colour */
    text-decoration: none; /* Remove underline from links */
    margin: 0 8px; /* Space around each link */
}
nav a:hover {
    color: white; /* Links turn white on hover */
}

/* Wrapper for side-by-side content boxes */
.content-wrapper {
    display: flex; /* Makes children sit side-by-side */
    gap: 20px; /* Space between the two boxes */
    margin-bottom: 20px; /* Space below the wrapper */
}

/* Style for both content boxes */
.content-box {
    background-color: #3A3A3A; /* Slightly lighter dark grey */
    border: 1px solid #444; /* Light grey border */
    border-radius: 4px; /* Rounded corners */
    padding: 20px; /* Space inside box */
    min-height: 300px; /* Minimum height for both boxes */
}

/* To-do box - half width (flex:1) */
.content-box.todo {
    flex: 1; /* Takes 1 part of available space */
}

/* Main content box - double width (flex:2) */
.content-box.main {
    flex: 2; /* Takes 2 parts of available space - twice as wide as to-do */
}

/* Footer styling - bottom section */
footer {
    text-align: center; /* Centre-align text */
    color: #999; /* Very light grey */
    font-size: 0.9em; /* Slightly smaller text */
    margin-top: 40px; /* Space above footer */
    border-top: 1px solid #444; /* Light grey border */
    padding-top: 20px; /* Space between border and text */
}