.logo h1 {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 1.5em;
    color: rgb(var(--fontcolor));
}

.navbar {
    background-color: rgb(var(--color));
    color: rgb(var(--fontcolor));
    padding-left: 5px;
}

.footer {
    background-color: rgb(var(--color));
    color: rgb(var(--fontcolor));
    padding: 10px;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /*background-color: #162837;*/
    margin: 0px;
}

.parallax {
    /* The image used */
    background-image: var(--bgi);

    /* Set a specific height */
    /* min-height: 500px; */
    height: 100%;
    width: 100%;
    margin: 0px;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.title {
    padding: 20px;
    text-align: center;
    color: rgb(var(--fontcolor));
}

.title h1 {
    color: rgb(var(--fontcolor));
    font-weight: bold;
    font-size: xx-large;
}

.title h2 {
    color: rgb(var(--fontcolor));
}

.content {
    padding: 10px;
    /* TODO: Make top margin a function of whether you're the 0th content item (then zero top margin) */
    margin-top: 20px;  /* Keeps space between content blocks for the parallax to come through */
    margin-bottom: 60px;
    flex: 1;
    /*background-image: linear-gradient(to bottom right, rgba(var(--bgc), 0.9), rgba(var(--bgc), 0.9), rgba(var(--bgc), 0.5));*/
    background-image: radial-gradient(ellipse at top left, rgba(var(--bgc), 1.0), rgba(var(--bgc), 0.75));
    color: rgb(var(--fc));
}

.content h1 {
    color: rgb(var(--fc));
}

.content h2 {
    color: rgb(var(--fc));
}

.content a {
    color:rgb(var(--fc));
    text-decoration:underline
}

.content b, strong {
    color:rgb(var(--fc));
}

.center {
    padding: 10px;
    flex: 1;
}