* {
    box-sizing: border-box;

    margin: 1.25rem;
    padding: 0;
}

body {
    color: white;
    background-color: black;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    font-size: medium;

    max-width: 1280px;
    margin: auto;
    border: 3px solid white;
    border-radius: 10px;
}

#footer {
    text-align: center;
    font-size: smaller;
}

#footer > p {
    margin: 0.5rem;
}

img {
    border: 5px dotted white;
}

.banner {
    max-width: 100%;
    border-radius: 25px;
    margin: 0 auto;
}

.portrait {
    border-radius: 10%;
    max-width: 50%;
}

a.nav-link {
    color:white;
}

a.nav-link.active {
    color: gold !important;
}

a.nav-link:visited {
    color:gray;
}

h1, h2, h3, h4, h5, h6 {
    color: blue;
}

p.bio {
    color: pink;
    font-style: italic;
}

/* Tell the table cells to share borders. Also, give the table plenty of breathing room (around it).*/
table {
    border-collapse: collapse;
    margin: 20px auto;
}

/* Sensible options for the table to make it highly visible agains the black background and give the cell items some inner peace, er, space.*/
th, td {
  border: 1px solid white;
  padding: 12px;
}

/* I added a border to the form for the aesthetic.*/
/* The max-width is to help the eye by bringing form children together horizontally.*/
/* The auto portion of the margin centers the form horizontally.*/
form {
    border: 3px solid white;
    max-width: 50%;
    margin: 4rem auto;
}

/* This margin-ing has higher specificity than the * rule and thus overrides it.*/
/* I use it to keep the form bits a little tighter.*/
form * {
    margin: 10px;
}

/* I decided I wanted the radio button options and check boxes on the form to be one-on-a-line. */
/* So, I use the block display style to accomplish it.*/
/* And, I ended up using it to force the label for the text area input on the form to be ABOVE it.*/
.block {
    display: block;
}

button.zap {
    color: black;
    background-color: gold;
    padding: 0.5rem;
}

button.revealer {
    margin-right: 1rem;
    padding: 0.5rem;
}
