/* General */
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Victor+Mono:ital,wght@0,100..700;1,100..700&display=swap');

/* Variables */
:root {
  --font-ui: Barlow,Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --font-prose: Barlow,Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --font-mono: "Victor Mono", "SF Mono",ui-monospace,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --bs-font-sans-serif: var(--font-ui);
  --bs-font-monospace: var(--font-mono);
  --bs-font-serif: var(--font-prose);
  --bs-secondary-bg: #f5f7fa;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding-top: 79px; /* Adjust this value based on the navbar height */
  font-family: 'Barlow', serif;
}

h1, body h2, body h3, body h4, body h5, h6 {
  font-family: 'Roboto Slab', 'Barlow', serif !important;
}

main {
  flex: 1 0 0;
  overflow: hidden;
}

/* Navbar */
.navbar {
  padding: .5rem 0rem;
  background-color: #fff !important;
  border-radius: 0px 0px 10px 10px;
  box-shadow: 0px 8px 8px -6px rgba(100, 100, 100, .5);
}
.navbar-nav {
  font-size: 16px;
  font-weight: 400;
  font-family: 'Helvetica', 'Arial', sans-serif;
}
.navbar .container-fluid {
  padding-right: 15px;
  padding-left: 15px;
}

.navbar-nav .nav-link {
  padding-right: 1rem !important;
  /* padding-left: calc(var(--bs-navbar-nav-link-padding-x) * 4) !important; */
  color: #555;
}

.navbar-nav .active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 12px;
  color: black;
}

.navbar-nav .nav-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 12px;
  color: #555;
}

.smart-scroll{
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}
.scrolled-down{
  transform:translateY(-100%); transition: all 0.3s ease-in-out;
}
.scrolled-up{
  transform:translateY(0); transition: all 0.3s ease-in-out;
}

.navbar-brand {
  font-size: 1.5rem;
  font-weight: 500;
  color: #555;
}

.navbar-brand img {
  height: 54px;
}

/* Footer */
.footer {
  background-color: #f8f9fa;
  padding: 2rem 0;
  border-top: 1px solid #e9ecef;
}

#toTopButton {
  outline: none;
  user-select: none;
  background-color: rgb(242, 242, 242);
  color: rgb(50, 50, 159);
  border: none;
  display: none;
  cursor: pointer;
  position: fixed;
  left: 20px;
  z-index: 99999;
  border-radius: 50%;
  box-shadow: rgba(100, 100, 100, 0.6) 0px 0px 20px;
  bottom: 44px;
  width: 60px;
  height: 60px;
  padding: 0px 20px;
}

#toTopButton:hover {
  background-color: rgb(255, 255, 255);
}

/* Sidebar */
.sl-flex.sl-overflow-y-auto.sl-flex-col.sl-sticky.sl-inset-y-0.sl-pt-8.sl-bg-canvas-100.sl-border-r {
	width: 300px;
	min-width: 300px;
	border-radius: 0 10px 10px 0;
  box-shadow: 8px 0px 8px -6px rgba(100, 100, 100, .5);
}

.sl-border-r {
  border: 1px transparent;
}

.sl-elements-api.sl-flex.sl-inset-0.sl-h-full>.sl-flex {
  margin-top: 0.7%;
  /* margin-left: 0.5%; */
}