font-face {font-family: 'pixel';src: url(https://dl.dropbox.com/s/kmhe7d3n18vdz5e/w95fa.woff?dl=0);}

/* ---------- Basics ---------- */
body {
margin:0;
padding:15px;
padding-top:40px;
display:flex;
justify-content:center;
background:url(https://64.media.tumblr.com/734d7662808a20bb2a769f8a08255bfd/935b0c50d2f98656-b7/s1280x1920/19182bd7035cdfee2712df9d04df7c81a59a747f.pnj) fixed;
background-color: #000000;
font-family:'pixel', calibri, verdana, sans-serif;
letter-spacing:1px;
font-size:12px;
line-height:13px;
color:#C58997;
}

body {
  cursor: url('https://webdec.neocities.org/web%20dec/pixels2/16/tumblr_407050ffe293d75eb2d4224414f4a306_e4712656_75.png'), auto;
}

body *:hover {
  cursor: url('https://webdec.neocities.org/web%20dec/pixels2/12/3wlqj23_time135_5.gif'), auto;
}

textarea {font:10px calibri, arial;letter-spacing:1px;}

a {
font-size:11px;
font-family:'ms gothic', 'pixel', calibri, verdana;
color:#AA4761;
text-decoration:none;
}

a:hover { color:#C58997; text-decoration:underline; }

/* Scrollbar */
::-webkit-scrollbar-thumb {
background-color: #372D35;
border:1px solid #5A3598;
border-radius: 3px;}
::-webkit-scrollbar {
width: 5px; height: 0px;
background: transparent;}

/* ---------- Container ---------- */
.container {
width:100%;
max-width:650px;
background:#372D35;
border-radius:16px;
border:3.5px double #5A3598;
box-shadow:0 15px 25px rgba(0,0,0,0.1);
display:flex;
flex-direction:column;}

/* ---------- Top navigation ---------- */
.nav {
display:flex;
align-items:center;
padding:5px;
gap:6px;
border-bottom:1px solid #5A3598;
background:linear-gradient(90deg,#978E87,#978E87);
border-radius:16px 16px 0 0;
box-sizing:border-box;}

.nav-links {
display:flex;
gap:6px;
flex-wrap:nowrap;
font:11px 'monospace', arial;
align-items:center;}

.nav-link { /*top ones*/
padding:6px 8px;
border-radius:5px 5px 0 0;
background:#372D35;
color:#AA4761;
text-decoration:none;
text-transform:uppercase;
border:1px solid #5A3598;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
white-space:nowrap;}

.nav-link.active { /*home button*/
background:#372D35;
color:#C58997;
border-color:#5A3598;
font-weight:600;}

/* minimize / close decoration */
.nav-actions {
margin-left:auto;
display:flex;
gap:5px;
align-items:center;}

/* styling for min/close/reload */
.btn {
padding:0 7px;
height:25px;
border-radius:12px;
border:1px solid #5A3598;
background:#372D35;
color:#C58997;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
font-size:12px;}

/* reload link */
.reload-link {
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
color:#C58997;}

.reload-link:hover { text-decoration:none; opacity:0.8; }

/* ---------- address bar ---------- */
.address-bar {
display:flex;
align-items:center;
gap:5px;
padding:5px;
border-bottom:1px solid #5A3598;
background:#5A3598;}

.addr-icon {
width:32px;
height:28px;
background:#372D35;
border:1px solid #5A3598;
display:flex;
align-items:center;
justify-content:center;
border-radius:6px;
color:#C58997;}

.addr-field {
flex:1;
display:flex;
align-items:center;
gap:5px;
background:#372D35;
border:1px solid #5A3598;
padding:5px;
border-radius:12px;}

.addr-text {
font-family:tahoma,arial;
letter-spacing:0px;
width:100%;
display:block;
border:none;
background:transparent;
font-size:12px;
color:#C58997;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

/* ---------- main layout ---------- */
.layout {
display:flex;
flex-direction:row;
gap:5px;
padding:5px;
flex-wrap:wrap;}

.side {
flex:1;
order:0; /* ---------- change this to 1 if you want the sidebar appear right side ---------- */
display:flex;
flex-direction:column;
gap:5px;
padding:5px;
border-radius:12px;
border:1px solid #5A3598;
background:linear-gradient(180deg,#5A3598,#372D35);
box-shadow: inset 0 0 5px rgba(0,0,0,0.02);}

.content {
flex:2;
order:1; /* ---------- change this to 0 if you want the content appear left side ---------- */
display:flex;
flex-direction:column;
gap:5px;
padding:5px;
border-radius:12px;
border:1px solid #5A3598;
background:linear-gradient(180deg,#5A3598,#372D35);
box-shadow: inset 0 0 5px rgba(0,0,0,0.02);}

/* boxes */
.box, .content-box, .scrollbox {
padding:5px;
border-radius:10px;
background:#372D35;
border:1px dashed #5A3598;
transition: transform 0.3s ease;
}

.box:hover, .content-box:hover, .scrollbox:hover {
transform: translateY(-2px);
}

.scrollbox {
height:70px;
overflow:auto;
}

/* titles 1st is right side:2nd is left side*/
.title { font-size:14px; color:#AA4761; border-bottom:1px dashed #9B86A7; margin-bottom:5px; }
.side-title { color:#AA4761; border-bottom:1px dashed #9B86A7; margin-bottom:5px; }

/* sidebar nav links */ /*Credits Link box*/
.extra-nav a {
display: block;
padding: 3px 5px;
margin-bottom: 3px;
text-decoration: none;
color: #5A3598;
background: #978E87;
border-radius: 5px;
font-weight: 600;
transition: background 0.2s ease, padding-left 0.2s;
}

.extra-nav a:hover {
background: #C58997;
padding-left: 20px;
}

/* profile */
.profile {
display:flex;
gap:10px;
align-items:center;
padding:5px;
border:1px solid #5A3598;
border-radius:12px;
background:#372D35;
box-shadow:0 1px 3px rgba(0,0,0,0.05);
}

.profile-pic {
width:70px;
height:70px;
border:1px solid #5A3598;
border-radius:50%;
background:url(https://64.media.tumblr.com/198ac9368ffd1cde11ea857927e151b6/935b0c50d2f98656-2a/s1280x1920/9bcf7600f274865c58509ac7941bd1fcddf8641e.jpg);
background-size:cover;
flex-shrink:0;
}

.profile-info { display:flex; flex-direction:column; gap:5px;flex:2; }
.profile-info span { display:block; border-bottom:1px dotted #5A3598; }

.profile-social-card {
display:flex;
flex:1;
flex-direction:column;
gap:6px;
padding:5px;
border-radius:12px;
background:linear-gradient(180deg,#5A3598,#372D35);
border:1px solid #5A3598;
min-width:80px;
text-align:center;
flex-shrink:0;
}

.social-title {
font-size:11px;
font-weight:600;
color:#C58997;
border-bottom:1px dotted #C58997;
padding-bottom:2px;
}

.social-links {
display:flex;
flex-direction:column;
gap:4px;
align-items:center;
}

/* footer */
.footer {
width: 100%;
margin: 0 auto;
padding:5px;
border-top:1px solid #5A3598;
text-align:center;
background:#978E87;
border-radius:0 0 12px 12px;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
color: #AA4761;
}

/* responsiveness */
@media (max-width:640px) {
.layout { flex-direction:column; }
.content { order:1; }
.side { order:2; }
}

@media (max-width:640px) {
.nav { flex-direction:column; align-items:stretch; gap:8px; padding:8px; }
.nav-links { flex-direction:column; gap:6px; width:100%; }
.nav-link { width:100%; box-sizing:border-box; text-align:left; padding:8px 10px; border-radius:8px; }
.nav-actions { display:none; }
}

*, *::before, *::after { box-sizing: border-box; }