html {
    font-size: 14px;
    scrollbar-color: #AAA #222;
}
::-webkit-scrollbar {           /* backpanel */
    background-color: #222;     
}
::-webkit-scrollbar-button {    /* cursor, slider */
    background: #AAA;
}
::-webkit-scrollbar-thumb {     /* arrows */
    background: #AAA;
}


@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body { 
    margin: 0;
    padding: 0;
}

body header div {

    width: 100%;
    background-color: black;
    background: linear-gradient(180deg, #000 67%, #FFF 100%);
}
body header h1, h2, h3 {

    margin: 0;
    padding: 1rem;
    color: white;
    font-style: italic;
/*    text-shadow: 0.1rem 0.1rem 0.5rem black, 0.1rem 0.1rem 0.5rem black, 0.3rem 0.5rem 0.2rem white;
    text-shadow: 0.1rem 0.1rem 0.5rem black, 0.1rem 0.1rem 0.5rem black, 0.1rem 0.1rem 0.5rem black, 0.1rem 0.1rem 0.5rem black, 0.1rem 0.1rem 0.5rem black, 0.1rem 0.1rem 0.5rem black, 0.3rem 0.5rem 0.2rem white;
*/
}

/*body header h1 {
    text-shadow: 0.15rem 0.15rem 0.1rem black, 0.3rem 0.5rem 0.2rem #ffffff8c;
    text-shadow: 0.03rem 0.03rem 0.3rem black, 0.3rem 0.5rem 0.2rem #ffffff8c;
}*/

body h2 {
    /*text-decoration: underline;*/
    text-align: center;
    font-size: 2em;
    margin: 2rem 0 2rem 0;
    /*text-shadow: 0.15rem 0.15rem 0.1rem black, 0.3rem 0.5rem 0.2rem #ffffff8c;*/
}

body h3 {
    font-size: 1.5em;
    /*text-shadow: 0.15rem 0.15rem 0.1rem black, 0.3rem 0.5rem 0.2rem #ffffff8c;*/
    /*margin: 1em 0 0 0;*/
    margin: 0 0 1rem 0;
    padding: 0;
}

body h4 {
    font-size: 1.0em;
    /*text-shadow: 0.15rem 0.15rem 0.1rem black, 0.3rem 0.5rem 0.2rem #ffffff8c;*/
    font-style: italic;
    margin: 0 0 1em 2em;

}

body header h1, h2, h3, h4 {
    /*text-shadow: 0.03rem 0.03rem 0.3rem black, 0.3rem 0.5rem 0.2rem #ffffff8c;*/
    text-shadow: 0.05rem 0.05rem 1.0rem black, 0.3rem 0.5rem 0.2rem #ffffff61;
    text-shadow: 0.05rem 0.05rem 0.5rem black, 0.05rem 0.05rem 1.0rem black, 0.3rem 0.5rem 0.2rem #ffffff61;
}

body h4.ct {
    text-align: center;
    margin-left: 0;
    margin-bottom: 2rem;
}

body main {
    background-color: black;
    min-height: 100dvh;
    color: white;
    padding: 1rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
}



body main audio, body main video, body main iframe {
    width: 100%;
    box-shadow: 0.1rem 0.06rem 0.1rem #fff, 0.1rem 0.6rem 2rem #ffffff63;
    color: pink; 
    border-radius: 2rem;
    /*background-color: #FFF;*/
    margin: 0 0 2rem 0;
}


audio::-webkit-media-controls-panel,
audio::-webkit-media-controls-enclosure {
    background-color:#BBB;

}

iframe {
    height: calc((47rem / 16) * 9);
}

body main div.main-cont {

    width: 47rem;

}

footer {
    background-color: black;
    margin: 0;
    padding: 3rem 0 2rem 2rem;
    color: white;
    font-style: italic;
    text-shadow: 0.1rem 0.1rem 0.5rem black, 0.1rem 0.1rem 0.5rem black, 0.1rem 0.1rem 0.5rem black, 0.1rem 0.1rem 0.5rem black, 0.1rem 0.1rem 0.5rem black, 0.1rem 0.1rem 0.5rem black, 0.3rem 0.5rem 0.1rem white;
    height: 2rem;
    background: linear-gradient(0deg, #000 67%, #FFF 100%);
    padding: 1rem;

}