/*useful

border: 5px solid #555;
cursor: url(other/cursor.ico), default ;
draggable="false"
html {
filter: grayscale(100%) contrast(100%);
}
*/



/* Simulated CRT scanlines */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
    rgba(0, 0, 0, 0.3) 0px,
    rgba(0, 0, 0, 0.1) 1px,
    transparent 2px,
    transparent 4px
);
    pointer-events: none;
    animation: scanlines 0.1s infinite linear;
    z-index: 9999;
    opacity: 50%;
}
html, body {
    cursor: url(other/cursorDot.ico), default ;
    background-color: black;
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: -20;
}

body::-webkit-scrollbar {
    display: none;
}

.videoback {
    position: fixed;
    pointer-events: none;
    width: 78vh;
    height: 63vh;
    transform: translateY(-50) translateX(50);
    z-index: -1;
}


.video2 {
    position: fixed;
    right: 0;
    bottom: 0;

    pointer-events: none;
    min-width: 100%;
    min-height: 100%;

    opacity: 50%;

    /* transform: translateY(-50) translateX(50); good way to center stuff*/
    scroll-snap-type: y mandatory;
    z-index: -3;
}

  
  
  

@font-face {
    font-family: 'PixelOperator' ;
    src: url(other/font/PixelOperatorMono-Bold.ttf);

}

@font-face {
    font-family: "Helmet-Regular";
    src: url(other/font/Helmet-Regular.ttf);
}

@font-face {
    font-family: "lucon";
    src: url(other/font/lucon.ttf);
}

@font-face {
    font-family: "ms-sans-serif-1";
    src: url(other/font/ms-sans-serif-1.ttf);
}

@font-face {
    font-family: "garamond";
    src: url(other/font/EBGaramond-Italic-VariableFont_wght.ttf);
}
@font-face {
    font-family: "garamond2";
    src: url(other/font/EBGaramond-VariableFont_wght.ttf);
}


*{

} 
.loader{
    position: fixed;
    top: 0;
    left: 0;
    background: rgb(0, 0, 0);
    min-height: 120%;
    min-width: 100%;
    
    height: 5vh;
    width: 5vh;

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 90%;

    z-index: 8;

    margin-left: 50%;
    margin-right: 50%;
    top: 40%; /* 70 */
    transform: translate(-50%, -50%);
    top: 40%; /* 70 */
}



.disppear{
    animation: vanish 0.5s ;

}
@keyframes vanish {
    100%{
    opacity: 0;
    visibility: hidden;

    }
}



.firstclick {

    text-align: left;
    position: fixed;
    justify-content: center;
    display: flex;
    z-index: 9;
    min-width: 200px;
    margin-left: 15%;
    margin-right: 50%;
    top: 25%; /* 70 */
    opacity: 1;
    transition: opacity 250ms ease-in;


}

.firstclick:active {
    opacity: 0%;
    display: none;


}

.button123 {
    opacity: 1;
    text-align: left;
    position: fixed;
    justify-content: center;
    z-index: 9;
}
    .button123:active {
    opacity: 0;
}



@keyframes glowing {
    0% { background-position: 0 0;}
    50% { background-position: 400% 0;}
    100% {background-position: 0 0;}
}
*/


#dirrection {
    position: absolute;
    z-index: 999;
    vertical-align: middle;
    transform: rotateZ(0.5turn);
    transform: translateY(-50) translateX(50);

}

.buttonbox.closest {
    border-color: #004990;
    color: #004990;

}

.buttonboxPink.closest {
    border-color: #ff0000;
    color: #ff0000;
    box-shadow: 0px 0px 15px rgb(255, 28, 225);
}


.fcircle {
    position: fixed; 
    height: 13vw;
    max-height: 20%;
    bottom: 2%; 
    right: 2%;
    background-color: rgb(0, 0, 0);
    border-radius: 50%;
    z-index: 2;


}
/*
.fcircle2 {
position: fixed; 
height: 13vw;
max-height: 20%;
top: 2%; 
left: 2%;
background-color: #00000000;
border-radius: 50%v;
z-index: 2;
background-size: cover;
backdrop-filter: blur(50px);
cursor: url(other/grab.ico), default;

}
*/
.rotate180 {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.gradient-text {
    color: linear-gradient(to right, red, blue);
}



::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    display: none;
}


.imageside {
    position: relative;
    width: 25vh;
    margin-left:1vh;
    margin-top: 1vh;

}

.sidetext {
    display:block ;
    grid-template-columns: 0fr 5fr 1fr;
    column-gap: 1px;
}

.casual-text {
    position: relative;
    display: block;
    color: snow;
    margin-left: 0.5vh;
    margin-top: 0vh;
    font-size: 2vh;
    font-family: garamond2;

}

.text222 {

    color: var(--always-light);

    text-decoration: none;
    font-size: 1.5vw;
    color: snow;
    z-index: 9;
    float: right;
    margin-right: 2vw;
    font-family: Arial, sans-serif;
    margin-top: 1vw;


}


.topnav{
    position: fixed;
    background-color: #000000;
    z-index: 9;
    margin-top: -85vh;
    color: #4AF626;
    font-family: Arial, sans-serif;

    cursor: url(other/cursorDot.ico), default;
    text-decoration: none;
    font-size: 1vw;
}

.topnav :hover {
    text-decoration: line-through;
}




.topnav a
{
    position: fixed;
    color: var(--always-light);
    width: 25vw;
    height: 10vw;
    text-decoration: none;
    font-size: 2vw;
    color: snow;
    z-index: 9;
    margin-top: 1vw;
    margin-left: 1vw;


}

.mute {
    position: fixed;

    opacity: 100%;
    height: auto;
    width: auto;
    font-family: 'ms-sans-serif-1'; 
    font-size: 2vh;
    color: whitesmoke;
    border-color: rgba(0, 0, 0, 0.582);
    background-color: #111111ab;
    padding: 1vh;
    backdrop-filter: blur(5px);
    text-decoration: none;
    cursor: url(other/cursor.ico), default;
    user-select: none;
    top: 1vh;
    left: 12vh;
    z-index: 99 ;
}