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

body {
    color: white;
    background-color: black;

    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    font-size: medium;
}

.banner {
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
    
    mask-image: radial-gradient(
        ellipse at center, 
        black 60%, 
        transparent 70%
    );
}

.portrait {
    /*Keep the portrait width reasonable.*/
    width: 20%;
    height: auto;

    mask-image: radial-gradient(
        ellipse at center, 
        black 60%, 
        transparent 70%
    );
}

.rounded {
    border-radius: 10%;
}

h1, h2 {
    text-align: center;
    margin-bottom: 1rem;
}

hr {
    margin-bottom: 1rem;
}

nav {
    text-align: center;
    margin-bottom: 1rem;
}

a.nav-link {
    color:white;
}

a.nav-link.active {
    color: gold !important;
}

a.nav-link:visited {
    color:gray;
}

main {
    width: 80%;
    margin: auto;
    margin-bottom: 1rem;
}

p {
    margin-bottom: 1rem;
}

.p-style {
    font-style: italic;
}

footer {
    text-align: center;
    font-size: small;
    margin-bottom: 1rem;
}

form {
    border: 2px solid white;
}

.block {
    display: block;
}

em {
    color: gold;
}

/* Add a nice atmospheric glow-y affect. */
.front-copy {
    text-shadow: 0 0 2px blue,
                 0 0 8px lightblue,
                 0 0 25px white;
}

/* The list items were a little tight, so I gave them some room.*/
ul > li {
    margin-bottom: 0.5rem;
}