/* -------------------------------------------------- */
/*                   BASE STYLES                      */
/* -------------------------------------------------- */
/*
    ORDER THESE:
        flex
        display
        padding
        margin
        width/height (if not bg related)
        position
        alignment

        background
        bg details like size etc
        border
        shadows

        toggled display
*/

/* -------------------------------------------------- */
/* All Elements */

* { padding: 0; margin: 0; }

html { scrollbar-gutter: stable; }

/* -------------------------------------------------- */
/* Body & BG Elements */
body { background: var(--t-background); background-size: var(--t-backgroundSize); background-attachment: fixed; }
#bgOverlay {
    position:fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: -1;

    background: var(--t-bgOverlay);
    background-size: var(--t-bgOverlaySize);
}
#bgDecorL {
    position: fixed; left: 0; bottom: 0; z-index: -1;

    background: var(--t-bgDecorL); background-size: 100%;
    height: var(--t-bgDecorHeight); width: var(--t-bgDecorWidth);
}
#bgDecorR {
    position: fixed; right: 0; bottom: 0; z-index: -1;

    background: var(--t-bgDecorR); background-size: 100%;
    height: var(--t-bgDecorHeight); width: var(--t-bgDecorWidth);
}

/* -------------------------------------------------- */
/* Overlay */
#overlay {
    pointer-events: none;

    position: fixed; top: 0; left: 0; z-index: 99;

    background: repeating-linear-gradient( 0deg, #00000026, #00000026 1px, transparent 1px, transparent 2px );
    height: 100%; width: 100%;

    animation: scanlines 10s linear infinite;

    display: var(--scanlinesDisplay);
}
@keyframes scanlines {
    0% { transform: translateY(0); }
    100% { transform: translateY(10px); }
}

/* -------------------------------------------------- */
/* Containers */
#container {
    display: flex; gap: 0; flex-wrap: wrap;
    align-content: first baseline; justify-content: center;
}

#pageContainer {
    flex: 1 1 100%;
    display: flex; gap: 1rem; flex-wrap: wrap;
    margin-top: 2.5%; margin-bottom: 5rem;
    margin-left: 5%; margin-right: 5%;
    align-content: first baseline; justify-content: center;
}

/* -------------------------------------------------- */
/* Nav */
nav {
    flex: 1 1 100%;
    display: flex; flex-wrap: nowrap; gap: 3rem;
    padding-top: 0.5rem; padding-left: 2rem; padding-right: 2rem;
    position: sticky; top: 0; z-index: 98;

    background: var(--t-navBackground);
    border-bottom: var(--t-navBorderSize) var(--t-navBorderStyle) var(--t-navBorderColor);
    box-shadow: 0px 8px 16px 0px var(--t-shadow);
}
nav a { text-decoration: none; text-align: center;}

#navButtonList {
    flex: 1 1 100%;
    display: flex; flex-wrap: nowrap; gap: 1rem;
    align-content: center; justify-content: center;
}
.navButton {
    cursor: pointer;
    flex: 1 1 10%;
    padding-top: 0.35rem; padding-bottom: 0.35rem;

    background: none;
    min-width: 10rem; height:fit-content;
    border: none;

    text-decoration: none;
    font-family: var(--t-navFont);
    color: var(--t-navLinkColor);
    font-size: var(--t-navFontSize);
    letter-spacing: var(--t-navKerning);
    line-height: var(--t-navLineHeight);

    transition: 0.5s ease-in-out;
}
.navButton:hover {
    color: var(--t-navLinkColorHover);
    letter-spacing: calc( var(--t-navKerning) + 5% );

    transition: 0.5s ease-in-out;
}
.navButtonA:hover{ background: var(--t-navButtonBGHover); background-size: 100%; }
.navButtonB:hover{ background: var(--t-navButtonBGHoverALT); background-size: 100%; }

.navDropdownList {
    padding: 1rem; padding-top: 1.3rem;
    min-width: 11rem;
    position: absolute; z-index: 97;

    background: var(--t-buttonDropdownBG); background-size: 100%;
    border: var(--t-borderSize) var(--t-borderStyle) var(--t-navBorderColor);
    border-radius: 0 0 var(--t-borderRadius) var(--t-borderRadius);
    box-shadow: 0px 8px 16px 0px var(--t-shadow);

    transition: 0.5s ease-in-out;

    display: none;
}
.navDropdownList a {
    text-decoration: none;
    font-family: var(--t-bodyFont);
    color: var(--t-navLinkColor);
    font-size: var(--t-navFontSize);
    letter-spacing: var(--t-navKerning);
    line-height: var(--t-navLineHeight);
    text-align: left;

    transition: 0.5s ease-in-out;
}
.navDropdownList a:hover {
    padding-left: 1rem;

    background: var(--t-navButtonBGHoverALT); background-size: 100%;

    color: var(--t-navLinkColorHover);

    transition: 0.5s ease-in-out;
}
.navDropdown:hover .navDropdownList { display: flex; gap: 0.5rem; flex-direction: column; transition: 0.5s ease-in-out; }

#navBurger { display: none; }
#navBurgerButton {
    cursor: pointer;
    flex: 1 1 10%;
    padding-top: 0.25rem; padding-bottom: 0.25rem;

    background: var(--t-navButtonBGHoverALT); background-size: 100%;
    min-width: 5rem; height:fit-content;
    border: none;

    text-decoration: none;
    font-family: var(--t-navFont);
    color: var(--t-navLinkColor);
    font-size: calc( var(--t-navFontSize) + 50% );
    letter-spacing: var(--t-navKerning);
    line-height: var(--t-navLineHeight);

    transition: 0.5s ease-in-out;
}
#navBurgerButton:hover {
    background: var(--t-navButtonBGHover); background-size: 100%;

    color: var(--t-navLinkColorHover);

    transition: 0.5s ease-in-out;
}
#navBurgerList {
    padding: 1rem; padding-top: 1.3rem;
    min-width: 11rem;
    position: absolute; z-index: 97;

    background: var(--t-buttonDropdownBG); background-size: 100%;
    border: var(--t-borderSize) var(--t-borderStyle) var(--t-navBorderColor);
    border-radius: 0 0 var(--t-borderRadius) var(--t-borderRadius);
    box-shadow: 0px 8px 16px 0px var(--t-shadow);

    transition: 0.5s ease-in-out;

    display: none;
}
#navBurgerList a {
    text-decoration: none;
    font-family: var(--t-bodyFont);
    color: var(--t-navLinkColor);
    font-size: var(--t-navFontSize);
    letter-spacing: var(--t-navKerning);
    line-height: var(--t-navLineHeight);

    transition: 0.5s ease-in-out;
}
#navBurgerList a:hover {
    padding-left: 1rem;

    background: var(--t-navButtonBGHoverALT); background-size: 100%;

    color: var(--t-navLinkColorHover);

    transition: 0.5s ease-in-out;
}
#navBurger:hover #navBurgerList { display: flex; gap: 0.5rem; flex-direction: column; transition: 0.5s ease-in-out; }


/* -------------------------------------------------- */
/* Header */
header {
    flex: 1 1 100%;
    margin-bottom: 1rem;

    text-align: center;
}

header h1 {
    text-transform: uppercase;
    font-family: var(--t-headerFont);
    color: var(--t-headerColor);
    font-size: var(--t-headerSize);
    letter-spacing: var(--t-headerKerning);
    text-align: center;
        
    text-shadow: 
        -2px 0 var(--t-pink), 2px 0 var(--t-blue), 0 3px 3px var(--t-green), /* Chromatic */
        0 0 20px var(--t-shadow); /* Shadow */
    animation: headerPulse 4s ease-in-out infinite;
}
@keyframes headerPulse {
    0%, 100% { 
        opacity: 1;
        text-shadow:
            -2px 0 var(--t-pink), 2px 0 var(--t-blue), 0 3px 3px var(--t-green), /* Chromatic */
            2px 2px 0 var(--t-lGrey-trans), -2px -2px 0 var(--t-shadow), 0 0 20px var(--t-glow); /* Glow */
        translate: -0.04rem -0.05rem;
    }
    50% { opacity: 0.95; letter-spacing: calc( var(--t-headerKerning) + 0.1rem ); translate: 0.04rem 0.04rem; }
    25% { 
        text-shadow:
            -2px 0 var(--t-pink), 2px 0 var(--t-blue), 0 3px 3px var(--t-green), /* Chromatic */
            -2px 2px 0 var(--t-lGrey-trans), 2px -2px 0 var(--t-shadow), 0 0 20px var(--t-glow); /* Glow */
    }
    75% { 
        text-shadow:
            -2px 0 var(--t-pink), 2px 0 var(--t-blue), 0 3px 3px var(--t-green), /* Chromatic */
            2px -2px 0 var(--t-lGrey-trans), -2px 2px 0 var(--t-shadow), 0 0 20px var(--t-glow); /* Glow */
    }
}

/* -------------------------------------------------- */
/* Main */
main {
    flex: 1 1 70%;
    margin-top: 1rem;
    display: flex; gap: 1rem; flex-wrap: wrap;
    align-content: first baseline; justify-content: center;
}
.block { flex: 1 1 100%; }
.blockHeading {
    background: var(--t-blockHeadingBG);
    border: var(--t-borderSize) var(--t-borderStyle) var(--t-borderColor); border-bottom: none;
    border-radius: var(--t-borderRadius) var(--t-borderRadius) 0 0;
}
.blockBody {
    padding: 1.5rem;

    background: var(--m-blockBodyBGColor);
    border: var(--t-borderSize) var(--t-borderStyle) var(--t-borderColor); border-top: none;
    border-radius: 0 0 var(--t-borderRadius) var(--t-borderRadius);
}

.gooBlockBody {
    padding: 1.5rem;

    background: var(--sb-background);
    border: var(--t-borderSize) var(--t-borderStyle) var(--t-borderColor);
    border-radius: var(--t-borderRadius);
}
.underGooBlock {
    margin-top: -0.95rem; margin-bottom: -0.95rem;

    color: var(--t-borderColor);
    font-size: 2rem;
}

.shelf { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 1rem; align-content: first baseline; }
.shelfHalf { flex: 1 1 calc( 50% - 1rem ); display: flex; flex-wrap: wrap; gap: 1rem; align-content: first baseline; }
.shelfTwoThirds { flex: 1 1 calc( 65% - 1rem ); display: flex; flex-wrap: wrap; gap: 1rem; align-content: first baseline; }
.shelfOneThird { flex: 1 1 calc( 33% - 1rem ); display: flex; flex-wrap: wrap; gap: 1rem; align-content: first baseline; }

/* -------------------------------------------------- */
/* Headings */
main h3 {
    font-family: var(--t-displayFont);
    color: var(--t-blockHeadingFontColor);
    font-size: var(--t-h3Size);
    letter-spacing: var(--t-nonReaderKerning);
    line-height: var(--m-lineHeight);
    
    text-shadow:
        -0.05rem -0.05rem 0 var(--t-blockHeadingOutlineColor),
        0.05rem -0.05rem 0 var(--t-blockHeadingOutlineColor),
        -0.05rem 0.05rem 0 var(--t-blockHeadingOutlineColor),
        1px 1px 0 var(--t-blockHeadingOutlineColor);
    rotate: -0.5deg;
}

main h4, main h5, main h6 {
    font-family: var(--t-bodyFont);
    color: var(--m-headingColor);
    letter-spacing: var(--m-kerning);
    line-height: var(--m-lineHeight);
}
main h4 { font-size: var(--t-h4Size); }
main h5 { font-size: var(--m-h5Size); }
main h6 { font-size: var(--m-h6Size); }

/* -------------------------------------------------- */
/* Text */
main p {
    font-family: var(--t-bodyFont);
    color: var(--m-bodyFontColor);
    font-size: var(--m-fontSize);
    letter-spacing: var(--m-kerning);
    line-height: var(--m-lineHeight);
}

main strong {
    font-family: var(--t-bodyFont);
    color: var(--m-strongColor);
    font-weight: 700;
    letter-spacing: var(--m-kerning);
    line-height: var(--m-lineHeight);
}

main li {
    font-family: var(--t-bodyFont);
    color: var(--m-bodyFontColor);
    font-size: var(--m-fontSize);
    letter-spacing: var(--m-kerning);
    line-height: var(--m-lineHeight);
}

main a {
    text-decoration: none; 
    font-family: var(--t-bodyFont);
    color: var(--m-linkColor);
    transition: 0.3s ease-in-out;
}
main a:hover { color: var(--m-linkColorHover); transition: 0.3s ease-in-out; }

/* -------------------------------------------------- */
/* Text Decorations */
main hr { border-bottom: var(--t-dividerSize) var(--t-dividerStyle) var(--m-dividerColor); }

ul { padding-left: 1.5rem; }
ul li { list-style-type:"â–¸ "; }
ol { padding-left: 1.5rem; }

.note li {
    padding-left: 1rem; padding-right: 1rem;
    margin-top: 0.5rem; margin-bottom: 1rem;
    border-left: .18rem solid var(--t-accent-twoA);

    list-style: none;
}

/* -------------------------------------------------- */
/* Aside */
aside {
    flex: 1 1 20%;
    height: fit-content;
    position: sticky; top: 0;
    align-content: first baseline;
}
#aside-iframe {
    width: 100%;
    height: 46rem;
    border: none;
    padding-left: 1rem; margin-top: 5rem;
}

/* -------------------------------------------------- */
/* Page Footer */
#pageFooter {
    flex: 1 1 100%;
    margin-top: 1rem;

    font-family: var(--t-bodyFont);
    color: var(--t-nonReaderFontColor);
    font-size: var(--t-nonReaderFontSize);
    letter-spacing: var(--t-nonReaderKerning);
    line-height: var(--t-nonReaderLineHeight);
    text-align: center;
}
#pageFooter a { text-decoration: none; color: var(--t-nonReaderLinkColor); transition: 0.4s ease-in-out; }
#pageFooter a:hover { color: var(--t-nonReaderLinkColorHover); letter-spacing: calc( var(--t-nonReaderKerning) + 0.1rem ); transition: 0.4s ease-in-out; }

/* -------------------------------------------------- */
/* Footer */
footer {
    flex: 1 1 100%;
    display: flex; gap: 2rem; flex-wrap: nowrap;
    padding: 1rem; padding-left: 2%; padding-right: 2%;
    margin-top: 1rem;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 96;
    align-content: first baseline; justify-content: center;
    
    background-image: linear-gradient(to top, var(--t-shadow), rgba(0, 0, 0, 0));
}

#footerSpacer { flex: 1 1 80%; }
#footerLeftButtons {
    flex: 1 1 15%;
    display: flex; gap: 1rem; flex-wrap: nowrap;
}
#footerRightButtons {
    flex: 1 1 5%;
    display: flex; gap: 1rem; flex-wrap: nowrap;
}

#settingsContainer { flex: 1 1 50%; }
#settingsButton {
    cursor: pointer;
    position: absolute; bottom: 1rem; z-index: 98;

    background: var(--t-texturedButtonBG); background-size: 100%;
    height: 2.2rem; width: 6.5rem;
    border: var(--t-borderSize) var(--t-borderStyle) var(--t-navBorderColor);
    box-shadow: 0px 8px 16px 0px var(--t-shadow);

    font-family: var(--t-bodyFont);
    color: var(--t-buttonFontColor);
    font-size: var(--t-nonReaderFontSize);
    letter-spacing: var(--t-nonReaderKerning);
    line-height: var(--t-nonReaderLineHeight);
    text-align: center;

    transition: 0.4s ease-in-out;
}
#settingsButton:hover { background: var(--t-texturedButtonBGHover); background-size: 100%; transform: scale(1.1); transition: 0.4s ease-in-out; }
#settingsMenu {
    min-width: 16rem;
    position: absolute; bottom: 50%; padding-bottom: 2rem; z-index: 96 !important;
    padding: 1rem; margin-left: 0.4rem;

    background: var(--t-buttonDropdownBG); background-size: 100%;
    border: var(--t-borderSize) var(--t-borderStyle) var(--t-navBorderColor);
    border-radius: var(--t-borderRadius);
    box-shadow: 0px 8px 16px 0px var(--t-shadow);

    display: none;
}
#settingsContainer:hover #settingsMenu { display: block; }

#readerSettings {
    display: flex; flex-wrap: wrap;
    justify-content: center;
}

#modeSettings {
    display: flex; flex-wrap: wrap;
    padding-left: 1rem;
    justify-content: right;
}
.mode-switch {
    cursor: pointer;
    height: 1rem; width: 1rem;
    margin: 0.5rem;
    border: 0.13rem solid var(--t-borderColor);
    border-radius: 0.8rem;

    transition: 0.4s ease-in-out;
}
.mode-switch:hover { transform: scale(1.2); transition: 0.4s ease-in-out; }
#mode-switch-none { background-color: var(--o-reader-none); }
#mode-switch-light { background-color: var(--o-reader-light); }
#mode-switch-dark { background-color: var(--o-reader-dark); }

#fontsizeSettings {
    display: flex; flex-wrap: wrap;
    padding-right: 1rem;
    justify-content: right;
    border-right: solid 0.18rem var(--t-borderColor);
}
.fontsize-switch {
    cursor: pointer;
    margin: 0.5rem;

    font-family: var(--t-bodyFont);
    color: var(--t-buttonFontColor);
    text-align: center;

    transition: 0.4s ease-in-out;
}
.fontsize-switch:hover { transform: scale(1.2); transition: 0.4s ease-in-out; }
#fontsize-switch-small { font-size: var(--Small-m-fontSize); }
#fontsize-switch-default { font-size: var(--Default-m-fontSize); }
#fontsize-switch-large { font-size: var(--Large-m-fontSize); }

#displaySettings {
    padding-bottom: 1.5rem;
    text-align: center;
    font-family: var(--t-bodyFont);
    font-size: var(--t-nonReaderFontSize);
    letter-spacing: var(--t-nonReaderKerning);
    color: var(--t-nonReaderFontColor);
    line-height: var(--t-nonReaderLineHeight);
}
.scanlinesdisplay-switch { cursor: pointer; text-decoration: none; color: var(--t-nonReaderLinkColor); transition: 0.4s ease-in-out; }
.scanlinesdisplay-switch:hover { color: var(--t-nonReaderLinkColorHover); letter-spacing: calc( var(--t-nonReaderKerning) + 0.1rem ); transition: 0.4s ease-in-out; }
#scanlinesdisplay-enable-switch { display: var(--scanlinesEnableDisplay); }
#scanlinesdisplay-disable-switch { display: var(--scanlinesDisableDisplay); }

#musicButtonContainer { flex: 1 1 50%; }
#musicButton {
    cursor: pointer;
    position: absolute; bottom: 1rem; left: 9.5rem; z-index: 98;

    background: var(--t-texturedButtonBG); background-size: 100%;
    height: 2.2rem; width: 5rem;
    border: var(--t-borderSize) var(--t-borderStyle) var(--t-navBorderColor);
    box-shadow: 0px 8px 16px 0px var(--t-shadow);

    font-family: var(--t-bodyFont);
    color: var(--t-buttonFontColor);
    font-size: var(--t-nonReaderFontSize);
    letter-spacing: var(--t-nonReaderKerning);
    line-height: var(--t-nonReaderLineHeight);
    text-align: center;

    transition: 0.4s ease-in-out;
}
#musicButton:hover { background: var(--t-texturedButtonBGHover); background-size: 100%; transform: scale(1.1); transition: 0.4s ease-in-out; }

#toTopButtonContainer{ flex: 1 1 100%; }
#toTopButton {
    cursor: pointer;
    position: absolute; bottom: 1rem; right: 1.5rem; z-index: 98;

    background: var(--t-texturedButtonBG); background-size: 100%;
    height: 3rem; width: 3rem;
    border: var(--t-borderSize) var(--t-borderStyle) var(--t-navBorderColor);

    font-family: var(--t-bodyFont);
    color: var(--t-buttonFontColor);
    font-size: var(--t-nonReaderFontSize);
    letter-spacing: var(--t-nonReaderKerning);
    line-height: var(--t-nonReaderLineHeight);
    text-align: center;

    box-shadow: 0px 8px 16px 0px var(--t-shadow);
    transition: 0.4s ease-in-out;
}
#toTopButton:hover { background: var(--t-texturedButtonBGHover); background-size: 100%; transform: scale(1.1); transition: 0.4s ease-in-out; }


/* -------------------------------------------------- */
/* -------------------------------------------------- */
/* -------------------------------------------------- */

/* -------------------------------------------------- */
/*       COMMON WIDGETS      */
/* -------------------------------------------------- */

/* -------------------------------------------------- */
/* Big Buttons */
.bigButtonBlock {
    display: flex; gap: 1.5rem; flex-direction: row; flex-wrap: wrap;
}

.bigButton {
    cursor: pointer;
    width: 15rem;
    padding: 0.7rem;
    flex: 1 1 25%;

    background: var(--t-texturedButtonBGHover); background-size: 100%;
    border: var(--t-borderSize) var(--t-borderStyle) var(--t-navBorderColor);

    text-decoration: none;
    font-family: var(--t-navFont);
    color: var(--t-navLinkColor);
    font-size: var(--t-navFontSize);
    letter-spacing: var(--t-navKerning);
    text-align: center;

    box-shadow: 0px 8px 16px 0px var(--t-shadow);
    transition: 0.5s ease-in-out;
}
.bigButton:hover {
    background: var(--t-texturedButtonBG); background-size: 100%;

    color: var(--t-navLinkColorHover);
    letter-spacing: calc( var(--t-navKerning) + 5% );

    transform: scale(1.1);
    rotate: 0deg !important;
    transition: 0.5s ease-in-out;
}

/* -------------------------------------------------- */
/* Marquee */
.marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}
.marquee-content {
    display: inline-flex; gap: .5rem;
    animation: marquee 30s steps(400, end) infinite;
}
.marquee-content:hover { animation-play-state: paused; }
.marquee-content img {
    vertical-align: middle;

    border: var(--t-borderSize) var(--t-borderStyle) var(--t-borderColor);
    border-radius: var(--t-borderRadius);

    opacity: 0.5; transition: 0.4s ease-in-out;
}
.marquee-content img:hover { opacity: 1; transform: scale(1.1); transition: 0.4s ease-in-out; }
@keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-150%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-content {
    width: auto;
    padding-left: 0;
    overflow: scroll;
    animation: none;
  }
}

/* -------------------------------------------------- */
/* Host Tags */
#neocitiesTag {
    cursor: pointer;
    height: var(--nc-height); width: 2rem;
    margin-right: 1.5rem; position: fixed; top: 0; right: 0; z-index: 95;
    padding-top: 4rem; padding-bottom: 0.5rem;

    background: var(--t-orange);
    border: var(--t-borderSize) var(--t-borderStyle) var(--t-borderColor);
    border-radius: var(--t-borderRadius);
    box-shadow: 0px 8px 16px 0px var(--t-shadow);

    font-family: var(--t-bodyFont);
    color: var(--t-buttonFontColor);
    font-size: var(--t-nonReaderFontSize);
    letter-spacing: var(--t-nonReaderKerning);
    line-height: var(--t-nonReaderLineHeight);
    text-align: center;
    align-content: end;

    transition: 0.4s ease-in-out;
}
#neocitiesTag:hover { height: var(--nc-heightHover); transition: 0.4s ease-in-out; }
#nekowebTag {
    cursor: pointer;
    height: var(--nw-height); width: 2rem;
    margin-right: 4.5rem; position: fixed; top: 0; right: 0; z-index: 95;
    padding-top: 4rem; padding-bottom: 0.5rem;

    background: var(--t-pink);
    border: var(--t-borderSize) var(--t-borderStyle) var(--t-borderColor);
    border-radius: var(--t-borderRadius);
    box-shadow: 0px 8px 16px 0px var(--t-shadow);

    font-family: var(--t-bodyFont);
    color: var(--t-buttonFontColor);
    font-size: var(--t-nonReaderFontSize);
    letter-spacing: var(--t-nonReaderKerning);
    line-height: var(--t-nonReaderLineHeight);
    text-align: center;
    align-content: end;

    transition: 0.4s ease-in-out;
}
#nekowebTag:hover { height: var(--nw-heightHover); transition: 0.4s ease-in-out; }

@media screen and (max-width:1000px) {
    #hostTags { display: none; }
}

/* -------------------------------------------------- */
/* -------------------------------------------------- */
/* -------------------------------------------------- */

/* -------------------------------------------------- */
/* Mobile Friendliness */

@media screen and (max-width:1200px) {
    #navBurger { display: block; }
    #navButtonList { display: none; }
}

@media screen and (max-width:1000px) {
    main { flex: 1 1 100%; }
    aside { flex: 1 1 100%; position:relative; }
    #aside-iframe { width: 99%; height: 45rem; padding-left: 0; margin-top: 0; }
}

@media screen and (max-width:800px) {
    #bgDecorR { display: none; }
}

@media screen and (max-width:700px) {
    .shelfHalf { flex: 1 1 100%; }
    .shelfTwoThirds { flex: 1 1 100%; }
    .shelfOneThird { flex: 1 1 100%; }
}

@media screen and (max-width:500px) {
    header h1 { font-size: calc( var(--t-headerSize) - 1rem ); }
    #musicButton { display: none; }
    main h3 { font-size: calc( var(--t-h3Size) - 0.5rem ); }
}

@media screen and (max-width:350px) {
    header h1 { font-size: calc( var(--t-headerSize) - 2rem ); }
    main h3 { font-size: calc( var(--t-h3Size) - 1rem ); }
}

/* -------------------------------------------------- */
/* -------------------------------------------------- */
/* -------------------------------------------------- */