body {
    /*font-family: 'Roboto Mono', sans-serif;*/
    font-family: 'Open Sans', sans-serif;
    --panel-background-color: #d4d0c8;
    --bevel-white: #ececec;
    --bevel-light: #dfdfdf;
    --bevel-dark: #808080;
    --bevel-black: #0a0a0a;
    --splash-color-light: #add8e6;
    --splash-color-dark: #0000ff;
    --contrast-color-light: #ffa500;
    --contrast-color-dark: #ff8c00;
    margin: 0;
    padding-left: 15px;
    padding-right: 15px;
    background: var(--panel-background-color);
}



.title {
    width: 100%;
}

.title-logo {
    width: 100%;
}

.on-hover-only {
    display: none;
}

.not-hover {
    display: block;
}

.title:hover .on-hover-only {
    display: block;
}

.title:hover .not-hover {
    display: none;
}

header h1 {
    font-family: 'Montagu Slab', serif;
}

h1 {
    font-family: 'Roboto Mono', serif;
}

h2 {
    font-family: 'Montagu Slab', serif;
}

h3 {
    font-family: 'Roboto Mono', serif;
}

.content {
    margin: auto;
    background: var(--bevel-light);
    width: 100%;
    max-width: 1000px;
    padding: 20px;
    box-sizing: border-box;
}

header {
    margin-bottom: 20px;
}

header h1 {
    margin: 0;
}

.title {
    font-size: 15vw;
}

.gui-image {
    width: 100%;
    border-radius: 0;
}

.subtitle {
    text-align: right;
}

.info-download-section {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
            "info download"
            "info usermanual"
            "info blank";
}

.info-zone {
    grid-area: info;
    margin-right: 20px;
}

.downloads-sidebar {
    margin-top: 16px;
}

.downloads-sidebar div {
    padding: 10px;
}

.download-zone {
    grid-area: download;
    background: var(--bevel-black);
}

.download-button {
    color: black;
}

.download-header {
    color: var(--bevel-white);
}

.download-header h2 {
    margin-top: 0px;
    margin-bottom: 2px;
}
.download-header p {
    margin: 0px;
}

.download-button {
    padding: 5px;
    background: var(--splash-color-light);
    border: solid var(--splash-color-dark) 2px;
    display: inline-block;
}

.download-bin {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.manual-zone {
    grid-area: usermanual;
    background: var(--bevel-dark);
    display: flex;
    justify-content: center;
}

.manual-zone .download-button {
    background: var(--contrast-color-light);
    border: solid var(--contrast-color-dark) 2px;
}

@media screen and (max-width: 700px) {
    .info-download-section {
        grid-template-columns: 100%;
        grid-template-areas:
            "info"
            "download"
            "usermanual";
    }

    body {
        padding: 0px;
    }
}
.encoders-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 0;
}

.meet-encoder {
    padding: 10px;
}

.audio-examples {
    display:flex;
    flex-wrap: wrap;
    gap:20px;
    justify-content: space-evenly;
    padding: 0;
}

.audio-examples li {
    width: 350px;
    list-style: none;
    padding: 10px;
    position:relative;
    border-radius: 8px;
}

.neutral {
    background: var(--bevel-white);
}

.lame {
    background: var(--splash-color-light);
}

.blade {
    background: var(--contrast-color-light);
}

.audio-examples li h3 {
    margin-top: 0px;
}

.audio-examples li audio {
    width: 100%;
}