/* ---------- Basics ---------- */
body {
margin:0;
padding:15px;
padding-top:40px;
display:flex;
justify-content:center;
background:url(x) fixed;
background-color: #000825;
font-family:'pixel', calibri, verdana, sans-serif;
letter-spacing:1px;
font-size:17px;
line-height:16px;
color:#ffbbcc;
}

body {
  cursor: url('https://64.media.tumblr.com/3cb5a3435f7ba3ce0b0173585378a84b/3cb1fc505a591908-2a/s75x75_c1/45f9e9c186ca06ad832235b482e1dfc15a7ef136.gifv'), auto;
}

body *:hover {
  cursor: url('https://64.media.tumblr.com/3cb5a3435f7ba3ce0b0173585378a84b/3cb1fc505a591908-2a/s75x75_c1/45f9e9c186ca06ad832235b482e1dfc15a7ef136.gifv'), auto;
}

textarea {font:15px ;letter-spacing:1px;}

a {
font-size:16px;
color:#f66907;
text-decoration:none;
}

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

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

/* ---------- Container ---------- */
.container {
width:100%;
max-width:650px;
background:#0a1647;
border-radius:16px;
border:3.5px double #2f53bf;
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 #2f53bf;
background:linear-gradient(90deg,#f16900,#d95f00); /*darker orange*/
border-radius:16px 16px 0 0;
box-sizing:border-box;}

.nav-links {
display:flex;
gap:6px;
flex-wrap:nowrap;
align-items:center;}

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

.nav-link.active { /*home button*/
background:#0a1647;
color:#ffbbcc;
border-color:#2f53bf;
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 #2f53bf;
background:#0a1647;
color:#ffbbcc;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
font-size:17px;}

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

.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 #2f53bf;
background:#2f53bf;}

.addr-icon {
width:32px;
height:28px;
background:#0a1647;
border:1px solid #2f53bf;
display:flex;
align-items:center;
justify-content:center;
border-radius:6px;
color:#ffbbcc;}

.addr-field {
flex:1;
display:flex;
align-items:center;
gap:5px;
background:#0a1647;
border:1px solid #2f53bf;
padding:5px;
border-radius:12px;}

.addr-text {
letter-spacing:0px;
width:100%;
display:block;
border:none;
background:transparent;
font-size:17px;
color:#ffbbcc;
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 #2f53bf;
background:linear-gradient(180deg,#2f53bf,#0a1647);
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 #2f53bf;
background:linear-gradient(180deg,#2f53bf,#0a1647);
box-shadow: inset 0 0 5px rgba(0,0,0,0.02);}

/* boxes */
.box, .content-box, .scrollbox {
padding:5px;
border-radius:10px;
background:#0a1647;
border:1px dashed #fff;
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:19px; color:#f66907; border-bottom:1px dashed #f66907; margin-bottom:5px; }
.side-title { color:#f66907; border-bottom:1px dashed #f66907; margin-bottom:5px; }

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

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

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

.profile-pic {
width:70px;
height:70px;
border:1px solid #2f53bf;
border-radius:50%;
background:url(https://64.media.tumblr.com/87e0d02253e6ce210578905d390cfc67/935b0c50d2f98656-ed/s2048x3072/808d96ee455fd197b0aae800d0691924b85404f6.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 #f66907; }

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

.social-title {
font-size:16px;
font-weight:600;
color:#ffbbcc;
border-bottom:1px dotted #fff;
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 #2f53bf;
text-align:center;
background:#2f53bf;
border-radius:0 0 12px 12px;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
color: #f66907;
}

/* 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; }
}

.marquee {background:#4d73e5;color:#ffbbcc;font:14px 'silkscreen';padding:2px;}

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