@import "https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap";@import "https://fonts.maateen.me/solaiman-lipi/font.css";*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#eee;--text:black;--border:black;--mobile-width:600px;--sans-serif:"Sora", "SolaimanLipi", sans-serif}:root.dark{--bg:#222831;--text:white}body{color:var(--text);background-color:var(--bg);font-family:var(--sans-serif)}#sidebar{background-color:var(--bg);border-right:1px solid var(--border);grid-template-rows:auto 1fr auto;min-width:250px;height:100dvh;padding:16px;display:grid;position:sticky;top:0;left:0}@media screen and (width<768px){#sidebar{height:auto;position:sticky;bottom:0;left:0;right:0}}#sidebar nav ul{flex-direction:column;gap:16px;list-style-type:none;display:flex}#sidebar nav ul a{background-color:gray;border-radius:4px;align-items:center;gap:8px;padding:8px 16px;text-decoration:none;display:flex}#sidebar nav svg{width:auto;height:24px}#sidebar a.active{background-color:pink;font-weight:700}#sidebar .user{grid-template-columns:auto 1fr;place-items:center;display:grid}#sidebar .user .user-img{border:1px solid var(--border);background:url(https://placehold.co/500x700) 50%/cover no-repeat;border-radius:50%;width:32px;height:32px}#sidebar .user .user-name{font-weight:700}#sidebar .user .user-batch{font-size:.75rem}#root{grid-template-columns:auto 1fr;display:grid}main{min-height:100dvh;padding:32px}@media screen and (width<768px){#root{flex-direction:column-reverse;display:flex}}