:root {
    --bg-colour: linear-gradient(0deg, #072A4B, #040F20) no-repeat;
    --outline-colour: #1E5690;
    --text-colour: #F2F0F0;
    --link-colour: #B1B1B1;
}

body {
    background: var(--bg-colour);
    background-attachment: fixed;
    color: var(--text-colour);
    font-family: sans-serif;
    min-height: 100vh;
}

#home-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 0.5fr 1fr 1fr 0.5fr;
    max-width: 700px;
    margin: auto;
}

#home-title {
    grid-area: 1 / 1 / 1 / 3;
    align-self: end;
    justify-self: baseline;
    padding: 10px;
    font-size: 170%;
    font-weight: bold;
}

#nav {
    grid-area: 2 / 1 / 5 / 2;
}

#intro {
    grid-area: 2 / 2 / 4 / 4;
}

#footer {
    grid-area: 4 / 2 / 5 / 3;
    font-size: 70%;
}

.grid-item {
    margin: 10px;
    padding: 10px;
    border: 2px dashed var(--outline-colour);
}

a {
    color: var(--link-colour);
}

h1 {
    font-size: 150%;
}