body{

margin:0;
font-family:'Press Start 2P', monospace;
background:#070914;

display:flex;
justify-content:center;
align-items:center;

height:100vh;

}


/* PIXEL BACKGROUND */

.pixel-bg{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

/* pixel grid */

background-image:
linear-gradient(#6EAAFF 1px, transparent 1px),
linear-gradient(90deg,#FF388E 1px, transparent 1px);

background-size:32px 32px;

opacity:0.25;

image-rendering:pixelated;

z-index:-1;

}



/* WINDOW */

.window{

width:860px;

background:#f5f5f5;

/* pixel border */

border:6px solid #FF388E;

box-shadow:
0 0 0 4px #6EAAFF,
0 0 25px #FF388E;

position:relative;

}



/* TITLE BAR */

.titlebar{

background:
repeating-linear-gradient(
90deg,
#FF388E 0px,
#FF388E 8px,
#6EAAFF 8px,
#6EAAFF 16px
);

padding:12px;

display:flex;
align-items:center;

color:white;

}



.title{

margin-left:15px;
font-size:10px;
letter-spacing:2px;

}



/* BUTTONS */

.buttons{
display:flex;
}

.btn{

width:12px;
height:12px;

margin-right:6px;

border:2px solid white;

}



.pink{background:#FF388E;}
.blue{background:#6EAAFF;}



/* CONTENT */

.content{

display:flex;

padding:40px;

gap:60px;

}



/* REIMU */

.reimu img{

width:340px;

image-rendering:pixelated;

filter:
drop-shadow(4px 4px 0px #FF388E)
drop-shadow(-4px -4px 0px #6EAAFF);

}



/* TEXT */

.info{

flex:1;

font-size:10px;

color:#111;

}



h1{

font-size:24px;

color:#FF388E;

margin:0;

text-shadow:
3px 3px 0px #6EAAFF;

}



.divider{

color:#6EAAFF;

margin:15px 0;

letter-spacing:5px;

}



/* LINKS */

.links{

margin:20px 0;

}



.links a{

margin-right:25px;

color:#6EAAFF;

text-decoration:none;

border-bottom:3px solid #6EAAFF;

}



.links a:hover{

color:#FF388E;

border-color:#FF388E;

}



/* HEADINGS */

h3{

color:#FF388E;

margin-top:25px;

font-size:11px;

}



/* MINI REIMU */

.mini-reimu{

position:absolute;

right:-15px;
bottom:-15px;

width:130px;

image-rendering:pixelated;

filter:
drop-shadow(3px 3px 0px #FF388E)
drop-shadow(-3px -3px 0px #6EAAFF);

}