body {
    margin: 0 auto;
    padding: 0;
    height: 100%;
    font-family: Helvetica, Arial, sans-serif;
    background: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(40, 40, 100, 1) 100%);
    color: white;
    box-sizing: border-box;
}

h1 {
    font-family: "Bruno Ace SC", sans-serif;
}

/* main is the original homepage's BATECH 189 stuff; article is the original page's intro/bio */
main, article {
    max-width: 1000px; 
    margin: 20px;
}

/* .blocks are the Homepage content */
.blocks {
    height: 100%;
    display: grid;
    grid-gap: 3px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
        "t u a"
        "s r v";
}

/* .content is the content for all pages EXCEPT the homepage */
.content {
    height: 100%;
    padding: 1em;
}

.menu {
    padding: 1em 1em 1em 0;
    text-align: left;
    background-color: teal;
}
.header {
    height: auto;
    margin: 0;
    padding: 1em;
    text-align: left;
    background-color: #408062;
}

.teaching {
    grid-area: t;
    background-color: darkred;
    padding: 1em;
    text-align: center;
}

.music {
    grid-area: u;
    background-color: rosybrown;
    padding: 1em;
    text-align: center;
}

.art {
    grid-area: a;
    background-color: darkmagenta;
    padding: 1em;
    text-align: center;
}

.scifi {
    grid-area: s;
    background-color: darkblue;
    padding: 1em;
    text-align: center;
}

.reading {
    grid-area: r;
    background-color: rebeccapurple;
    padding: 1em;
    text-align: center;
}

.movies {
    grid-area: v;
    background-color: indigo;
    padding: 1em;
    text-align: center;
}

p {
    line-height: 1.5em;
}

a {
    color: #f6f2ff;
    text-decoration: underline;
    text-decoration-style: dotted;
}

a:hover {
    text-decoration: underline;
    text-decoration-style: double;
    text-decoration-color: aqua;
    /*font-weight: bold;*/
    text-shadow: 1px 1px 3px red;
    filter: brightness(1.3);
}

ul {
    list-style-type: none;
}

li {
    padding-bottom: 0.3em;
}

.footer {
    margin: 0;
    text-align: left;
    padding: 0.8em 1em;
    font-size: 0.8em;
    background-color: #9a7a35;
}