* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    max-width: 100vw;
    font-family: "Pixelify Sans", sans-serif;
    /* font-family: "Exo 2", sans-serif; */
    font-optical-sizing: auto;
    /* font-weight: <weight>; */
    font-style: normal;
    color: white;
    scrollbar-width: thin;
    scrollbar-color: #ffffff38 rgba(0, 0, 0, 0);
}

*::selection{
    background-color: #ffffff;
    color: rgb(0, 0, 0);
    text-decoration: red wavy underline;
}

html {
    overflow-x: hidden;
}

:root {
    --dark: #070707;
    --sizeindex: calc(1vw + 1vh);
    --transition: ease 1s;
}

i {
    opacity: 0.5;
}
h1 {
    margin-left: 5%;
}
a{
    color: rgb(213, 205, 255);
    text-decoration: none;
}
a:hover{
    transition: ease-in-out 0.5s;
    color: rgb(135, 131, 255);
}
p {
    margin-bottom: 30px;
    overflow-wrap: anywhere;
}

body {
    scrollbar-gutter:initial;
    overflow: hidden;
    line-height: var(--sizeindex)*1.5;
    background-color: black;
    width: 100vw;
    font-size: calc(var(--sizeindex)*1.5);
    min-height: 100vh;
    z-index: -1000;
    position: relative;
}

.three-d {
    
    transform-style: preserve-3d;
}
#AHDPEEEWiki{
    mix-blend-mode:difference;
    width: 90vw; height: 15vw;
    margin-left: 5%;
    top: 43.2vh;
    pointer-events: none;
    position: absolute;
    
    z-index: 100;
}

#ui {
    margin-top: calc(43.2vh + 15vw + 0.5em);
    width: 90vw;
    margin-left: 5%;
    image-rendering: pixelated;
}

.bi {
    height: 4vh;
}

#status{
    /* transform: rotate(15deg); */
    width: 100vw; height: auto;
    top: 3vh; right: 1vw; position: absolute;
    text-wrap: anywhere;
    text-align: center;
}

.arrows {
    width: 95%; top: 50vh;
    left: 95%;
    position: fixed;
    transform: translate(-100%,-50%);
    z-index: 100;
    image-rendering: pixelated;
    pointer-events:none;
    opacity: 0.7;
}

.swipe3d {
    display: grid;
    width: 90%;
    margin: 0 5% 0 5%;  
}
.noteblock {
    /* display: grid; */
    background: linear-gradient(#2a2a2a, #2a2a2a5c);
    padding: 5%;
    grid-area: 1/1;
    opacity: 0;
    transition: var(--transition);
    width: 100%;
    position: relative;
    overflow: hidden;
    perspective: 1000px;
    perspective-origin:50% 50% ;
    overflow: visible;
}

.noteblock .block {
    position: absolute;    text-align: center;    left: 50%;    top: 50%;    transform: translate(-50%, -50%);
    transition: var(--transition);
    transform: translate(-50%, -50%);
    width: 90%;
}

.noteblock #faketext{
    min-height: auto;    left: 50%;    top: 25vh;
    margin: 0, 25%, 0, 25%;
    text-align: center;
    pointer-events: none;
    opacity: 0.0;
    overflow-wrap: anywhere;
}


#perspective{
    perspective: 1500px; 
    margin: auto;
    width: 90%;
    height: 30vh;
}

.bottom {
    font-size: xx-large;
    text-align: center;
    text-wrap: words;
    width: 100%;
    margin: auto;

    background: linear-gradient(#2a2a2a5c, #000000a7);
    
/* 
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 1) 70%);;
    background-size: 100% 200%;
    background-clip:content-box;
    -webkit-background-clip: text;
    color: transparent;
    animation: shimer 3s linear infinite;  */

    height: 50vh;
    overflow-y: scroll;
    scrollbar-width: none;
    
}

#people .link_to_img {
    max-width: 80%; max-height: 50%; width: auto; height: auto;
}


input[type="checkbox"] {
    appearance: none;
    background-color: #606060;
    margin-right: 1em;
    width: 1em;
    height: 1em;
    border: none;
    border-radius: 0.2em;
    vertical-align:middle;
  }

input[type="checkbox"].canceled{
    opacity: 0.2;
}

s{
    opacity: 0.2;
}

input[type="checkbox"]:checked::before {
    content: "✔";
    font-size: 2em;
    color: white;
    position: absolute;
    transform: translate(-10%, -50%);
}

input[type="checkbox"]::before {
    background-color: transparent;
  }



@keyframes shimer {
    0% {
        background-position: 0 200%;
    }
    100% {
        background-position: 0 0;
    }
}


@keyframes blink {
    from, to {border-color: transparent;}
    50% {border-color: white;}    
}

@media (orientation: landscape) {
    .swipe3d {
        width: 50%;
        margin: 0 auto;
    }
    .citates{
        width: 80%;
        margin: 0 auto;
        
    }
    h1  {
        width: 50%;
        margin: 0 auto;
        
    }
    .swiper__wrapper {
        transition: var(--transition)!important;
        height: 40vh!important;
        will-change: transform;
    }
    .slider_img {
        width: 50vh;
        height: 100%;
        background-size: cover;
        position: absolute;
        /* left: -50%; */
        transition: var(--transition)!important;
        will-change: transform;
    }
    #AHDPEEEWiki {
        height: 7.5vw; width: 50vw;
        margin-left: 25%;
    }
    #perspective{
        perspective: 1500px; 
        margin: 0, 25%, 0, 25%;
        width: 70%;
    }
    #ui {
        margin-top: calc(43.2vh + 7.5vw + 0.25em);
        width: 50%;
        margin-left: 25%;
        image-rendering:
        pixelated;
    }
    .arrows {
        width: 55%; top: 50%;
    }
    #status{
        top: 2vh; position: absolute;
        text-wrap: anywhere;
        text-align: center;
    }
}

#comment {
    position: fixed;
    top: 25vh; left: 20vw;
    width: 60vw; height: 50vh;
    z-index: 9999;

    background-color: #515151ad;
    border: 1px solid #969696;
    padding: 3%;
    border-radius: 3vh 3vh 2vh 2vh;
}

#comment p {
    width: 100%; white-space: nowrap; overflow: scroll; overflow-block: hidden; scroll-snap-align: center;
    mask-image: linear-gradient(to right, transparent, rgb(255, 255, 255) 10%, rgb(255, 255, 255) 90%, transparent);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;
    margin-bottom: 2%;
}


#comment button{
    margin-top: 2%;
    width: 100%;
    background: transparent;
    border-color: white;
    border-bottom: transparent;
    border-top: transparent;
    border-radius: 5vh;
    font-size: large;
}

#comment #send{
    width: 70%;
    border-right: transparent;
}

#comment button:hover{
    font-size: x-large;
    font-style: italic;
}
#comment #cancel{
    width: 30%;
    height: auto;
    border-left: transparent;
}

#comment textarea {
    resize: none; width: 100%;  height: 75%;
    autocomplete: off;
    autocomplete: off;
    autocorrect: off;
    background-color: #e7e7e7af;
    color: #000000;
    border: transparent;
    border-radius: 10px;
    font-size: large;
    text-wrap: everywhere;
    autofocus: true;
    wrap: hard;
    padding: 3% 3% 25% 3%;
    scrollbar-color: #565656 rgba(0, 0, 0, 0);
}