/*CSS RESET*/
*{box-sizing:border-box}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1;font-size:1em;letter-spacing:1px}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
/*END CSS RESET*/

/* core elements */
html { 
    scroll-behavior: smooth 
}

body {
    position: relative;
    background: #000000;
    color: white;
    min-height: 100vh;
}

img {
    max-width: 100%;
}

a {
    text-decoration: none;
    font-weight: 400;
    color: #00ffff;
}

a:not(#socials a):not(.cta):not(.noglow) {
    text-shadow: 3px 3px 0px #ff33aa7a, 0px 0px 10px #00ffff7a, 0px 0px 5px #00ffff7a;
}

ol, ul {
    display: block;
    padding-left: 2em;
}

ul ul, ul ol, ol ul, ol ol {
    margin: 1em 0;
}

.gallery > *, .highlight-images .image-container, .lazy { /* this has to be important because of the in-html assignment of images, plus other variables */
    background-color: black !important;
    background-image: url(/img/qaspin.gif), url(/img/loadstatic.gif) !important;
    background-size: 60px, cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* markdown typography */
.md > h1, .md > h2, .md > h3, .md > .langcontent > * {
    line-height: 1.25em;
    margin-bottom: 1em;
    font-size: calc(0.6em + 0.25vw);
}

@media only screen and (max-width: 550px) {
    .md > h1, .md > h2, .md > h3, .md > .langcontent > * {
        font-size: calc(0.7em + 0.5vw);
    }
}

.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 {
    font-family: "Paragon City";
    font-style: italic;
    margin-bottom: 0.5em;
}

.md * ~ h2, .md * ~ h3, .md * ~ h4, .md * ~ h5, .md * ~ h6 {
    margin-top: 3.5vh;
}
      
.md .langcontent h2 { font-size: calc(1em + 1vw); border-bottom: 1px solid;}
.md .langcontent h3 { font-size: calc(1em + 0.25vw); }
.md .langcontent h4 { font-size: calc(1em + 0.5vw); }
.md .langcontent h5 { font-size: calc(1em + 0.25vw); }
.md .langcontent h6 { font-size: 1em; }
.md li { margin-bottom: 0.5em; }
.md em { font-style: italic; }
.md strong { font-weight: 600; }

.md img {
    margin: auto; 
    display: block; 
    cursor: pointer;
    margin-bottom: 5vh;
    max-width: 100%; 
    width: auto;
    max-height: 30vh;
}

.md blockquote {
    position: relative;
    display: inline-block;
    font-style: italic;
    border-left: 5px solid;
    padding-left: 1em;
    padding: 10px 2em;
}

.md blockquote::after, .md blockquote::before {
    content: '“';
    position: absolute;
    top: 0;
    left: 0.25em;
    font-size: calc(1em + 1vw);
}

.md blockquote::after {
    content: '”';
    right: 0.25em;
    left: unset;
}

.md code {
    font-family: monospace;
    background: black;
    display: block;
    padding: 10px;
    color: #02e2f6;
    border: 1px solid;
    max-width: 80vw;
    overflow-x: scroll;
    margin: auto;
}

/* fonts */
@font-face {
    font-family: 'Alien Encounters';
    src: url('./fonts/AlienEncountersBold.woff2') format('woff2'),
        url('./fonts/AlienEncountersBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Alien Encounters';
    src: url('./fonts/AlienEncountersItalic.woff2') format('woff2'),
        url('./fonts/AlienEncountersItalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'VCR OSD Mono';
    src: url('./fonts/VCROSDMono.woff2') format('woff2'),
        url('./fonts/VCROSDMono.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Paragon City';
    src: url('./fonts/ParagonCity-Italic.woff2') format('woff2'),
        url('./fonts/ParagonCity-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Paragon City';
    src: url('./fonts/ParagonCity.woff2') format('woff2'),
        url('./fonts/ParagonCity.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* SPLASH */
#splash {
    height: 100vh;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#splash::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20vh;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(20, 14, 42) 90%, #1a0c2f 100%);
    z-index: 1;
}  

.bg, .bg > *, .bg::after, .bg::before, .tower {
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    z-index: 1;
}

.bg {
    top: 0;
    left: 0;
    z-index: -1;
}

.bg::before {
    background: linear-gradient(0deg, rgba(249,8,122,1) 0%, rgba(26,12,46,1) 50%);
    height: 150%;
    bottom: 0;
    z-index: -3;
}

.bg::after {
    background-image: url(./img/stars.png);
    height: 50%;
    z-index: -2;
}

#splash h1, #splash .h1 {
    color: #ff0084;
    font-size: 10vw;
    z-index: 10;
    position: absolute;
    bottom: calc(35vh - 0.17em);
    font-family: "Alien Encounters";
    font-style: italic;
    display: flex;
    justify-content: center;
    align-items: center;
}

#splash h1::after, #splash .h1::after {
    content: attr(t);
    position: absolute;
    left: 0;
    transform: translate(-0.05em, -0.05em);
    color: #02e2f6;
    text-shadow: 0px 0px 0.075em #00eaffbf;
}

.ctas {
    position: absolute;
    z-index: 10;
    bottom: 0;
    height: 35vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.cta-container, .cta-container > div {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.cta.smaller {
    max-width: 30%;
    width: 200px;
    font-size: calc(0.6em + 0.6vw);
}

.cta, input[type="submit"] {
    cursor: pointer;
    padding: 0.5em;
    margin: 0.5em;
    border-radius: 5px;
    color: #02e2f6;
    font-family: "Alien Encounters";
    font-size: calc(0.8em + 0.8vw);
    display: inline-block;
    text-align: center;
    background: #140e2a;
    box-shadow: 0px 0px 10px #510095 inset;
    text-shadow: 0px 0px 20px #02e2f6a8;
}

.cta {
    max-width: 40%;
    width: 300px;
    border: 1px solid transparent;
}

.cta.playnow {
    border: 1px solid #02e2f6;
    box-shadow: 0px 0px 10px #02e2f6;
}

.cta:hover, .cta.guidelink {
    color: #ff0084;
    border: 1px solid #ff0084;
    text-shadow: 0px 0px 20px #ff0084;
}

.cta.playnow:hover {
    border: 1px solid;
    box-shadow: 0px 0px 10px;
}

.motto {
    display: block;
    text-align: center;
    font-size: calc(1em + 1vw);
    font-weight: 400;
    text-transform: uppercase;
    padding: 0.5em;
    font-family: VCR OSD Mono;
    color: white;
    text-shadow: 1px 1px 3px #02e2f6, -1px -1px 3px #f21876;
}

.motto:last-of-type {
    font-size: calc(0.8em + 0.8vw)
}

.motto.title {
    font-size: calc(1em + 2vw);
    margin: 2vh 10px;
}

.motto.title > span:not(.langcontent) {
    display: block;
    font-size: 0.5em;
}

.road {
    background: linear-gradient(0deg, rgba(20,14,42,1) 0%, rgba(20,14,42,1) 95%, rgba(99,27,152,1) 100%);
    height: 35vh;
    bottom: 0;
    top: unset;
}

.city {
    bottom: 35vh;
    z-index: 4;
}

.city::after {
    content: "";
    background: url(./img/thunderbuildings.png);
    background-position: -400px bottom;
    background-repeat: repeat-x;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 2;
}

.tower {
    bottom: 8vh;
    left: 0;
    right: 0;
    margin: auto;
    width: 84px;
    height: 100%;
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tower::before, .tower::after {
    position: absolute;
    content: "";
}

.tower::before {
    background: url(./img/towersolo.png);
    background-repeat: no-repeat;
    background-position: bottom;
    width: 84px;
    height: 100%;
    z-index: 2;
}

.tower::after {
    width: 8px;
    height: 150vh;
    background: #d4effb;
    box-shadow: 0px 0px 10px #ff00ab;
    bottom: 0;
}

.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 60vh;
}

.logo::before, .logo::after {
    content: "";
    width: 60vh;
    height: 60vh;
    position: absolute;
    background-image: url(./img/logocrop.png);
    background-repeat: no-repeat;
    background-size: 60vh;
}

.logo::before {
    filter: drop-shadow(0px 0px 100px #ff009b);
}

.logo::after {
    background-image: url(./img/logocrop.png);
}

.road {
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 50px;
    z-index: -1;
}

.roadlines {
    height: 100vh;
    width: 8vw;
    border: 1px solid #c1bbbf;
    border-top: 0;
    border-bottom: 0;
    transform-origin: top;
    position: absolute;
    top: 0;
    filter: drop-shadow(0px 0px 1px #ff00bf);
    transform: rotateX(13deg) translateY(-50px);
    background: linear-gradient(0deg, rgba(20,14,42,0) 50%, rgba(193,187,191,1) 50%, rgba(193,187,191,1) 100%);
    background-size: 1px 50px;
    background-repeat: repeat-y;
    background-position: center;
    /* animation: ROAD 1s linear infinite; road is closed for now*/
}

@keyframes ROAD {
    0% { transform: rotateX(13deg) translateY(-50px) }
    100% { transform: rotateX(13deg) translateY(0px) }
}


/* flip blurs */
.city.flip, .logo.flip, .h1.flip {
    transform-origin: bottom center;
    transform: translateY(-10vh) rotate(180deg);
    z-index: 3;
    filter: blur(10px);
    opacity: 0.5;
}

.logo.flip {
    z-index: 2;
    filter: blur(30px);
    opacity: 0.15
}

.logo.flip::before {
    filter: unset;
}

.logo.flip::after {
    display: none;
}

.h1.flip {
    transform: translateY(-5vh) rotate(180deg);
    opacity: 0.1;
}

.h1.flip::after {
    text-shadow: unset;
}

/* MOBILE SPLASH ADJUSTMENTS */
@media only screen and (max-width: 550px) {
    .road {
        height: 35vh;
        perspective: unset;
    }

    .roadlines {
        display: none;
    }

    .city {
        bottom: 35vh;
    }

    .city::after {
        background-size: 3000px;
        background-position: -550px bottom;
    }

    .logo {
        height: 35vh;
        top: 10vh;
    }

    .logo::before, .logo::after {
        width: 35vh;
        height: 35vh;
        background-size: 35vh;
    }

    h1, .h1 {
        font-size: 14vw;
        bottom: calc(35vh - 0.17em);
        margin-left: -0.25em;
    }

    .h1.flip {
        transform: translateY(0vh) rotate(180deg);
    }

    .logo.flip {
        top: 40vh;
    }

    .city.flip, .logo.flip, .h1.flip {
        transform: translateY(0vh) rotate(180deg);
    }

    .ctas {
        height: 40vh;
    }

    .cta {
        max-width: 95%;
        font-size: 5vw;
    }
}

@media only screen and (min-width: 400px) and (max-width: 700px) {
    .cta-container > .cta {
        width: 40%;
        flex-grow: 1;
    }

    .cta-container {
        flex-direction: row;
    }
}

@media only screen and (max-width: 400px) and (min-height: 700px) {
	.bg {
	  top: -5vh;
	}

	#splash h1, #splash .h1 {
	  bottom: calc(40vh - 0.17em);
	}
}

/* to improve the splash screen on super small screens */
@media only screen and (max-width: 400px) and (max-height: 700px) {
    .cta-container {
        flex-direction: column;
    }

    #splash h1, #splash .h1 {
        bottom: calc(46vh - 0.17em);
    }
    
    .road {
        height: 45vh;
        z-index: 5;
    }
}

/* intro anim */
#splash .ctas {
    transition: all 3s ease-in-out;
}

.city.flip, .h1, .logo::before, .logo.flip {
    transition: opacity 2s ease-in-out;
}

.tower::after {
    transition: opacity 400ms ease-in-out;
}

.logo {
    transition: transform 2s ease-in-out, opacity 1s ease-in-out;
    transition-delay: 0s, 400ms;
}

.city, .road, .bg::before {
    transition: transform 4s cubic-bezier(.42,.64,.1,.89);
}

.loading .logo, .loading .tower::after {
    opacity: 0;
}

.starting-intro .city.flip, .starting-intro .h1, .starting-intro .logo::before, .starting-intro .logo.flip,
.intro .city.flip, .intro .h1, .intro .logo::before, .intro .logo.flip {
    opacity: 0;
}

.starting-intro .ctas, .intro .ctas {
    transform: translateY(10vh);
    opacity: 0;
}

.starting-intro #splash .bg::before {
    transform: translateY(50vh);
}

.intro #splash .bg::before {
    transform: translateY(0vh);
}

.loading.starting-intro .logo {
    transform: translateY(20vh) scale(0.8);
}

.starting-intro .logo {
    transform: translateY(20vh);
}

.loading #splash .city:not(.city.flip), .starting-intro #splash .city:not(.city.flip), .starting-intro .road {
    transform: translateY(80vh);
}

/* OTHER SECTION STUFF */
.infosection {
    position: relative;
    z-index: 1;
    min-height: 100vh; 	
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.width-container {
    max-width: 1250px;
    padding: 20px;
    width: 100%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
}

@media only screen and (max-width: 600px) {
    .width-container {
        padding: calc(5px + 1vw);
    }
}

/* WHAT'S NEW */
#newstuff {
    background: url(./img/coxgrecolor.jpg);
    background-size: cover;
    background-position: center;
}

#newstuff .selection-title, #newstuff .selection {
    text-shadow: 2px 2px 0px #871f5c, -1px -1px 0px #006e6e, 0px 0px 4px white;
}

.selection {
    flex-basis: 40%;
}

.highlight-images {
    flex-basis: 60%;
}

.selector {
    font-family: "Paragon City";
    font-style: italic;
    color: white;
    padding: 1em;
    background: #006c76;
    border-radius: 100px;
    margin: 1em 0;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 400ms ease-in-out;
    opacity: 0.8;
    cursor: pointer;
    box-shadow: 0px 2px 5px black;
    font-size: calc(0.8em + 0.3vw);
    transform-origin: left;
}
  
.selector::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #02e2f6;
    z-index: -1;
    transform: translateY(-40%);
    border-radius: inherit;
    background: linear-gradient(0deg, rgba(207,251,255,1) 0%, rgba(2,226,246,1) 100%);
    background-size: 100% 60%;
    background-position: bottom;
    opacity: 0.5;
    box-shadow: 0px 0px 5px #0000008f;
}

.selector:hover, .selector.selected {
    opacity: 1;
    transform: scale(1.05);
}

.selector.selected {
    background: rgba(181,23,100,1);
}

.selector.selected::after {
    background: linear-gradient(0deg, rgba(255,187,220,1) 0%, rgba(181,23,100,1) 50%, rgba(245,14,127,1) 100%);
    background-size: 100% 60%;
    background-position: bottom;
}

.highlight-section {
    display: none;
}

.highlight-section.highlighted {
    display: block;
}

.highlight-images {
    padding: 10px 0 10px 5%;
    min-height: 50vh;
}

.highlight-images .image-container {
    width: 100%;
    height: 100%;
    border-radius: 25px;
    overflow: hidden;
    border: 2px outset #f50c76;
    box-shadow: 10px 10px 5px #000000a3;
}

.highlight-images .image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.highlight-images .image {
    border-radius: 22px;
    box-shadow: 0px 0px 10px inset black;
}
  
.highlight-level-scaling .image {
    background-size: auto 100%;
}

.selection-info {
    width: 100%;
    padding-top: 40px;
    color: white;
    margin-top: 5vh;
    position: relative;
    z-index: 1;
    overflow: hidden;
    font-family: "Arial", sans-serif;
    line-height: 1.25em
}

.selection-title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    font-family: "Paragon City";
    font-style: italic;
}
  
.selection-info .selection-description {
    background: linear-gradient(180deg, rgb(20, 14, 42) 0%, rgba(99, 27, 152, 0) 100%);
    min-height: 20vh;
    border-radius: 20px;
    padding: 10px 20px;
    position: relative;
}
  
.selection-info .selection-description::after, .selection-info .selection-description::before {
    content: "";
    position: absolute;
    top: -40px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    border-radius: 25px;
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(255,147,200,1) 60%, rgba(194,20,105,1) 100%);
}

.selection-info .selection-description::before {
    z-index: -1;
    border-radius: 20px;
    top: -10px;
    left: 4px;
    width: calc(100% - 8px);
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgb(20, 14, 42) 40%);
    border-top: 10px solid #c21469;
    box-shadow: 10px 0px #c21469, -10px 0px #c21466;
}

.selection-info .selection-description::after {
    height: 60%;
}

@media only screen and (max-width:550px) {
    .selection {
        margin: 0.5em 0;
        padding: 0.5em 1em;
        flex-basis: 100%;
    }

    .selector:hover, .selector.selected {
        transform: scale(1);
    }

    .selection-title {
        font-size: calc(0.7em + 0.5vw);
    }

    .selection-info .selection-description {
        font-size: calc(0.7em + 0.5vw);
        letter-spacing: 0px;
    }

    .highlight-images {
        flex-basis: 100%;
        padding: 10px;
        min-height: 40vh;
    }

}

/* PLAY SECTION */
#play .bg {
    z-index: -1;
}

#play .bg::before {
    height: 100%;
}

#play .city {
    bottom: 0;
}

#play .city::after {
    background-position: bottom right;
}

#play {
    padding-top: 10vh;
}

#play::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10vh;
    z-index: -1;
    background: linear-gradient(0deg, rgba(26,12,46,1) 0%, #000000 100%);
}
  
.play-container {
    justify-content: center;
    align-items: flex-start;
    min-height: 70vh;
}

.play-container a { /* for the URL */
    word-break: break-word;
}

.playpanel {
    flex-basis: 40%;
    flex-grow: 1;
    margin: 20px;
    padding: 20px;
    margin: 20px;
    font-family: arial;
    line-height: 1.25em;
    background: #140e2a;
    border: 6px double #0ff;
    box-shadow: 0px 0px 10px #510095 inset, 0px 0px 5px #0ff;
    text-shadow: 2px 2px 0px #871f5c, -1px -1px 0px #006e6e, 0px 0px 4px white;
}

.playpanel.about {
    width: 100%;
    flex-basis: 100%;
    text-align: center;
}

.playpanel.about p {
    margin-bottom: 10px;
}

.support {
    margin: 20px auto;
    padding: 20px;
    border: 1px solid;
    display: inline-block;
}

.playpanel li, .playpanel p {
    margin-bottom: 0.5em;
}

.playpanel > .motto {
    margin-bottom: 1em;
}
  
.playpanel form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: max-height 400ms ease-in-out, opacity 400ms ease-in-out;
    max-height: 1px;
    opacity: 0;
}

.playpanel .selector {
    transform: scale(1)
}

.playpanel form.active {
    max-height: 300px;
    opacity: 1;
}

input:not([type="submit"]) {
    background: black;
    border-radius: 5px;
    margin-bottom: 10px;
    color: white;
    border: 4px double #0ff;
    box-shadow: 0px 0px 5px #510095 inset, 0px 0px 2px #0ff;
    text-shadow: 2px 2px 0px #871f5c, -1px -1px 0px #006e6e, 0px 0px 4px white;
    padding: 5px;
}

input[type="submit"] {
    border: 4px double #ff00ab;
}

@media only screen and (max-width: 600px) {
    .playpanel {
        padding: calc(5px + 1vw);
        margin: 1vw;
    }
}


/* MEDIA */
#media.infosection::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10vh;
    z-index: -1;
    background: linear-gradient(0deg, rgba(26,12,46,0) 0%, rgba(66,10,47,1) 100%);
}

body.open-vid, body.open-img {
    overflow: hidden !important;
}

.media-display {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1a1a1aeb;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
}

.open-vid .media-display, .open-img .media-display {
    opacity: 1;
    pointer-events: initial;
}

.video-container {
    display: none;
    width: 1000px;
    max-width: 100%;
    margin: auto;
}

.open-vid .video-container {
    display: block;
}

.media-close {
    font-family: VCR OSD Mono;
    position: absolute;
    top: -2em;
    right: -2em;
    font-size: calc(1vw + 1vh);
    color: black;
    background: white;
    width: 1em;
    height: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    line-height: 1em;
    cursor: pointer;
}

.media-close::after {
    content: "x";
    line-height: 0.1em;
    margin-top: -.15em;
}

@media only screen and (max-width: 1100px) {
    .media-close {
        font-size: 2em;
        right: 2em;
    }
}

.media-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    cursor: pointer;
}

.videos, .video-listing, .highlighted-video {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.videos {
    flex-direction: column;
}

.video-listing > * {
    flex-basis: 25%;
    max-width: 40vw;
    padding: 10px;
}

.highlighted-video > * {
    width: 100%;
    padding: 10px;
}

.vid-opener {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    border: 6px double #0ff;
    box-shadow: 0px 0px 10px #510095 inset, 0px 0px 5px #0ff;
    text-shadow: 2px 2px 0px #871f5c, -1px -1px 0px #006e6e, 0px 0px 4px white;
}

.vid-opener::after {
    content: "\25BA";
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 3px 3px 0px #ff33aa7a, 0px 0px 10px #00ffff7a, 0px 0px 5px #00ffff7a;
    color: #00ffff;
    background: black;
    border-radius: 100%;
    font-size: 20px;
    width: 25px;
    height: 30px;
    padding-left: 5px;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}

.video-wrapper iframe, .video-wrapper .vid-opener {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.gallery > * {
    flex-basis: calc(20% - 20px);
    margin: 10px;
}

.image-opener {
    cursor: pointer;
    padding-top: 100%;
    background-size: cover;
    background-position: center;
}

.gallery-container {
    display: none;
    max-width: 90vw;
    margin: auto;
    max-height: 80vh;
    position: relative;
}

.open-img .gallery-container {
    display: block;
}

.gallery-image {
    cursor: zoom-in;
    object-fit: contain;
    position: relative;
    max-height: 80vh;
    display: block;
}

@media only screen and (max-width: 600px) {
    .video-listing > * {
        flex-basis: 50%;
        max-width: unset;
    }

    .gallery > * {
        flex-basis: calc(25% - 20px);
        margin: 10px;
    }
    
    #media > .width-container {
      margin: 10px;
    }
}

/* POLICIES */
#policies {
    padding-bottom: 5vh;
}

.policybox {
    flex-basis: 300px;
    flex-grow: 1;
    padding: 20px;
    margin: 20px;
    line-height: 1.25em;
    font-size: 0.8em;
    font-family: "Arial", sans-serif;
}

.policybox p {
    margin-bottom: 1em;
}

footer.infosection {
    padding-bottom: 7.5vh;
    min-height: unset;
}

.qachan {
    position: absolute;
    bottom: 2.5vh;
    left: 2.5vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.qachan img {
    max-height: 5vh;
}

.qachan > span {
    margin-left: 1em;
    font-family: VCR OSD Mono;
    font-size: calc(0.4em + 0.5vw);
    text-transform: uppercase;
}

/* SOCIALS */
#socials {
    position: absolute;
    right: 0;
    top: 0;
    padding: 2.5vh 2.5vh 2em 2em;
    font-size: calc(1em + 1vh);
    z-index: 200;
    border-bottom: 6px double #0ff;
    border-bottom-left-radius: 100%;
}
  
#socials a {
    padding: 10px;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

#socials a i {
    text-shadow: 3px 3px 0px #ff33aa, 0px 0px 10px #00ffff, 0px 0px 10px #00ffff, 0px 0px 30px #00ffff;
}

#socials a.supportlink {
    color: #ff33aa;
}

#socials a.supportlink i {
    text-shadow: 3px 3px 0px #0ff, 0px 0px 10px #f3a, 0px 0px 10px #f3a, 0px 0px 30px #f3a;    
}

#socials a::after {
    content: attr(name);
    font-family: VCR OSD Mono;
    text-transform: uppercase;
    font-size: 0.8em;
    position: absolute;
    left: 0;
    white-space: nowrap;
    transform: translateX(-100%) translateY(100%);
    padding: 10px;
    background: #1a0c2e;
    border-radius: 50px;
    transition: opacity 400ms ease-in-out;
    opacity: 0;
    pointer-events: none;
    border: 6px double;
}
  
#socials a:hover::after {
    opacity: 1;
}


/* PATCH NOTES */
.inner #patchnotes.infosection::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10vh;
    z-index: -1;
    background: linear-gradient(0deg, rgba(26,12,46,0) 0%, rgba(66,10,47,1) 100%);
}

#patchnotes.infosection {
    min-height: unset;
    padding-top: 10vh;
}

.inner #news.infosection::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10vh;
    z-index: -1;
    background: linear-gradient(0deg, rgba(26,12,46,0) 0%, rgba(66,10,47,1) 100%);
}

#news.infosection {
    min-height: unset;
    padding-top: 10vh;
}

.blogbox {
    flex-basis: 100%;
    max-width: 100%;
}

.blogbox ~ .blogbox {
    margin-top: 5vh;
}

.blogbox > * {
    padding: 20px;
    border: 2px outset #f50c76;
    background: #120008b0;
    border-radius: 10px;
    font-family: Arial;
    line-height: 1.25em;
}

.blogimg {
    width: 60px;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 600px;
    position: absolute;
    top: 0;
    left: 10px;
}

.blogimg::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 0px;
    padding-top: 100%;
    transform: translateY(-50%);
    border-radius: 100%;
    background-image: inherit;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.blogbox .blogtitle {
    display: block;
    position: relative;
    padding: 30px 30px 30px 80px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    margin-bottom: -2px;
}

.blogtitle h3 {
    font-family: "Paragon City";
    font-style: italic;
    color: white;
    font-size: calc(1em + 0.5vw);
    line-height: 1.5em;
}

.blogtitle h4 {
    font-size: calc(0.6em + 0.25vw);
    margin-top: 0.5em;
    color: #02e2f6;
    font-weight: 600;
}

/* PATCH NOTES LISTING PAGES + INDIVIDUAL PAGES */
#homelink img {
    position: absolute;
    top: 1.5vh;
    left: 1.5vh;
    max-height: 7.5vh;
    z-index: 10;
}

.inner {
    padding-bottom: calc(3.5em + 1.5vw);
}
  
.inner #socials {
    padding: 1.5vh 1.5vh 1.5em 2em;
    font-size: calc(1em + 0.5vh);
}

.innernav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    z-index: 10;
    width: 100%;
    bottom: 0;
    left: 0;
}

.innernav a {
    font-family: VCR OSD Mono;
    color: white;
    text-shadow: 1px 1px 3px #02e2f6, -1px -1px 3px #f21876;
    padding: 1em;
    font-size: calc(1em + 1vw);
    opacity: 0.5;
    transition: opacity 400ms ease-in-out;
    text-transform: uppercase;
}

.innernav a:hover, .innernav a.currentsection {
    opacity: 1;
}

@media only screen and (max-width: 600px) {
    .innernav a {
        width: 25%;
        font-size: 4vw;
        padding: 0.5em;
        text-align: center;
    }  
}

.inner .city {
    bottom: 0;
}

.inner .city::after {
    background-position: bottom right;
}

.inner .blog-container {
    padding-bottom: 5vh;
}

.raisedcity .city::after, .raisedcity .bg::after, .raisedcity .bg::before {
    height: 50vh;
    top: 0;
}

.blognav {
    max-width: 1250px;
    width: 100%;
    padding: 20px;
    margin-bottom: 5vh;
    background: linear-gradient(0deg, rgba(26,12,46,0.9) 0%, rgba(66,10,47,0.9) 100%), url(https://tspydev.eccentric.monster/img/coxgrecolor.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 25px;
    border: 6px double #0ff;
    box-shadow: 0px 0px 10px #510095 inset, 0px 0px 5px #0ff;
    font-size: 0.8em;
}

.blogbox ~ .blognav {
    margin-top: 5vh;
}

.blognav > h2 {
    font-family: "Alien Encounters";
}

.bloggroup {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.bloggroup .motto {
    padding: 0.5em 0;
}

.bloggroup a {
    display: inline-block;
    position: relative;
    padding: 0.75em 0.5em 0.75em 1.5em;
    font-size: calc(0.6em + 0.35vw);
    text-shadow: 1px 1px 3px #02e2f6, -1px -1px 3px #f21876;
    font-family: "Paragon City";
    color: white;
    text-decoration: underline;
    font-style: italic;
}

.bloggroup a::before {
    content: "•";
    position: absolute;
    left: 0.5em;
}

.bloggroup a.currentpage {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.5);
}

.bloggroup a.currentpage::after {
    text-transform: uppercase;
    content: "YOU ARE HERE";
    position: absolute;
    width: 100%;
    white-space: pre;
    text-align: center;
    color: white;
    font-family: VCR OSD Mono;
    top: 0;
    left: 0;
    pointer-events: none;
    transform: translateY(-50%);
    opacity: 0.8;
}

@media only screen and (max-width: 600px) {
    .blognav {
        margin-top: 5vh;
    }
}

/* GUIDES */
#guides {
    padding-top: 10vh;    
}

#guides > h2.motto {
    margin: 10px;
    padding: 10px;
}

.guide-container {
    flex-wrap: nowrap;
    align-items: flex-start;
    margin-top: 0;
}

.guidebox {
    width: 100%;
    background: #140e2a;
    padding: 20px;
    border-radius: 10px;
    border-top-right-radius: 0;
    border: 2px inset #0ff;
    box-shadow: 0px 0px 10px #510095 inset, 0px 0px 5px #0ff;
}

.guidebox h1.motto {
    font-size: calc(1em + 1vw);
    margin: 0 0 20px;
    padding: 0;
    text-align: left;
}

.guidebox > * {
    font-family: Arial;
    line-height: 1.25em;
}

.guidenav, .guidecategory {
    display: flex;
    flex-direction: column;
}

.guidecategory.getting-started {
    order: -1;
}

.guidenav {
    background: #140e2a;
    padding: 20px;
    border: 2px inset #0ff;
    box-shadow: 0px 0px 10px #510095 inset, 0px 0px 5px #0ff;
    border-left: 0;
    border-radius: 10px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -2px;
}

.guidecategory {
    margin-bottom: 1em;
}

.guidecategory > span {
    text-transform: uppercase;
    white-space: nowrap;
    margin-bottom: 0.25em;
    padding-bottom: 0.5em;
    position: relative;
    font-family: VCR OSD Mono;
    text-shadow: 1px 1px 3px #02e2f6, -1px -1px 3px #f21876;
}

.guidecategory > a {
    padding-left: 1em;
    padding: 0.5em 0.5em 0.5em 1em;
    border-left: 4px ridge;
    font-size: 0.8em;
}
.guidecategory > a ~ a {
    margin-top: 0.5em;
}

.guidecategory > a:hover, .guidecategory > a.selected {
    border-left-color: #ff0084;
}

.guidenav .collapsetoggle {
    display: none;
    position: absolute;
    right: 1em;
    font-size: 1.5em;
    cursor: pointer;
    color: #0ff;
    text-shadow: 3px 3px 0px #ff33aa7a, 0px 0px 10px #00ffff7a, 0px 0px 5px #00ffff7a;
}

@media only screen and (max-width: 800px) {
    .guidenav {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        order: -1;
        width: 100%;
        box-shadow: 0px 0px 10px #510095 inset, 0px 0px 5px #0ff;
        padding-right: 5em;
        margin-bottom: 1em;
        position: relative;
    }

    .guidenav .collapsetoggle {
        display: block;
    }

    .collapsed .collapsetoggle .fa-caret-square-up {
        display: none;
    }

    .guidenav:not(.collapsed) .collapsetoggle .fa-caret-square-down {
        display: none;
    }

    .guidenav.collapsed .guidecategory > span, .guidenav.collapsed .selector:not(.selected) {
        display: none;
    }
    
    .guidenav.collapsed .guidecategory {
        margin-bottom: 0;
    }
    
    .guidenav.collapsed .guidecategory > .selector.selected {
        margin: 0;
    }  
    
    .guide-container {
        flex-wrap: wrap;
    }
    
    .guidebox {
        border-top-right-radius: 20px;
    }
}

/* GUIDE-SPECIFIC STYLING */
.guidebody.gearing-up h6 {
    text-align: center;
}

.guidebody.npc-parts h6 {
    text-align: center;
}

.guidebody.npc-parts ul {
    display: inline-block;
}

.guidebody.npc-parts {
    text-align: center;
}

/* SCANLINES - from https://codepen.io/meduzen/pen/zxbwRV */
.scanlines {
    position: relative;
    overflow: hidden;
}

.scanlines:before, .scanlines:after {
    display: block;
    pointer-events: none;
    content: "";
    position: absolute;
}

.scanlines:before {
    width: 100%;
    height: 2px;
    z-index: 2147483649;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0.75;
    animation: scanline 6s linear infinite;
}
.scanlines:after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483648;
    background: linear-gradient(to bottom, transparent 50%, rgba(140, 63, 143, 0.33) 51%);
    background-size: 100% 4px;
    animation: scanlines 1s steps(60) infinite;
}

/* ANIMATE UNIQUE SCANLINE */
@keyframes scanline {
    0% {
        transform: translate3d(0, 200000%, 0);
    }
}

@keyframes scanlines {
    0% {
        background-position: 0 50%;
    }
}






/***********************************/
/* language controls */
/* spans are inline, divs are block */
/* not using display:contents cuz it's fucked up on safari */
html span[lang], html div[lang] {
    display: none;
}

html:lang(en) span[lang="en"], html:lang(fr) span[lang="fr"], html:lang(es) span[lang="es"], html:lang(jp) span[lang="jp"] {
    display: inline;
}

html:lang(en) div[lang="en"], html:lang(fr) div[lang="fr"], html:lang(es) div[lang="es"], html:lang(jp) div[lang="jp"] {
    display: block;
}

html:lang(fr) .bloggroup a.currentpage::after {
    content: "Vous êtes ici";
}

html:lang(es) .bloggroup a.currentpage::after {
    content: "Usted está aquí";
}

html:lang(jp) .bloggroup a.currentpage::after {
    content: "読書";
}

#lang {
    position: absolute;
    bottom: 0.5em;
    right: 1.5vw;
    z-index: -1;
}

#lang > select {
    border: 1px outset #f3a;
    border-radius: 10px;
    background: #0ff;
    color: #1a0c2e;
    font-size: 10px;
    display: block;
    margin: 0;
    box-shadow: 0px 0px 10px #f3a;
}

/* temporarily highlight untranslated content */
.langcontent.untranslated {
    border-bottom: 2px dotted #ff00cb;
}

html:lang(en) span[lang="en"], html:lang(fr) span[lang="fr"], html:lang(es) span[lang="es"], html:lang(jp) span[lang="jp"] {
    display: inline-block;
}

.untranslated {
    position: relative;
}

.helptranslate {
    position: absolute;
    bottom: -2.25em;
    right: -2em;
    z-index: 10;
    opacity: 0.75;
    width: auto;
}

.helptranslate:hover {
    opacity: 1;
}