* {
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
}

body {
    font-size: medium;

    padding: 0 10% 1rem;
    margin: auto;
}

a {
    text-decoration: underline;
    color: dodgerblue;
}
a:hover, a:focus {
    text-decoration: none;
}

dt {
    font-weight: bold;
}
dd {
    padding-bottom: 0.5rem;
}

#title {
    margin-bottom: 0;
    text-align: center;
}
#subtitle {
    font-weight: bold;
    margin-top: 0;
    text-align: center;
}
.callout {
    text-align: center;
    font-weight: bold;
    font-size: larger;
}

.boxed {
    padding: 0.5rem;
    margin: 0.25rem;
    border-radius: 0.5rem;
    border: 2px solid;
}
.box-title {
    margin: 0.5rem;
    font-weight: bold;
    font-size: x-large;
}
.box-content {
    margin: 0.5rem;
}
#announcements {
    background-color: #fff9e2;
    border-color: #e8ce40;
}
#materials, #logistics, #resources {
    border-color: #81c3a5;
}
#syllabus {
    border-color: #999999;
}
@media (min-width: 800px) {
    .grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    #materials {
        grid-row: span 2;
        grid-column: 1;
    }
    #logistics {
        grid-column: 2;
        grid-row: 1;
    }
    #resources {
        grid-column: 2;
        grid-row: 2;
    }
}