.border {
    /*border: 1px solid black;*/
}

html {
    /*
        Problem with this is if the page ever needs to scroll, the background
        image started over again.  In other words, this sets the height of the
        body without taking into account scroll bars if they are added because
        the browser window changes size.
    */
    height: 100%; /* so the body fills the page */
}

body {
    background: linear-gradient(to bottom, antiquewhite 0%, burlywood 100%);
}

h1 {
    align-self: center;
}

.contents {
    margin-left: auto;
    margin-right: auto;
    max-width: 48rem;
    /*background-color: aliceblue;*/
    display: flex;
    flex-direction: column;
    align-content: center;
}

.container {
    align-self: center;
    width: 35rem;
    display: flex;
    flex-direction: column;
    border: 1px dotted;
    border-color: rgb(127,127,127);
    border-radius: 6px;
    padding: 0.2em;
}

.title {
    font-family: sans-serif;
    text-align: center;
    font-size: 1.25rem;
    text-decoration: underline;
    padding: 0.3rem;
}

.description {
    text-align: justify;
    padding: 0.3rem;
    line-height: 1.25rem;
}

.control {
    text-align: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.control > audio {
    /* 
        Cannot affect any of the controls in an audio control but the audio
        control background is semi-transparent dark gray and can be influenced
        by setting the background color.
    */
    background-color:  aqua;
    /*
        Color, offset down, offset right, blur radius
    */
    box-shadow: dimgray 6px 6px 3px;
}

.separator {
    border: unset;
    border-radius: unset;
    border-bottom: 2px solid black;
    margin-top: 1em;
    margin-bottom: 1em;
}