html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
:root {
--red: rgb(42, 0, 6);
--tred: rgba(39, 0, 4, 0.5);
--dred: rgba(35, 0, 5);
--black: rgba(0, 0, 0, 0.5);
}
body {
margin: 0;
padding: 0;
overflow: hidden;
font-family: "MS UI Gothic";
font-size: 12px;
position: relative;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent, rgba(0, 0, 0, 0.4));
}
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
background-image: url(../img/background.png);
background-size: 200px;
background-repeat: repeat;
background-position: 0 0;
animation: bgScroll 20s linear infinite;
mix-blend-mode: overlay;
z-index: -1;
pointer-events: none;
}
@keyframes bgScroll {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -211px;
}
}
img {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
pointer-events: auto;
}
p {
color:white;
font-size: 12px;
font-family: MS UI Gothic;
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;
}
a {
color:white;
text-decoration:none;
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;
}
a:hover {
background-color: rgba(0,0,0, 0.8);
color: #cacaca;
}
a:active {
transform: translateY(1px);
background-color: rgba(0,0,0, 1);
color: #e8e8e8;
}
::selection {
background: rgba(0,0,0,0.5);
color: #737373;
}
.overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.5);
animation: fadeInOut 8s infinite;
pointer-events: none;
z-index: 1;
}
@keyframes fadeInOut {
0% { opacity: 0.5; }
50% { opacity: 0; }
100% { opacity: 0.5; }
}
@keyframes fadeInAnimation {
from { opacity: 0; }
to { opacity: 1; }
}
.side-image {
position: fixed;
top: 0;
height: 100vh;
width: auto;
image-rendering: pixelated;
z-index: 0;
pointer-events: none;
}
.left {
left: 0;
}
.right {
right: 0;
transform: scaleX(-1);
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative;
z-index: 2;
padding: 1rem;
overflow-y: auto;
}
.moon-glow {
animation: glow-pulse 2.5s ease-in-out infinite;
filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
height:95px;
right:0px;
position:absolute;
transform: scaleX(-1);
}
@keyframes glow-pulse {
0%, 100% {
filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.15));
}
50% {
filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.25));
}
}
.content {
position: relative;
background-image: linear-gradient(to bottom, #010103, #0b0b0d, #010103), url();
background-size: cover;
background-position: center;
padding: 1rem 20px;
max-width: 910px;
min-width:910px;
width: 100%;
border-image-slice:
96 95 96 95;
border-image-width:
37px 0px 37px 0px;
border-image-outset:
32px 0px 34px 0px;
border-image-repeat:
repeat repeat;
border-image-source:
url("../img/toplace.png");
z-index: 1;
}
.wireframe-container {
display: grid;
grid-template-columns: 180px 1fr;
grid-gap: 10px;
height: 100%;
position: relative;
}
.left-col {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
.left-top {
height: 180px;
max-height:180px;
max-width:180px;
flex-shrink: 0;
background: linear-gradient(to top, rgba(5,3,5,1), rgba(0, 0, 0, 1)),  
url("../img/pfp.png");  
background-size:cover;
border: 2px solid black; 
outline: 1px solid rgba(11,9,11,1);           
outline-offset: -2px;  
box-shadow: 0 0 0 1px rgba(2, 2, 2, 1);
display: flex;
justify-content: center;
align-items: center;
}
.pfp {
display: block;
margin: 0px;
width:177px;
}
.nav {
background: linear-gradient(to top, rgb(42, 0, 6), rgba(0, 0, 0, 1)),  
url("");
min-width:180px;
max-width:180px;
padding-top:5px;
padding-bottom:5px;
background-size:
100% 100%,   
auto 100%;  
background-position:
center,
right center;
background-repeat: no-repeat;
background-color: black;
outline: 1px solid var(--tred);           
outline-offset: -3px;  
border: 2px solid black; 
}
.main-area {
display: grid;
grid-template-rows: auto 1fr auto;
gap: 10px;
}
.top-row {
display: grid;
grid-template-columns: 1fr 150px;
gap: 10px;
}
.main-top-large,
.main-top-small,
.main-center,
.main-bottom {
}
.main-top-large {
position: relative;
height: 120px;
background-image:
linear-gradient(
to right,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 48%,
rgba(20, 0, 0, 0.1) 100%
),
url("../img/banner.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
border: solid 1px black;
outline: 1px solid rgba(10,10,10,0.2);
outline-offset: -2px;
box-shadow: 1px 1px #000;
}
.main-top-large::after {
content: "";
position: absolute;
bottom: 0px;
left: -120px;
height: 112px;
width: 132px;
background-image: url("https://files.catbox.moe/8hpzj9.png");
background-size: contain;
background-repeat: no-repeat;
opacity: 0;
transform: translateX(-20px);
transition:
left 0.6s cubic-bezier(.34,1.56,.64,1),
opacity 0.3s ease;
}
.main-top-large:hover::after {
left:7px;
opacity: 1;
}
.main-top-small {
height: 120px;
background: linear-gradient(to bottom right, black, rgb(65, 0, 7));
outline: 1px solid rgba(70, 0, 3, 0.3);           
outline-offset: -3px;  
border: solid 2px black;
  box-shadow: 1px 1px #000;
}
.main-center {
height: 300px;
background:
linear-gradient(to left, rgba(100, 0, 15, 0.3), rgba(0, 0, 0, 0.0)),  
url("../img/abara.png");  
filter: brightness(150%);
background-size:
100% 100%,   
auto 100%;  
background-position:
center,
right center;
background-repeat: no-repeat;
background-color: black;
border: 2px solid black; 
outline: 1px solid var(--tred);           
outline-offset: -3px;    
box-shadow: 3px 2px rgba(2, 2, 2, 0.9);
}
.main-bottom {
height: 80px;
display: flex;
flex-wrap: wrap;            
background: linear-gradient(to bottom, var(--red), rgba(0, 0, 0, 1));  
outline: 1px solid var(--tred);  
border: 2px solid black;
outline-offset: -3px; 
flex: 1;
min-width: 0;
padding-left:11px;
width:220px;
}
.main-bottom-row {
display: flex;
gap: 10px;  
justify-content: center;
}
.main-blog {
display: flex;
align-items: center;
height: 80px;
display: flex;
flex-wrap: wrap;            
background: linear-gradient(to bottom, var(--red), rgba(0, 0, 0, 1));  
outline: 1px solid var(--tred);  
border: 2px solid black;
outline-offset: -3px; 
flex: 1;
min-width: 0;
padding-left:11px;
max-width: 300px;width:220px;
}
.main-bottom {
position: relative;
}
.madebyagirl {
position: absolute;
bottom: 13px;
left: 134px;
image-rendering: pixelated;
}
.madebyagirl:hover {
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.3),
rgba(0, 0, 0, 1)
);
} 
.post-img {
height: 50px;
border: 1px solid black;
outline: 1px solid black;
outline-offset: -3px;
margin-left: auto;
margin-right: 11px;
margin-top:-4px;
pointer-events: none;
}
.boxtitle span {
font-size: 12px;
font-family: "MS UI Gothic";
display: block;
margin-top: 5px;
line-height: 16px;
width:135px;
}
#bottom-row-lace{
width: 900px;
height: 50px;
background: url("../img/bottomlace.png") 0px 0px / contain;
position: absolute;
bottom:  -55px;
left:-20px;
z-index:2;
filter:  drop-shadow(0px 0px 1px #240200);
}
.hover-text {
font-family: "MS UI Gothic";
font-size: 14px;
color:white;
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;
margin-top: 64px;
margin-left: 10px;
position: relative;
line-height: 1; 
}
.text-default,
.text-hover {
position: absolute;
top: 0;
left: 0;
transition: opacity 0.5s ease;
}
.text-hover {
opacity: 0;
pointer-events: none;
}
.hover-text:hover .text-default {
opacity: 0;
}
.hover-text:hover .text-hover {
opacity: 1;
pointer-events: auto;
}
#quote-container {
transition: opacity 0.3s ease;
opacity: 1;
}
#quote-container.fade-out {
opacity: 0;
}
.mayura {
position: absolute;
height: 280px;
right: -87px;
bottom: -16px;
z-index: 1;
filter: drop-shadow(1px 1px 1px rgba(39,1,0, 1));
}
.chain, .chain2 {
width: 35px;
height: 557px;
background-image: url("../img/chain.gif");
background-repeat: repeat-y;
position: absolute;
top: -19px;
filter: brightness(0%);
}
.chain {
right: -40px;
}
.chain2 {
left: -27px;
}
.roses {
position:absolute;
right:-57px;
top:-130px;
image-rendering:pixelated;
filter:brightness(85%);
}
.text {
color:#a1a1a1;
width: 435px;
font-size: 12px;
margin: 23px;
line-height: 14.5px;
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;
}
.header {
color:#a1a1a1;
font-size:19px;
font-style:italic;
font-weight:bold;
margin: 23px;
line-height: 14.5px;
margin-bottom:-3px;
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-family: Times;
}
.mini {
position:absolute;
margin:18px;
image-rendering:pixelated;
transition: transform 0.3s ease;
}
.mini:hover {
animation: bounce 0.5s ease;
}
@keyframes bounce {
0%   { transform: translateY(0); }
30%  { transform: translateY(-5px); }
50%  { transform: translateY(0); }
70%  { transform: translateY(-2px); }
100% { transform: translateY(0); }
}
.speech-box {
left: 421px;
top: 217px;
background: linear-gradient(to bottom, #0a0a0a, #000);
color: #9c9c9c;
font-size: 12px;
font-family: MS UI Gothic;
padding: 12px 13px;
line-height:14px;
max-width: 170px;
max-height: 63px;
min-width:170px;
min-height:67px;
position: absolute;
outline: 1px solid rgba(0, 0, 0, 1);    
outline-offset: -3px;                
box-shadow:
0 0 0 1px black,   
1px 1px 0 #000;         
z-index: 1;
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;
}
.speech-box::after {
content: '';
position: absolute;
top: 42px;
right: -12px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 12px solid #000; 
}
.tooltip {
position: absolute;
bottom: 100%;  
right: 0;
transform: translateY(-5px);
background: linear-gradient(to bottom, #0a0a0a, #000);
color: #bfbfbf;
font-size: 12px;
font-family: MS UI Gothic;
padding: 8px 8px;
white-space: nowrap;
outline: 1px solid rgba(0, 0, 0, 1);
outline-offset: -2px;
box-shadow:
0 0 0 1px black,   
1px 1px 0 #000;  opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
z-index: 10;
}
.speech-box:hover .tooltip {
opacity: 1;
}
#s-m-t-tooltip{
z-index: 10;
margin: 24px 14px 7px 12px;
background: linear-gradient(to bottom, #0a0a0a, #000);
color: white;
font-size: 12px;
font-family: MS UI Gothic;
padding: 8px 8px;
white-space: normal;
max-width: 180px;
word-wrap: break-word;outline: 1px solid rgba(0, 0, 0, 1);
outline-offset: -2px;
line-height:14px;
box-shadow:
0 0 0 1px black,   
1px 1px 0 #000;  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;
}
.button {
display: block;
margin: 5px auto; 
font-family: "MS UI Gothic";
font-size: 13px;
text-align: left;
color: #f0f0f0;
background: linear-gradient(to bottom, #0a0a0a 0%, #000000 61%, #030303 100%);
padding: 0.55em 1em;
width: 160px;
line-height: 1.1;
box-sizing: border-box;
white-space: nowrap;
outline: 1px solid rgba(0, 0, 0, 1);
outline-offset: -3px;
box-shadow: 2px 2px #000;
border: solid 1px black;
cursor:pointer;
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: none;
}
.button:hover {
background: linear-gradient(to bottom, #0f0f12 0%, #020205 61%, #060609 100%);
padding: 0.55em 1em;
font-style:italic;
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: none;
}
.button:active {
transform: translateY(1px);
text-decoration: none;
}
#sitebutton {
margin-left: -89px;
margin-top: 33px;
height: 31px;
width: 88px;
cursor: pointer;
transition: transform 0.3s ease;
image-rendering: pixelated;
}
#sitebutton:active {
transform: translateY(1px);
}
.boxtitle {
font-family: 'Times';
color: white;
font-size:15px;
margin-top:8px;
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;
}
.boxtitle a {
display: inline-block;
}
.boxtitle a:active {
transform: translateY(1px);
}
.boxtext {
font-family: 'MS UI Gothic';
color: white;
font-size:12px;
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;
}
.minibox {
position: absolute;
color: white;
bottom: 21px;
font-size: 12px;
height:85px;
width:170px;
left: 6px;
line-height:16.5px;
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;
background: linear-gradient(to bottom, #0a0a0a, #000);
padding: 12px 13px;
outline: rgb(0, 0, 0) solid 1px;
outline-offset: -3px;
box-shadow: black 0px 0px 0px 1px, rgb(0, 0, 0) 1px 1px 0px; 
 }
.jelly {
height:140px;
position:absolute;
bottom:-7px;
left:80px;
z-index:999;
}
.jelly:hover {
animation: jelly 0.5s;
}
@keyframes jelly {
from, to { transform: scale(1, 1); }
25% { transform: scale(0.9, 1.1); }
50% { transform: scale(1.1, 0.9); }
75% { transform: scale(0.95, 1.05); }
}
.mail {
position:absolute;
bottom:3px;
left:10px;
}
.email { 
position:absolute;
bottom:-11px;
left:38px;
color:white;
font-size:14px;
z-index:99999;
text-shadow:
-1px -1px 0 #000,
0px -1px 0 #000,
1px -1px 0 #000,
-1px  0px 0 #000,
1px  0px 0 #000,
-1px  1px 0 #000,
0px  1px 0 #000,
1px  1px 0 #000;
text-decoration: underline dotted #cacaca;
font-family:Times;
}
.email:hover {
background-color: rgba(0,0,0, 0.8);
color: #cacaca;
text-decoration: underline dotted #cacaca;
}
.email:active {
transform: translateY(1px);
background-color: rgba(0,0,0, 1);
color: #e8e8e8;
}