html, body { margin: 0; padding: 0; width: 100%; height: 100%; font-family: Arial, Helvetica, sans-serif; }

#bg-container { width: 100%; height: 100%; position: fixed; z-index: -1; overflow: hidden; user-select: none; }
#background { object-fit: cover; width: 100%; height: 100%; background: #333; }

#content { background: #213D5BC0; max-width: 1200px; min-width: 600px; width: 100%; min-height: 100vh; margin: auto; position: relative; display: block; overflow-y: auto; overflow-x: hidden; box-shadow: 0px 0px 25px 5px #000; color: #fff; }
#heading { min-width: 600px; width: 100%; height: 120px; position: fixed; display: block; overflow: hidden; z-index: 3; user-select: none; }
#heading-content { position: relative; display: block; z-index: 2; overflow-x: visible; height: 80px; width: 100%; padding-bottom: 10px; }
#heading-img { width: 100%; height: 120px; position: absolute; display: block; }

#heading-spacer { width: 100%; height: 100px; }

#logo { margin: 10px 0 5px 20px; height: 65px; display: inline-block; vertical-align: top; }
#logo-imgContainer { aspect-ratio: calc(11/2); height: 100%; position: relative; cursor: pointer; transition: 0.2s; }
#logo-imgContainer:hover { transform: scale(1.08); }
#logo-imgContainer:hover:active { transform: scale(1.04); }
#logo-img { object-fit: contain; width: 100%; height: 100%; display: block; }
#logo-img-glow { filter: blur(10px); position: absolute; width: 100%; height: 100%; object-fit: contain; top: 0; left: 0; display: block; }

#header-socials { display: block; position: absolute; top: 0; right: 0; height: 100%; text-align: right; }

.social-link { background: #fff0; height: calc(100% - 30px); aspect-ratio: 1; padding: 10px; border-radius: 15%; margin: 5px; display: inline-block; transition: 0.2s; position: relative; }
.social-link-icon { object-fit: contain; width: 100%; height: 100%; display: block; }
.social-link:hover { transform: scale(1.1); }
.social-link:hover:active { transform: scale(1.05); }
.social-link-glow { position: absolute; top: 10px; left: 10px; width: calc(100% - 20px); height: calc(100% - 20px); filter: blur(10px); }

#header-dropdown { display: none; position: absolute; width: 140px; height: 120px; top: 10px; right: 20px; text-align: right; animation: cursor-bounce ease-in-out infinite 1s; }
#header-dropdown-button > img { height: 100%; transition: 0.2s; }
#header-dropdown-button { height: calc(100% - 20px); margin: 10px 30px; position: absolute; right: 0; transition: 0.2s; cursor: pointer; user-select: none; }
#header-dropdown-button:hover { transform: scale(1.1); }
#header-dropdown-button:hover:active { transform: scale(1.05); }

#header-dropdown-content { display: none; position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; background: #213D5BC0; z-index: 2; transition: 0.5s; overflow-y: scroll; scrollbar-width: none; }
#header-dropdown-content::-webkit-scrollbar { display: none; }
#header-dropdown-spacer { width: 100%; height: 200px; }
#header-dropdown-social-container { width: 100%; cursor: pointer; z-index: 2; position: relative; }

.header-dropdown-social { height: 100px; display: flex; width: calc(100% - 76px); overflow: auto; padding: 15px; background: #213D5BD0; border: 3px solid #416C82C0; margin: 20px; transition: 0.2s; text-decoration: none; }
.header-dropdown-social-text { text-align: center; color: #fff; display: grid; place-items: center; font-size: 28pt; margin-left: 20px; font-weight: bold; text-decoration: none; }
.header-dropdown-social-spacer { flex-grow: 1; }
.header-dropdown-social-img { height: calc(100% - 30px); margin: 15px; }

.header-dropdown-social:hover { transform: scale(1.04); }
.header-dropdown-social:hover:active { transform: scale(1.02); }

@media screen and (((orientation: portrait) and (max-width: 1000px)) or ((orientation: landscape) and (max-width: 800px)))
{
    html { scrollbar-width: none; }
    html::-webkit-scrollbar { display: none; }

    #heading { height: 200px; }
    #heading-content { display: block; height: 200px; overflow-y: hidden; }
    #heading-spacer { width: 100%; height: 200px; }
    #heading-img { height: 200px; }

    #logo { display: block; position: relative; height: 150px; width: 70%; max-width: 550px; padding: 0px; overflow: visible; margin: 0; }
    #logo-imgContainer { margin: 25px 0 25px 25px ; height: 100px; width: 100%; }
    #logo-img { margin: 0; width: 100%; height: 100%; object-fit: contain; }
    
    #header-dropdown { display: block; }
    #header-dropdown-content { display: block; }
    #header-socials { display: none; }
    .social-link { margin: 10px; width: 15%; }
}

#aincrad-preview { width: 100%; aspect-ratio: calc(16/9); position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #333; }
#aincrad-preview-loading-img { z-index: 0; width: 30%; }
#aincrad-preview-loading-text { z-index: 0; margin-top: 30px; font-size: 28pt; }
#video { width: 100%; aspect-ratio: calc(16/9); position: absolute; z-index: 1; }

#image-slideshow-template { display: none; }
#image-slideshow-title { text-align: center; margin-top: 50px; margin-bottom: 5px; }
#image-slideshow-container { text-wrap: nowrap; height: 300px; margin-bottom: 20px; user-select: none; }
.image-slideshow-object-wrapper { display: inline-block; position: absolute; }
.image-slideshow-object { width: 427px; height: 300px; margin: 10px; border-radius: 20px; background: #dddddd88; box-shadow: 5px 5px 10px 0px #000; position: relative; display: inline-block; overflow: hidden; cursor: pointer; transition: 0.2s; }
.image-slideshow-object:hover { transform: scale(1.05); }
.image-slideshow-object:hover:active { transform: scale(1.025); }
.image-slideshow-object-img { transform: scale(1.1); }
.image-slideshow-object:hover > .image-slideshow-object-imgcontainer > img { filter: blur(0px); }
.image-slideshow-object-imgcontainer { width: 100%; height: 238px; overflow: hidden; border-bottom: 2px solid #000; position: relative; }
.image-slideshow-object-imgcontainer > img { object-fit: cover; width: 100%; height: 100%; }
.image-slideshow-object-textarea { height: 50px; padding: 5px; display: flex; justify-content: center; align-items: center; font-weight: bold; }
.image-slideshow-object > .image-slideshow-object-textarea > span { color: #000; text-decoration: none; transition: 0.2s; }
.image-slideshow-object-img-overlay { position: absolute; z-index: 3; width: 100%; height: 100%; top: 0; left: 0; }

.styledSeparator-img { width: 100%; height: 110px; transform: scaleX(-1) translateY(-20px); }
.styledSeparator { width: 100%; display: grid; place-items: center; }
.styledSeparator-end { width: 100%; max-width: 1200px; min-width: 600px; display: grid; place-items: center; margin: auto; }
.styledSeparator-text { position: absolute; margin-bottom: 50px; font-size: 2em; }
.styledSeparator-img-upsidedown { width: 100%; height: 110px; transform: scaleX(-1) rotate(180deg) translateY(-20px); }
.styledSeparator-img-end { width: 100%; height: 110px; transform: scaleY(-1); }
.styledSeparator-text-upsidedown { position: absolute; font-size: 2em; }
.styledSeparator-text-end { position: absolute; margin-top: 30px; }

#widget-container { display: flex; align-items: center; justify-content: center; padding: 10px; }
#twitter-widget { flex-grow: 1; margin-right: 10px; overflow: hidden; }
#discord-widget { display: block; margin-left: 10px; height: 650px; }

#image-fullview-popup { position: fixed; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; z-index: 5; user-select: none; }
#image-fullview-wrapper { z-index: 7; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; pointer-events: none; transition: 0.2s; }
#image-fullview-img { width: 75%; height: 75%; object-fit: contain; pointer-events: none; }

#zeri-quote { padding: 2em; margin: 2em; border-radius: 1em; overflow: hidden; position: relative; }
#zeri-quote-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); filter: blur(5px) brightness(0.5); }
#zeri-quote-main { font-size: 2em; margin: 0; position: relative; }
#zeri-quote-credit { text-align: right; font-weight: bold; color: #999; margin: 1em 0 0 0; position: relative; }

.mobile-flex { flex-direction: row; }
#nessie-img { width: 200px; }

@media screen and (((orientation: portrait) and (max-width: 1000px)) or ((orientation: landscape) and (max-width: 800px)))
{
    .mobile-flex { flex-direction: column; }
    #nessie-img { width: 80%; }
}

hr { margin-top: 3em; }
.panel { padding: 1em; }

@keyframes fullview-image-reveal {
    from { transform: scale(0.8); opacity: 0.5; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes fullview-image-hide {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0.8); opacity: 0; }
}

@keyframes cursor-bounce {
    from { transform: translateY(5%); }
    50% { transform: translateY(-5%); }
    to { transform: translateY(5%); }
}