* {
            box-sizing: border-box;
            margin: 0;
        }

        html {
            height: 100%;
        }

        body {
            font-family: 'Georgia', serif;
            line-height: 1.7;
            color: #333;
            min-height: 100%;
            display: flex;
            flex-direction: column;
        }

        header {
            background-image: url("background.webp");
            background-size: cover;
            color: white;
            text-align: center;
            padding: 50px 20px 50px;
            z-index: 1;
        }
        header h1 {
            font-size: 3em;
            margin-bottom: 10px;
            font-weight: normal;
            letter-spacing: 2px;
        }

        nav {
            background-color: #333;
            overflow: hidden;
            z-index: 1;
        }
        nav a {
            float: left;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
        }
        nav a:hover {
            background-color: #fafafa;
            color: #333;
        }
        nav a.active {
            background-color: #4a7c7e;
            color: white;
        }

        main {
            margin: 0;
            background-color: #fafafa;
            flex-grow: 1;
            z-index: 1;
        }

        footer {
            text-align: center;
            padding: 40px 20px;
            color: #777;
            font-size: 0.9em;
            border-top: 1px solid #e0e0e0;
            background: #f5f5f5;
            flex-grow: 0;
            flex-shrink: 0;
            z-index: 1;
        }
        footer a {
            color: #4a7c7e;
            text-decoration: none;
        }