*
{
    /* See https://stackoverflow.com/questions/779434/how-do-i-prevent-the-padding-property-from-changing-width-or-height-in-css. */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */

    scroll-behavior: smooth;
    scrollbar-color: #303030 #252525; /* moz */
    
    /* The rectangle debugger. */
    /*/border: 2px dashed orange;/*/
}

::-webkit-scrollbar
{
    width: 20px;
}
::-webkit-scrollbar-track
{
    background: #252525;
}
::-webkit-scrollbar-thumb
{
    background: #303030;
}
::-webkit-scrollbar-thumb:hover
{
    background: #353535;
}
::-webkit-scrollbar-thumb:active
{
    background: #3b3b3b;
}

.flavorText
{
    font-family: "Georgia", sans-serif;
    font-style: italic;
    color: darkgray;
}
p a.playMediaLink::after
{
    all: initial;

    content: "\00A0\25B6\FE0E";
    color: cornflowerblue;
    font-family: "Roboto Slab", "Merriweather", sans-serif;
}

html
{
    background-color: #252525;

    display: flex;
    width: 100%;
    min-height: 100%;
    height: auto;
}
body
{
    color: white;

    display: flex;
    flex-direction: column;
    flex: 1;
    height: auto;
    margin: 0;
}
header
{
    background-color: #252525;
    z-index: 1337;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: calc(10px + 1rem) 10px 10px 10px;
    margin: 0;
}
main
{
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0px calc(max(0px, min(240px, 50vw - 400px)) + 10px) 0px calc(max(0px, min(240px, 50vw - 400px)) + 10px);
    margin: 0;
}
footer
{
    color: darkgray;
    transition: margin 0.4s;

    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: auto 0 0 0;
}
footer::before
{
    content: "";
    font-size: 1rem;
    background: #ffdc00;

    display: block;
    position: relative;
    width: 100%;
    height: 5px;
    margin: 0px 0px 10px 0px;
}
h1
{
    font-family: "Rockwell Nova", sans-serif;
    font-size: calc(9 / 16 * 2vw + 2vh);
    font-weight: normal;
    font-style: normal;
    text-shadow: 0.12em 0.12em 0 #00000080;

    padding: 10px;
    margin: 0;
}
h2
{
    font-family: "Rockwell Nova", sans-serif;
    font-size: max(1.2rem, calc(9 / 16 * 1.5vw + 1.5vh));
    font-weight: normal;

    padding: 10px;
    margin: 0;
}
button h2
{
    padding: 0;
}
h3
{
    font-family: "Rockwell Nova", "Urbanist", sans-serif;
    font-size: x-large;
    font-weight: normal;

    width: fit-content;
    padding: 10px;
    margin: 0;
}
h4
{
    font-family: "Josefin Sans", "Merriweather", sans-serif;
    font-size: x-large;
    font-weight: normal;

    margin: 0;
    width: fit-content;
    padding: 10px;
}
h5
{
    font-family: "Josefin Sans", sans-serif;
    font-size: large;
    font-weight: normal;
    font-style: italic;

    width: fit-content;
    padding: 10px;
    margin: 0;
}
p
{
    font-family: "Roboto Slab", "Merriweather", sans-serif;
    font-size: medium;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;

    padding: 0px 10px 10px 10px;
    margin: 0;
}
h1 a
{
    all: inherit;

    cursor: pointer;

    padding: 0;
    margin: 0;
}
button a
{
    color: inherit;
    text-shadow: 0.12em 0.12em 0 #00000080;
    text-decoration: underline;
    text-decoration-thickness: 0.12em;
    text-decoration-color: transparent;
    text-underline-offset: 0.04em;
    transition: text-underline-offset 0.2s, text-decoration-color 0.2s;
}
button a:hover
{
    text-decoration-color: white;
    text-underline-offset: 0.24em;

    cursor: pointer;
}
button a:active
{
    text-decoration-color: #ffdc00;
    text-underline-offset: 0.24em;

    cursor: pointer;
}
button a:visited
{
    color: inherit;
}
p a
{
    color: cornflowerblue;
    font-weight: bold;
    font-style: normal;
    text-decoration: underline solid;
    text-decoration-color: cornflowerblue;
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.2em;
    transition: text-decoration-thickness 0.2s, text-decoration-color 0.2s, text-underline-offset 0.2s, transform 0.2s;

    display: inline-block;
    transform: translate(0, 0);
}
p a:hover
{
    text-decoration-thickness: 0.12em;
    text-decoration-color: white;
    text-underline-offset: 0.32em;

    transform: translate(0, -0.12em);
}
p a:active
{
    text-decoration-thickness: 0.12em;
    text-decoration-color: #ffdc00;
    text-underline-offset: 0.32em;

    transform: translate(0, -0.12em);
}
p a::after
{
    content: "";
    background-image: url("/res/common/external-link.svg");
    background-size: 100% 100%;
    /* cornflowerblue */
    filter: invert(53%) sepia(14%) saturate(2114%) hue-rotate(183deg) brightness(107%) contrast(86%);
    
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 1em;
    height: 1em;
    padding: 0;
    margin: 0em 0.125em 0em 0.125em;
}

button
{
    color: inherit;
    background-color: transparent;
    border: none;

    width: max-content;
    padding: 0;
    margin: 0em 0em 0em max(1.2rem, calc(9 / 16 * 1.5vw + 1.5vh));
}
button:first-child
{
    margin-left: 10px;
}