body {
    margin: 0;
    padding: 0;
    background-color: black;
    font-family: 'ibmbios', 'Arial';
}

header {
    margin: 0;
    clear: both;
    width: 100%;
    height: auto;
    /* background: linear-gradient(rgba(210,96,165,1) 0%, rgba(228,175,205,1) 18%, rgba(255,255,255,1) 34%, rgba(87,206,248,1) 50%, rgba(255,255,255,1) 66%, rgba(228,175,205,1) 82%, rgba(210,96,165,1) 100%) 0 0/100% 200%; */
    background: linear-gradient(rgba(0, 0, 0, 1) 0%, rgb(119, 0, 0) 25%, rgb(0, 119, 40) 50%, rgb(22, 0, 119) 75%, rgba(0, 0, 0, 1) 100%) 0 0/100% 200%;
    animation: a 5s linear infinite;
    color: white;
    text-align: center;
}

@keyframes a {
  to {background-position:0 -200%}
}

nav {
    display: inline-block;
    background-color: red;
    width: 100%;
    height: 26px;
    color: white;
}

.section-button {
    margin-left: 30px;
    font-size: 24px;
    background-color: red;
    color: white;
    font-family: 'ibmbios', 'Arial';
    border: 0;
}

.section-button:hover {
    background-color: rgb(255, 146, 146);
}

.section-button-selected {
    margin-left: 30px;
    font-size: 24px;
    background-color: whitesmoke;
    color: red;
    font-family: 'ibmbios', 'Arial';
    border: 0;
}

main {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0px;
    background-color: whitesmoke;
    height: 85vh
}

iframe {
    height: 82vh;
    width: 99%;
}

footer {
    clear: both;
    background-color: black;
    height: 9vh;
}

@media (max-width: 767px) {  
    nav {
        height: 34px;
    }

    iframe {
        height: 85vh;
        border: 0;
    }
    
    .section-button {
        font-size: 15px;
        margin: 0;
    }

    .section-button-selected {
        font-size: 15px;
        margin: 0;
    }
}