:root{
  --bg:#0f1724;
  --surface:#0b1220;
  --accent:#7dd3fc;
  --accent-2:#60a5fa;
  --muted:#8D99AE;
  --text:#EDF2F4;
  --max-width:900px;
  --sidebar-width:33%;
  --radius:10px;
  --gap:1.25rem;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* smooth scrolling and reset */
html {
  height:100%;
  margin:0;
  overflow-y:auto;
  max-height: 100%;
  scroll-behavior: smooth;
}

body {
  display: flex;
  font-family: inherit;
  align-items: flex-start;
  text-align: left;
  height:100%;
  padding:0;
  margin: 0;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

header {
  background-color: var(--muted);
  color: var(--text);
  text-align: left;
  display: flex;
  flex: 0 0 auto;
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100%;
  justify-content: flex-start;
  padding:2rem;
  box-sizing: border-box;
  overflow-y: auto;
  border-right:1px solid rgba(255,255,255,0.03);
}

div {
    overflow-y: auto;
    height: 100%;
}
header .header_content {
    background-color: var(--muted);
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    padding-top: 33%;
}

main{
  flex:1;
  overflow-y:auto;
  padding:2.5rem;
  margin-left: var(--sidebar-width);
  box-sizing:border-box;
  max-width:var(--max-width);
}

.icon{
    height:50px;
    width:50px;
    position: relative;
    max-height: 100%;
    overflow-y:hidden;
    overflow-x:hidden;
    background-color: var(--text);
}

.content {
    /* Adjust the margin as needed */
    padding: 20px;
    /* Add padding to create space */
    background-color: var(--bg);
    /* Set background color */
}

.circular_image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    clip-path: circle(50%);
    object-fit: cover;
}

nav {
    padding: 0px;
    color: #fff;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    margin-right: 10px;
}

nav a {
    text-decoration: none;
    color: #fff;
}

footer {
    width: 100%;
    text-align: center;
    color: darkgrey;
    padding: 10px;
    padding-left: 10px;
    padding-top: 10px;
    border-top: 1px solid darkgray;
    margin: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    bottom:0;
}

.surface{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:var(--radius);
  padding:1rem;
  box-shadow:0 6px 18px rgba(2,6,23,0.6);
  border:1px solid rgba(255,255,255,0.03);
}

a{
  color:var(--accent);
  text-decoration:none;
  transition: color .18s ease, transform .14s ease;
}

a:hover{ color:var(--accent-2); transform:translateY(-1px); }

.btn{
  display:inline-block;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#032;
  padding:.55rem .9rem;
  border-radius:8px;
  font-weight:600;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(96,165,250,0.12);
  transition: transform .14s ease, box-shadow .14s ease, opacity .12s ease;
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(96,165,250,0.14); opacity:0.98; }

.profile-pic{
  width:100%;
  max-width:220px;
  border-radius:12px;
  box-shadow:0 8px 32px rgba(2,6,23,0.6);
  display:block;
}

/* responsive fallback */
@media (max-width:900px){
  header{ position:relative; width:100%; height:auto; border-right:none; padding:1rem; }
  main{ margin-left:0; padding:1rem; }
}