/* Reset */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    height: 100%;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    line-height: 1.6;

    color: #222;
    background: #fff;
}
/* Background layer */
body::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;

    width: 500px;
    height: 500px;

    transform: translate(-50%, -50%);

    background: #f5e3e3;

    /* hexagon shape */
    clip-path: polygon(
        50% 0%,
        93.3% 25%,
        93.3% 75%,
        50% 100%,
        6.7% 75%,
        6.7% 25%
    );

    z-index: -1;
    pointer-events: none;
}

/* Header */

header {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    height: 80px;

    background: #000;

    z-index: 1000;
}

/* Logo */

.logo {
    height: 80px;
    width: auto;

    display: block;
}

/* Main content */

main {
    position: fixed;

    top: 80px;
    bottom: 60px;

    left: 0;
    right: 0;

    overflow-y: auto;

    max-width: 750px;
    margin: 0 auto;

    padding: 30px;
}


/* Typography */

h1 {
    font-size: 2.4rem;
    line-height: 1.2;
    margin-top: 0;
}

h2 {
    margin-top: 2em;
}

p {
    margin-bottom: 1.2em;
}

/* Links */

a {
    color: #0066cc;
}

a:hover {
    color: #004999;
}

/* Footer */

footer {
    position: fixed;

    bottom: 0;
    left: 0;
    right: 0;

    height: 60px;

    background: #000;
    color: white;

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 1000;
}