html {
    scroll-padding-top: 15%;
}

#main-container {
    margin-top: 5%;
    margin-bottom: 8%;
    padding-left: 1%;
}

@media (min-width: 768px) {
    #main-container {
        padding-left: 18%;
    }
}

#centred-container {
    margin-top: 5%;
    margin-bottom: 10%;
}

#http-error-container {
    margin-top: 8%;
}

audio {
    width: 100%;
}

.title-link {
    color: black;
}

.working-title-link {
    color: #850001;
}

nav {
    padding: 0;
    height: 12%;
    position: sticky;
    top: 0;
    background-color: rgb(245 245 245 / 90%);
}

.navbar-contents {
    padding: 8px 16px;
    width: 100%;
    text-align: right;
}

.date-group {
    padding-bottom: 2em;
}

table {
    border-collapse: collapse;
    width: 100%;
}

td {
    padding-bottom: 0.5em;
}

tr  {
    padding: 1em;
    vertical-align: top;
    margin: 10em;
}

.track-name {
    word-wrap: break-word;
    overflow-wrap: break-word;
    width: 60em;
    padding-right: 1em;
}

.meta-inline {
    color: darkgrey;
    padding-left: 1em;
}

.download-link {
    padding-left: 1em;
}

.icon {
    width: 1ch;
    white-space: nowrap;
    overflow: hidden;
    text-align: right;
    padding-right: 1em;
    vertical-align: middle;
}

.icon-link {
    color: black;
    border: lightgrey 1px solid;
}

.footer {
    width: 100%;
    background-color: whitesmoke;
}

/* styling for Chrome HTML5 audio player using pseudo selector */
audio::-webkit-media-controls-panel {
    background-color: whitesmoke;
}


#audio-player-metadata {
    margin-left: 15px;
}

#audio-player-metadata #title{
    font-weight: bold;
}

#current-time {
    margin-left: 15px;
}

#audio-player-controls {
    margin-left: 15px;
    margin-right: 15px;
}

#audio-player-controls #format {
    margin-left: 15px;
}

.highlighted {
    background-color: #ffe6ee;
}

.top > * {
    vertical-align: top;
}

.form-required {
    color: red;
    padding-left: 2%;
}

#error-message {
    color: red;
}