/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/* POCL ZONE */
/* BY DA FIEND @ CORRU.WORKS */

/* EXTERNAL/REUSABLE CSS ELEMENT - just a span inside a div that gets duplicated in js */
@import url(/marquee.css);

/* 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*/

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

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;
}

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;
}

::selection {
    color: var(--ui-color);
    background-color:#00FFCD;
  }

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(95deg);
}

/* 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;
}

/* 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(https://citydawntown.neocities.org/PalBG.png);
    background-size: cover;
    background-color: black;
    overflow-y: hidden !important;
    padding-bottom: 0;
}

#home main:before {
    content: "";
    background-image: url(https://citydawntown.neocities.org/PalBG.png);
    background-size: cover;
    animation: WATCH 120s linear infinite;
    position: fixed;
    left: -50%;
    top: -100%;
    height: 300%;
    width: 300%;
    opacity: 1;
    z-index: -10;
    cursor: unset;
}

#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;
}

/* VISITANT INDEX */
.triangle {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    color: white;
    width: 75vmin;
    height: 75vmin;
    line-height: normal;
    font-family: Arial, Helvetica, sans-serif;
}

/* .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;
}

.accesstier {
    border-style: dashed;
    border-width: thin;
    color: var(--fullaccess-color);
    padding: 20px;
    margin: 20px;
}

#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;
    border-radius: 20px;
}

.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: 0s, 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;
}

    /* 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-drifty.gif);
    background-color: black;
}

#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 {
    filter: invert();
    border: 2px solid #ff0032;
    border-radius: 30px;
    animation-name: shake;
    animation-duration: 100ms;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.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(https://citydawntown.neocities.org/PalBG.png);
}

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

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

/* about page by pocl */
#about {
    background-color: #000000;
    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;
}

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

#about .goop {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 75vmin;
    height: 75vmin;
    border-radius: 100%;
    background: black;
    background-position: center;
    background-image: url(https://pocl.vip/img/aboutgoop.gif);
    background-repeat: no-repeat;
    background-size:contain;
    z-index: 1;
}