html, body {
margin: 0;
padding: 0;
width: 100%;
overflow: hidden;
color:#fff;
font-size:12px;
font-family: "MS UI Gothic", "Times New Roman", Times, serif;
background-color: #070708;
line-height: 16px;
text-shadow:
-1px -1px 0 black,
0px -1px 0 black,
1px -1px 0 black,
-1px  0px 0 black,
1px  0px 0 black,
-1px  1px 0 black,
0px  1px 0 black,
1px  1px 0 black;
}
html {
cursor: url("../img/cursor/curs.png"), auto;
}
a:hover,
a:active {
cursor: url("../img/cursor/pointer.png"), pointer !important;
}
a {
color: #ebebeb;
text-decoration: none;
text-decoration: underline dotted #777;  
font-size:12px;
}
p a:hover {
background-color: rgba(90,90,90, 0.5);
text-decoration: underline dotted #999;
}
p a:active {
background-color: rgba(0,0,0, 0.6);
color: #e8e8e8;
text-decoration: underline dotted #999;
}
p {
margin-bottom: 0px;
margin-top: 0px;
}
body {
position: relative;
min-height: 100vh;
}
::selection {
background: rgba(0,0,0,0.7);
color: #737373;
}
.cathedral {
position: fixed;
inset: 0;
z-index: 1;
overflow: hidden;
pointer-events: none;
}
.cathedral::before {
image-rendering:pixelated;
content: "";
position: absolute;
inset: 0;
width: 300%;
height: 100%;
background-image: url("https://file.garden/Zw9kyjgvxin58h7K/cath2.png");
background-repeat: repeat-x;
background-size: auto 100vh;
background-position: bottom left;
animation: cathedralDrift 200s linear infinite;
transform-origin: center bottom;
filter: brightness(165%);
}
.cathedral::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.9) 0%,
rgba(0, 0, 0, .35) 35%,
rgba(0, 0, 0, .0) 55%,
rgba(0, 0, 0, .65) 82%,
rgba(0, 0, 0, 0.7) 100%
);
}
@keyframes cathedralDrift {
0% {
transform: translateX(0) scale(1);
}
100% {
transform: translateX(-33.333%);
}
}
.title {
position: fixed;
top: 38px;
left: 140px;
z-index: 4;
transform: translateX(-50%);
margin: 0;
color: #fff;
font: italic 48px "Times New Roman", serif;
text-shadow: -1px -1px 0 black, 0px -1px 0 black, 1px -1px 0 black, -1px 0px 0 black, 1px 0px 0 black, -1px 1px 0 black, 0px 1px 0 black, 1px 1px 0 black;
}
.home {
font-size: 12px;
align-self: flex-start;
line-height:1.2;
filter:opacity(0.95);
text-shadow:
-1px -1px 0 black,
0px -1px 0 black,
1px -1px 0 black,
-1px  0px 0 black,
1px  0px 0 black,
-1px  1px 0 black,
0px  1px 0 black,
1px  1px 0 black;
text-decoration: underline dotted #999;
}
.gate {
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: auto;
z-index: 3;
pointer-events: none;
user-select: none;
}
.fade {
position: fixed;
inset: 0;
z-index: 2;
pointer-events: none;
background: linear-gradient(
to right,
rgba(0, 0, 0, 0.75) 0%,
rgba(0, 0, 0, 0.35) 5%,
rgba(0, 0, 0, 0.3) 18%,
rgba(0, 0, 0, 0.0) 35%
);
}.quote {
z-index: 5;
color: rgba(255,255,255,0.82);
font: 13px "MS Gothic", monospace;
font-style:italic;
line-height: 16px;
white-space: normal;
text-shadow: -1px -1px 0 black, 0px -1px 0 black, 1px -1px 0 black, -1px 0px 0 black, 1px 0px 0 black, -1px 1px 0 black, 0px 1px 0 black, 1px 1px 0 black;
}
.content {
position: fixed;
top: 105px;
left: 50px;
max-width: 490px;
max-height: calc(100vh - 150px);
overflow-y: auto;
overflow-x: hidden;
z-index: 6;
display: flex;
flex-direction: column;
padding-right: 8px;

scrollbar-width: none;
-ms-overflow-style: none;
}

.content::-webkit-scrollbar {
display: none;
}
.buttons {
display: flex;
flex-wrap: wrap;
gap: 7px;
transition: filter 0.2s ease;
}
.buttons img {
width: 88px;
height: 31px;
image-rendering: pixelated;
filter: grayscale(95%) brightness(100%) contrast(90%) sepia(100%) hue-rotate(180deg) saturate(100%);
transition: filter 0.2s ease;
margin-bottom: -4px;
}
.buttons img:hover {
filter: grayscale(0%) brightness(100%) contrast(100%)  sepia(0%); 
}
.buttons img:active {
transform: translateY(1px);
}
.mini {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 7px;
}
.mini img {
width: 32px;
height: 32px;
image-rendering: pixelated;
filter: grayscale(95%) brightness(100%) contrast(90%) sepia(100%) hue-rotate(180deg) saturate(100%);
transition: filter 0.2s ease;
}
.mini img:hover {
filter: grayscale(0%) brightness(100%) contrast(100%)  sepia(0%); 
}
.mini img:active {
transform: translateY(1px);
}
h2 {
font-family: Times;
font-size:21px;
font-weight:normal;
text-shadow: -1px -1px 0 black, 0px -1px 0 black, 1px -1px 0 black, -1px 0px 0 black, 1px 0px 0 black, -1px 1px 0 black, 0px 1px 0 black, 1px 1px 0 black;
font-style:italic;
margin-top: 5px;
margin-bottom: 15px;
}