/* POCL ZONE */
/* BY DA FIEND @ CORRU.WORKS */

/* skip over this block, these are base settings */
*{-ms-interpolation-mode:nearest-neighbor;image-rendering:-webkit-optimize-contrast;image-rendering:-moz-crisp-edges;image-rendering:-o-pixelated;image-rendering:pixelated;box-sizing:border-box}.gallery img,.images img{image-rendering:initial}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,html{overflow-x:hidden!important}body{line-height:1;font-size:calc(.6rem + .2vw + .5vh);letter-spacing:1px}a{text-decoration:none;color:inherit}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}a:active,a:focus{outline: 0;border: none;outline-style: none;}
/* end css reset*/

/* font @import from fonts.google.com >:) */
@font-face {
    font-family: 'IM Fell DW Pica';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/imfelldwpica/v12/2sDGZGRQotv9nbn2qSl0TxXVYNwNYwnV.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* variables */
/* this determines the default color of links within the page */
:root {
    --accent-color: white;
    --ui-color: #ff002d;
    --enter-scale: 150%;
}

main a {
    color: var(--accent-color);
}

/* general styling */
body {
    min-height: 100vh;
    background: black;
    color: white;
    font-family: 'IM Fell DW Pica', serif;
    text-shadow: 1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black, -1px 1px 0 black;
    padding-bottom: 20vmin;
    cursor: url("/img/poclcursor.png"), auto;
}

p {
    text-align: center;
    margin: 10px auto;
}

h2 {
    width: 100%;
    text-align: center;
    margin: 2vh 10px;
    font-size: calc(1.5em + 2vmin);
}

img {
    max-width: 100%;
}

.divider {
    display: block;
    margin: 20px auto;
}

a {
  cursor: url("/img/poclclick.png"), default;
}

main, nav {
    opacity: 0;
    pointer-events: none;
    transition: 1s cubic-bezier(.72,.01,.3,.99);
}

header a, nav {
    z-index: 10;
    mix-blend-mode: exclusion;
}

main a:hover {
    color: var(--ui-color);
}

header a:hover img, nav a:hover img {
    filter: sepia(1) saturate(20) invert(1) hue-rotate(100deg);
}

/* transition settings */
main.transition-fade {
    opacity: 1;
    transition: 1s cubic-bezier(.72,.01,.3,.99);
}

html.is-animating body, body.loading {
    overflow: hidden !important
}

html.is-animating .transition-fade {
    opacity: 0;
}

.loaded main, .loaded nav {
    opacity: 1;
    pointer-events: initial;
}

/* logo & name link */
header a {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 2.5vmin;
    left: 2.5vmin;
    transform: translate(0%, 0%);
    z-index: 20;
    transition: transform 2s cubic-bezier(.72,.01,.3,.99), bottom 2s cubic-bezier(.72,.01,.3,.99), left 2s cubic-bezier(.72,.01,.3,.99);
}

#logoanim {
    position: relative;
    display: block;
}

#logoanim img {
    position: absolute;
    left: 0;
    top: 0;
    width: 15vmin;
    opacity: 1;
    transition: transform 2s cubic-bezier(.42,.01,.35,1.29), opacity 2s cubic-bezier(.42,.01,.35,1.29);
}

#logoanim img:first-child {
    opacity: 0;
    position: relative;
}

#name {
    position: absolute;
    opacity: 0;
    transition: all 2s cubic-bezier(.72,.01,.3,.99);
    font-size: 7vmin;
}

#name::after {
  content: "[ENTER]";
  position: absolute;
  left: 50%;
  top: 50%;
  transition: all 1s cubic-bezier(.72,.01,.3,.99);
  transform: translate(-50%, 0);
  opacity: 0;
  font-size: 0.5em;
}

.loading header a {
    pointer-events: none;
}

/* intro anim */
.intro-1 {
    cursor: pointer;
}

.intro-0 header a, .intro-1 header a, .intro-2 header a {
    pointer-events: none;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
}

.intro-1 #name::after {
    transform: translate(-50%, 200%);
    opacity: 1;
}

.intro-1 #name {
  transform: translateY(-50%);
}

.intro-1 #logoanim img:nth-child(2) {
    transform: translateX(calc(-1 * var(--enter-scale))) rotate(-90deg);
}

.intro-1 #logoanim img:nth-child(3) {
    transform: translateX(var(--enter-scale)) rotate(90deg);
}

.intro-1 #logoanim img:nth-child(4) {
    transform: translateY(calc(-1 * var(--enter-scale)))  rotate(0deg);
}

.intro-1 #logoanim img:nth-child(5) {
    transform: translateY(var(--enter-scale)) rotate(180deg);
}

.intro-1 #name, .intro-2 #name, .intro-d #name {
    opacity: 1;
}

.intro-2 #name, .intro-d #name {
    transform: translateX(90%);
}

.intro-d #logoanim img:nth-child(n+1) {
    opacity: 0;
}

.intro-d #logoanim img:first-child {
    opacity: 1;
}

body[class^="intro"]:not(.intro-d) {
    overflow: hidden;
}

body[class^="intro"]:not(.intro-d) main, body[class^="intro"]:not(.intro-d) nav {
    opacity: 0;
    pointer-events: none;
}

/* nav */
nav {
    display: flex;
    position: fixed;
    justify-content: center;
    align-items: center;
    bottom: 2.5vmin;
    right: 2.5vmin;
    width: 50vmin;
    transition: all 1s ease-in-out;
}

nav a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 25%;
    padding: 1vmin;
    transition: transform 1s ease-in-out;
}

nav a:hover {
    transform: rotate(20deg);
}

nav a span {
    font-size: 2vmin;
    animation: FLOAT-Y 10s infinite alternate;
    transition: 1s ease-in-out;
}

nav a img {
    animation: FLOAT-X 10s infinite alternate;
}

nav a:nth-child(1) span, nav a:nth-child(1) span img {
    animation-delay: -3s;
}

nav a:nth-child(2) span, nav a:nth-child(2) span img {
    animation-delay: -6s;
}

nav a:nth-child(3) span, nav a:nth-child(3) span img {
    animation-delay: -9s;
}

nav a:nth-child(4) span, nav an:nth-child(4) span img {
    animation-delay: -12s;
}

@keyframes FLOAT-Y {
    0% { transform: translateY(-10%) rotate(-2deg)}
    100% { transform: translateY(10%) rotate(2deg)}
}

@keyframes FLOAT-X {
    0% { transform: translateX(-5%)}
    100% { transform: translateX(5%)}
}

/* homepage */
#home {
    background: url(/img/bg-red.gif);
    background-color: #2d0007;
    overflow-y: hidden !important;
    padding-bottom: 0;
}

#home:not(.loading) nav {
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
    width: 80vw;
}

#home:not(.loading) nav a span {
    font-size: 3vmin;
    z-index: 2;
}

#home canvas {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
}

    /* mobile styling for home */
@media only screen and (max-width: 600px) {
    #home nav a {
        width: 50%;
    }

    #home nav {
        flex-wrap: wrap;
    }
}

/* art page */
#art {
    background: url(/img/bg-psycho.gif);
    background-color: #1a1920;
}

#art main {
    min-height: 80vh;
	padding-top: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.gallery-nav {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
    justify-content: center;
	width: 100%;
    padding: 2vmin;
}

.gallery-nav.in-gallery {
    flex-wrap: nowrap;    
}

.gallery-option {
    padding: 10px;
    flex-basis: 33%;
    flex-shrink: 1;
    position: relative;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.gallery-option:first-child {
    display: none;
}

.in-gallery .gallery-option {
    max-width: 150px;
}

.in-gallery .gallery-option:first-child {
    display: flex;
}

@media only screen and (max-width: 600px) {
    .gallery-option {
        flex-basis: 50%;
    }

    .in-gallery .gallery-option {
        flex-basis: 25%;
    }
}

@media only screen and (max-width: 425px) {
    .gallery-option {
        flex-basis: 100%;
    }
}

.option-image {
	position: relative;
	padding-top: 100%;
    width: 100%;
	transition: all 1s ease-out;
	background-size: cover;
	background-position: center;				
}

.gallery-option span ~ span {
    margin-top: 10px;
    text-align: center;
	width: 100%;
    font-size: 0.8em;
}

.in-gallery .gallery-option .option-title, .in-gallery .gallery-option .option-description {
    display: none;
}

.gallery-option .option-title {
    font-size: 1.4em;
}
.gallery-option.selected {
    border: 5px solid white;
    animation-name: shake-crazy;
    animation-duration: 100ms;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/* from https://elrumordelaluz.github.io/csshake/ */
@keyframes shake-crazy {
 10% {
  transform:translate(15px, 4px) rotate(2deg);
  opacity:.3
 }
 20% {
  transform:translate(-18px, -15px) rotate(9deg);
  opacity:.94
 }
 30% {
  transform:translate(0px, -1px) rotate(5deg);
  opacity:.68
 }
 40% {
  transform:translate(-8px, 11px) rotate(-2deg);
  opacity:.68
 }
 50% {
  transform:translate(1px, 5px) rotate(-3deg);
  opacity:.3
 }
 60% {
  transform:translate(-7px, -9px) rotate(3deg);
  opacity:.8
 }
 70% {
  transform:translate(-2px, 1px) rotate(5deg);
  opacity:.66
 }
 80% {
  transform:translate(13px, -13px) rotate(-5deg);
  opacity:.38
 }
 90% {
  transform:translate(-2px, -10px) rotate(9deg);
  opacity:.64
 }
 0%,
 100% {
  transform:translate(0, 0) rotate(0)
 }
}


.gallery {
    display: none;
    flex-wrap: wrap;
    max-width: 1300px;
    margin: auto;
    justify-content: space-around;
    align-items: stretch;
}

.gallery.selected-gallery {
    display: block;
    columns: 2;
	padding-top: calc(3em + 2vmin);
	position: relative;
}

.gallery h2 {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
}

.gallery a {
    padding: 1vw;
    display: block;
	text-align: center;
	padding-bottom: 2em;
	break-inside: avoid;
}

.gallery span {
    margin: 10px 0;
}

/* links page */
#links {
    background: url(/img/bg-tilefast.gif);
    background-color: #323232;
}

.linklist {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 80vh;
}

.linklist a {
    font-size: 8vmin;
    padding: 0.5em 0;
    position: relative;
}

.linklist a:not(.linklist a:last-child)::after {
    content: "";
    position: absolute;
    bottom: 0;
    height: 0.5em;
    width: 100%;
    background-image: url(/img/divider.gif);
    background-repeat: no-repeat;
    background-position: center;
    left: 0;
    transform: translateY(50%);
}

.linktable {
    padding-top: 60px;
    display: flex;
    column-gap: 20px;
    justify-content: center;
    align-items: center;
    text-shadow: 1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black, -1px 1px 0 black, -2px 2px 0 black;
}

.linkrecs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 400px;
    margin: 1em auto;
    padding: 2vmin;
    border: 1px solid;
    font-size: 1.5em;
    line-height: 1.25em;
    background: url(/img/bg-drifty.gif);
}

/* pests page */
#pests {
    background: url(/img/bg-drifty.gif);
    background-color: #323232;
}

.pestlist {
    text-align: center;
    width: 100%;
}

/* about page by pocl IDK WHAT IM DOING */
#about {
    background: url(https://pocl.neocities.org/img/aboutgoop.gif);
    background-position: center;
    background-repeat: no-repeat;
    background-color: #000000;
    background-size: contain;
    min-height: 80vh;
    padding-top: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-shadow: 1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black, -1px 1px 0 black, -2px 2px 0 black;
    --accent-color: #00FFCD;
}

.aboutbody {
    text-align: center;
    width: 100%;
    mix-blend-mode: difference;
}

/* commissions page */
#commissions {
    background: linear-gradient(0deg, rgba(0,0,0,0.7903362028405112) 30%, rgba(0,8,8,0.75672275746236) 100%), url(/img/bg-drifty.gif);
    background-color: #323232;
    --accent-color: #FF0032;
}

.commissions {
    max-width: 800px;
    margin: auto;
}

.commissions .status, .commissions .contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.commissions .contact {
    max-width: 600px;
    margin: 1em auto;
    padding: 2vmin;
    border: 1px solid;
    font-size: 1.5em;
    line-height: 1.25em;
}

#statuscheck {
    padding: 1em;
    margin: 0.5em;
    border: 1px solid;
}

#statuscheck.closed {
    background: url(/img/bg-red.gif);
    background-color: #2d0007;
    color: #FF0032;
}

#statuscheck.open {
    background: url(/img/bg-psycho.gif);
    background-color: #1a1920;
    color: lime;
}

.status {
    font-size: calc(1em + 2vmin);
    margin: 2em 0;
}
  
/* VOLUME SLIDER */
.fa-volume-off {
	color: white;
	font-size: 1.5em;
    cursor: pointer;
}

#volume-menu {
    position: fixed;
    top: 2.5vmin;
    left: 2.5vmin;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
	transition: opacity 1s cubic-bezier(.33,.63,.14,.99);
	transform-origin: left center;
    opacity: 0.4;
}

#volume-menu:hover {
    opacity: 1;
}

#volume-menu input {
	-webkit-appearance: none;
	width: 150px;
	height: 5px;
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--ui-color) 100%);
	border-left: 2px solid white;
	outline: none;
	padding: 10px 0;
	border-radius: 50px;
}

#volume-menu input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 10px;
	height: 10px;
	transform: rotate(45deg);
	border-radius: 100%;
	border: 2px solid white;
	background: black;
}

#volume-menu input::-moz-range-thumb {
	width: 10px;
	height: 10px;
	transform: rotate(45deg);
	border-radius: 100%;
	border: 2px solid white;
	background: black;
}

/* DEV CREDIT PAGE */
#credit-link {
    position: fixed;
    top: calc(2.5vmin + 10px);
    right: 2.5vmin;
    color: #ae00ff;
    mix-blend-mode: exclusion;
    font-size: calc(20px + 1vw);
    animation: funnyzone 2s ease-in-out infinite alternate;
    transform-origin: center;
}

#credit-link i {
    display: inline-block;
    width: calc(20px + 2vw);
    height: calc(20px + 2vw);
    background-image: url(/img/daveend.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#credit-link:hover {
    opacity: 1;
}

#credit-link:hover i {
    animation: shake-crazy 100ms ease-in-out infinite;
    background-image: url(/img/daveendhover.png);
}

@keyframes funnyzone {
    0% { transform: rotate(-10deg) translateY(0) }
    50% { transform: rotate(0deg) translateY(-10px) }
    100% { transform: rotate(10deg) translateY(0)}
}

#dev {
    background: url(/img/static.gif);
    background-color: gainsboro;
    overflow-y: hidden !important;
    padding-bottom: 0;
}

#dev:after, #dev:before {
    content: "";
    background-image: url(/img/corruspeckles.png);
    background-size: 100vw;
    animation: DUST 42s ease-in-out infinite;
    position: fixed;
    top: -50%;
    left: -50%;
    height: 200vh;
    width: 200vw;
    opacity: .8;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0);
    pointer-events: none;
    mix-blend-mode: darken;
}

#dev:before {
    animation: DUST2 24s ease-in-out infinite reverse;
    animation-delay: -14s;
}


@keyframes WATCH {
    0% { transform: translateY(0%) }
    100% { transform: translateY(-100vh) }
}

@keyframes DUST {
    0% {
        transform: translate(-20%, 0);
        opacity: 0
    }
    5% {
        transform: translate(-20%, -5vw);
        opacity: 1
    }
    50% {
        transform: translate(20%, -50vw);
        opacity: 1
    }
    95% {
        transform: translate(20%, -95vw);
        opacity: 1
    }
    100% {
        transform: translate(-20%, -100vw);
        opacity: 0
    }
}

@keyframes DUST2 {
    0% {
        transform: translate(-20%, 0) rotateY(180deg);
        opacity: 0
    }
    5% {
        transform: translate(-20%, -5vw) rotateY(180deg);
        opacity: 1
    }
    50% {
        transform: translate(20%, -50vw) rotateY(180deg);
        opacity: 1
    }
    95% {
        transform: translate(20%, -95vw) rotateY(180deg);
        opacity: 1
    }
    100% {
        transform: translate(-20%, -100vw) rotateY(180deg);
        opacity: 0
    }
}

#dev canvas {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
}

#dev main {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#dev main:before {
    content: "";
    background-image: url(/img/static.gif);
    animation: WATCH 120s linear infinite;
    position: fixed;
    left: -50%;
    top: -100%;
    height: 300%;
    width: 300%;
    opacity: 1;
    z-index: -10;
    cursor: unset;
}

#dev main > a {
    font-family: "Libre Barcode 128 Text";
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 75vmin;
    height: 75vmin;
    font-size: 8vmin;
    border-radius: 100%;
    background: black;
    color: white;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

#dev main > a .bg {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(/img/corruspeckles.png);
    opacity: 0;
    z-index: -1;
    transition: transform 10s ease-in-out;
    background-position: center;
    animation: SPHERE 20s ease-in-out infinite alternate;
}

@keyframes SPHERE {
    0% { opacity: 0; transform: rotate(0deg) }
    100% { opacity: 0.7; transform: rotate(360deg)}
}

/* lobster page */
#lobster {
    background-color: white;
    background-image: url(/lobster/lob6.gif);
    overflow: hidden;
}

#lobster main {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    flex-wrap: wrap;
}

#lobster main > img {
    transform: scale(3);
    animation: FLOAT-Y 100ms ease-in-out infinite alternate;
    min-width: 25vw;
}

.lobster-drop-x {
    position: fixed;
    display: block;
    animation: lobdrop-x 5s linear;
}

.lobster-drop-y {
    display: block;
    animation: lobdrop-y 5s ease-in-out;
    width: 200px;
}

#lobster h2 {
    font-size: 10vw;
    color: #FF0032;
}

@keyframes lobdrop-x {
    0% { transform: translatex(0vw)}
    100% { transform: translatex(40vw)}
}

@keyframes lobdrop-y {
    0% { transform: translateY(0%)}
    20% { transform: translateY(-20vh)}
    100% { transform: translateY(120vh)}
}

/* MARQUEE ELEMENT - just a span inside a div that gets duplicated in js */
.marquee {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    --marquee_speed: 5s;
}

.marquee > span {
    padding-right: 0.5em;
    animation: MARQ var(--marquee_speed) linear infinite;
    display: inline-block;
    white-space: nowrap;
    position: absolute;
    pointer-events: none;
    left: 0;
}

.marquee > span ~ span ~ span {
    position: absolute;
    width: 100%;
    left: 100%;
    top: 0;
}


.marquee > span:first-child {
    position: relative;
    animation: unset;
    opacity: 0;
    pointer-events: initial;
}  

@keyframes MARQ {
    0% {transform: translateX(0)}
    100% {transform: translateX(-100%)}
}

/* DEFINITION BOX */
#definition-box {
    position: fixed;
    top: 0;
    left: 0;
    max-width: 70vw;
    z-index: 30;
    transform: 
        translate(
            calc(  (var(--x) * 1px)   +   ((var(--xFlip) * (100% + 2em)) + 1em)  ), 
            calc(  (var(--y) * 1px)   +   ((var(--yFlip) * (100% + 2em)) + 1em)  )
        );
    pointer-events: none;
    transition: transform 200ms linear, opacity 1s ease-in-out;
    background: black;
    color: white;
    padding: 10px;
    font-size: 16px;
    border: 1px dashed;
}

#definition-box:not(.active) {
    opacity: 0;
}

[definition] {
    display: inline-block;
    border-bottom: 1px dashed;
    padding-bottom: 2px;
    cursor: alias;
}

/* THE VISITANT EXPANSION: body[id^="visitant"] */
    /* this arcane rule targets the body when its id starts with "visitant" - meaning any page in the visitant subdirectory, since page names are turned into body IDs on pageload (in pocl.js) */
body[id^="visitant"] { /* general section overrides */
    font-family: sans-serif;
    --accent-color: rgb(90, 90, 90);    
    --enter-scale: 55vmin;
    height: 100vh;
    overflow: hidden;
    padding-bottom: 0;
    text-shadow: unset;
}

body[id="visitant"] { /* basic page overrides - only the "index" */
    background: white;
    color: black;
    --ui-color: black;
}

    /* removes the inversion effect for better color control */
body[id^="visitant"] header a { 
    mix-blend-mode: initial;
    transform: scale(0.5);
    transform-origin: bottom left;
}
body[id^="visitant"] header a img { filter: invert(1) }
body[id^="visitant"] header a:hover img { filter: invert(0.25) }
body[id="visitant"] #volume-toggle { color: black }

    /* we hide the regular name and nav on these pages */
body[id^="visitant"].intro-d #name, body[id^="visitant"].intro-2 #name, body[id^="visitant"] nav {
    transform: translateX(75%);
    opacity: 0;
    pointer-events: none;
}

    /* but it's still visible when you directly connect, so we size it correctly */
body[id^="visitant"] #name {
    white-space: nowrap;
    font-size: 10vmin;
    transform: translateY(12.5%);
}

    /* credit link is way smaller to reduce impact on the page */
body[id^="visitant"] #credit-link i, body[id^="visitant"] #credit-link {
    width: 1vw;
    height: 1vw;
    top: 0.5vw;
    right: 0.5vw;
}

    /* this turns main into a full-page non-scrolling container that positions everything at its very center */
body[id^="visitant"] main {
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transform-style: preserve-3d;
    perspective: 800px;
}

/* VISITANT INDEX */
.triangle {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    color: white;
    width: 75vmin;
    height: 75vmin;
}

.triangle::before {
    content: "";
    position: absolute;
    width: 140vmin;
    border-top: 0.5vmin solid white;
    top: 1.5vmin;
}

.triangle::after {
    content: "";
    border-left: 75vmin solid transparent;
    border-right: 75vmin solid transparent;
    border-top: 75vmin solid BLACK;
    position: absolute;
    z-index: -1;
}

.triangle > h1 {
    max-width: 75vmin;
    text-align: center;
    font-size: 3vmin;
    margin-bottom: 2.5vmin;
    letter-spacing: 0.2em;   
}

.triangle > .marquee {
    margin-bottom: 2.5vmin;
    max-width: 75vmin;
}

#visiform {
    margin-bottom: 20vmin;
}

#visiform > input[type="text"] {
    border: 0;
    padding: 1vmin;
    text-align: center;
}

#visiform > input[type="submit"] {
    border: 0;
    padding: 1vmin;
    background: white;
    cursor: pointer;
}

/* char page stuff */
#visimenu, #visimenu .visioption, #visimenu .visioption > span {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transform-style: preserve-3d;
    transform-origin: center;
}

#visimenu .visioption {
    width: 10em;
    height: 10em;
    --offset: -175%;
    transform: 
        /* this is saying, rotate this option by 360 divided by the total count of options, TIMES the number this is. so if there were 2, the first would be 180, the second would be 360 */
        /* the counts are set in the javascript for the character page */
        rotate(calc( (360deg / var(--count)) * var(--thiscount) )) 
        translateY(var(--offset)); 
}

@media only screen and (max-width: 900px) {
    #visimenu .visioption {
        --offset: -100%
    }
}

#visimenu .visioption > span {
    width: 100%;
    height: 100%;
    padding: 0.5em;
    background-color: white;
    backface-visibility: hidden;
    cursor: pointer;
    text-decoration: unset;
    border: unset;
}

.zoomin .visioption > span {
    transform: rotateX(-90deg);
}

#visislide, #visimenu, #visimenu .visioption > span {
    transition: transform 4s ease-in-out, opacity 2s ease-in-out;
}

#visislide {
    max-width: 100%;
    width: 1200px;
    height: 100vh;
    display: block;
    padding: 2%;
    position: relative;
    overflow: visible !important;
    opacity: 0;
}

.zoomin #visislide {
    opacity: 1;
}

.visipanel {
    position: absolute;
    width: auto;
    height: calc(100% - 4%);
    padding: 1vw;
    border-radius: 10px;
    overflow: hidden;
}

.visicontent::after {
    content: "scroll test";
    height: 150vh;
    display: block;
    color: black;
}

.visicontent {
    transition: all 400ms ease-in-out;
    border: 1px solid;
    filter: invert(1);
    padding: 2vw;
    width: 100%;
    max-width: 1200px;
    height: 100%;
    background: white;
    border-radius: 10px;
    overflow-y: auto;
}

.visipanel:not(.swiper-slide-active) .visicontent {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.visipanel:not(.swiper-slide-active) .visicontent::-webkit-scrollbar {
    display: none;
}

.visipanel.swiper-slide-active .visicontent, .visipanel.swiper-slide-duplicate-active .visicontent {
    filter: invert(0);
    border-color: transparent;
}

.zoomin #visimenu {
    transform: translateZ(50em) rotateX(90deg) rotate(calc( -1 * (360deg / var(--count)) * var(--scrolledto) ));
}

.menuswap.zoomin .visioption > span, main:not(.menuswap) #visislide { opacity: 0; pointer-events: none; }
.menuswap #visislide, main:not(.menuswap).zoomin .visioption > span { opacity: 1; pointer-events: initial; }
.menuswap.zoomin #visimenu { transition-duration: 0, 4s; }

@media only screen and (max-width: 1200px) {
    #visislide {
        padding: 10%;
    }
}

.goback {
    display: none;
}

.zoomin .goback {
    position: absolute;
    display: block;
    color: white;
    z-index: 10;
    background: black;
    border: 1px solid;
    padding: 0.5em;
    cursor: pointer;
    bottom: 2.5vmin;
    right: 2.5vmin;
}
    
/* visitant char page - 453286 */
body[id="visitant453286"] {
    color: black;
    background: black;
    --ui-color: white;
}

body[id="visitant453286"] #name {
    color: white;
}

    /* basic color adjustments */
body[id^="visitant453286"] header a img { filter: invert(0) }