/*
imports
*/
@font-face {
    font-family: "SpaceGrotesk";
    src: url("../data/SpaceGrotesk.woff2");
}



/*
globals
*/
* {
    user-select: none;
}

.content span,
.content ul * {
    user-select: text;
}

*::selection {
    background: rgb(66, 0, 128);
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar {
    width: 0.5vh;
    height: 0.5vh;
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 0.25vh;
}

*:hover::-webkit-scrollbar-thumb {
    background: navy;
}

html,
body {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    font-size: 4vh;
    font-family: "SpaceGrotesk", helvetica;
    font-weight: 300;
    background: black;
    color: whitesmoke;
    overflow: hidden;
    height: -webkit-fill-available;
    width: -webkit-fill-available;
}

a,
a:visited,
.img,
.actionButton {
    color: rgb(153, 78, 240);
    transition: 0.3s all ease;
    text-decoration: none;
    cursor: pointer;
}

a.back {
    color: white;
}

/* span:not(.img) {background: linear-gradient(90deg, #0000ff, #ff0000); background-size: 200%; background-position: left; -webkit-background-clip: text; -webkit-text-fill-color: transparent;} */



/*
background
*/
#starField {
    opacity: 0;
    animation: reveal 3s ease-in;
    animation-fill-mode: forwards;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* filter: blur(0.1vh); */
}

@keyframes reveal {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

#overlay {
    background: url('../data/chrismina.jpg') center center no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: color;
    /* animation: rotateHue 10s linear; */
}

@keyframes rotateHue {
    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(360deg);
    }
}



/*
loading
*/
.loading {
    position: absolute;
    top: 0;
    left: 0;
    height: 0.25vh;
    width: 100%;
    z-index: 999;
    background: linear-gradient(to right, transparent 90%, navy 10%);
    background-size: 200% 100%;
    animation: loading 2s infinite;
    animation-delay: -0.2s;
}

@keyframes loading {
    0% {
        background-position: 220% 0%;
    }

    100% {
        background-position: 80% 0%;
    }
}



/*
page
*/
.page {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    transition: 2s all cubic-bezier(0.25, 1, 0.5, 1);
    width: 100vw;
    height: 100vh;
    z-index: 10;
    filter: blur(0);
}

.page .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: bboy 20s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

@keyframes bboy {
    0% {
        transform: translate(-50%, -50%) scale(1) rotate(0);
    }

    20% {
        transform: translate(-50%, -50%) scale(1.1) rotate(1.3deg);
    }

    50% {
        transform: translate(-50%, -50%) scale(0.95) rotate(-1.5deg);
    }

    71% {
        transform: translate(-50%, -50%) scale(1.15) rotate(1deg);
    }

    100% {
        transform: translate(-50%, -50%) scale(1) rotate(0);
    }
}

.hop {
    animation: hop 1.5s ease-out;
}

@keyframes hop {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translate(-50%, -50%) scale(10);
        opacity: 0;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.sto6,
a:hover,
.img:hover,
input[type="submit"]:hover,
.actionButton:hover {
    color: white;
    text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa;
    animation: flicker 2s linear infinite;
}

@keyframes flicker {
    0% {
        filter: brightness(1);
    }

    20% {
        filter: brightness(1);
    }

    21% {
        filter: brightness(0.7);
    }

    22% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1);
    }

    51% {
        filter: brightness(0.6);
    }

    54% {
        filter: brightness(1);
    }

    80% {
        filter: brightness(0.9);
    }

    82% {
        filter: brightness(2);
    }

    85% {
        filter: brightness(0.9);
    }

    89% {
        filter: brightness(1);
    }

    100% {
        filter: brightness(1);
    }
}

.sto66 {
    animation: neon 5s ease infinite;
}

@keyframes neon {
    0% {
        filter: hue-rotate(-130deg) blur(0) brightness(1);
    }

    20% {
        filter: hue-rotate(-150deg) blur(0.1vh) brightness(1);
    }

    22% {
        filter: hue-rotate(-115deg) blur(0) brightness(0.8);
    }

    50% {
        filter: hue-rotate(-50deg) blur(0.05vh) brightness(1);
    }

    80% {
        filter: hue-rotate(-70deg) blur(0) brightness(1.3);
    }

    85% {
        filter: hue-rotate(-115deg) blur(0.1vh) brightness(0.9);
    }

    88% {
        filter: hue-rotate(-112deg) blur(0vh) brightness(1);
    }

    100% {
        filter: hue-rotate(-130deg) blur(0) brightness(1);
    }
}

.list {
    max-height: 50vh;
    overflow-y: auto;
    padding-right: 2vh;
}

.list>div>div {
    display: inline-block;
    width: 6vh;
    transition: 0.3s ease-in-out;
    transform: scale(0.9);
}

.list>div:hover>div {
    transform: scale(1.2);
}



/*
galery
*/
#galery,
#galerySpace {
    height: 50vh;
    margin-top: 5vh;
}

#galery {
    overflow-x: auto;
    white-space: nowrap;
    width: 80vw;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    vertical-align: middle;
}

#galery img {
    height: 45vh;
    margin-left: 15vh;
}

#galery img:first-child {
    margin-left: 0;
}

#galery.thumbs {
    overflow-x: hidden;
    overflow-y: auto;
    white-space: default;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}

#galery.thumbs img {
    max-height: 17.5vh;
    margin-left: 3vh;
    margin-bottom: 3vh;
}

#toggleGalery.thumbs span:first-child {
    display: none;
}

#toggleGalery.thumbs span:last-child {
    display: inline-block;
}

#toggleGalery span:last-child {
    display: none;
}



/*
redka
*/
#redka {
    width: 100%;
    padding-top: 66%;
    background: url('/data/redka/rotate.jpg') center center;
    background-size: cover;
}

#redList {
    font-size: 0.4rem;
    max-height: 19vh;
    overflow-y: auto;
}



/*
page transforms
*/
.oldPage {
    transform: translate(-50%, -50%) scale(10);
    opacity: 0;
    filter: blur(1vh);
}

.newPage {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    filter: blur(1vh);
}



/*
imgs
*/
/*
img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 0vw; max-height: 0vh; opacity: 0; filter: blur(1vh); transition: 0.5s ease all; z-index: 100; animation: bboy 20s ease-in-out infinite;}
    img.on {max-width: 80vw; max-height: 80vh; opacity: 1; filter: blur(0);}
*/



/*
login
*/
#key {
    position: absolute;
    bottom: 1vh;
    right: 1vh;
    opacity: 0;
    transition: 0.5s ease;
    z-index: 99;
}

#key:hover {
    opacity: 1;
}



/*
admin
*/
input {
    font-size: 3vh;
    font-family: "SpaceGrotesk", helvetica;
    text-align: center;
    width: 40vh;
    border-radius: 5vh;
    border: 0;
    outline: 0;
    padding: 1vh 2vh;
    box-sizing: border-box;
    margin-bottom: 1vh;
}

input[type="submit"] {
    background: linear-gradient(0deg, #5b34eb 0%, #5576ed 100%);
    color: white;
    cursor: pointer;
}

#event,
#images {
    display: none;
}


/*
mobile adjustments
*/
@media (max-aspect-ratio: 1/1) {

    html,
    body {
        font-size: 3vh;
        /* color: rgb(67, 123, 255); */
    }

    .content {
        width: max-content;
        max-width: 90vw;
    }

    .page .content,
    img {
        animation: none;
    }

    .oldPage,
    .newPage {
        filter: blur(0);
    }

    .list {
        max-height: 70vh;
        width: 90vw;
    }

    #galery.thumbs img {
        width: 73vw;
        height: auto;
        max-height: none;
    }

}



/*
iOS adjustments
*/
@media (pointer:none),
(pointer:coarse) {

    /* #overlay, #starField {display: none;} */
    #overlay {
        background: none;
    }
}

@supports (-webkit-touch-callout: none) {

    /* #overlay {display: none;} */
    #overlay {
        background: none;
    }
}