/* Base Theme (Dark by default) */
:root {
  --bg-color: rgb(23 23 23);
  --text-color: #ffffff;
  --border-color: #ffffff24;
  --icon-bg: #222;
  --menu-text: #ccc;
  --button-text: #ffffff;

  /* Code Block (Dark) */
  --code-bg: #1e1e1e;
  --code-text: #5293c4;
}

/* Light Theme */
:root[data-theme="light"] {
  --bg-color: rgb(255 255 255);
  --text-color: #000000;
  --border-color: #00000020;
  --icon-bg: #e0e0e0;
  --menu-text: #555;
  --button-text: #ffffff;

  /* Code Block (Light) */
  --code-bg: #f5f5f5;
  --code-text: #e7552b;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: var(--bg-color);
  color: var(--text-color);
}

a {
  color: #7cb444;
}

::placeholder {
  color: var(--menu-text) !important;
}

/* Default: Dark theme shows Moon */
#moon-icon {
  display: none;
}

:root[data-theme="light"] #moon-icon {
  display: inline;
}

:root[data-theme="light"] #sun-icon {
  display: none;
}

.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}

.container {
  width: calc(100% - 332px);
  margin-left: 312px;
  padding: 10px;
  padding-top: 10px;
  /* padding-top: 70px; */
  overflow: hidden;
}

.page {
  /* padding: 20px; */
  padding-top: 0px;
  display: flex;
  flex-direction: column;
}

.page .title {
  padding-left: 30px;
  color: var(--text-color);
  width: 100%;
  border-bottom: 1px solid var(--border-color);
  position: fixed;
  top: 0;
  left: 312px;
  background-color: var(--bg-color);
}

.page .title h2 {
  margin: 30px;
  font-size: 16px;
  font-weight: 300;
  margin-left: 0px;
}

.badge {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

/* Tablet view (max-width 1024px) */
@media (max-width: 1024px) {
  .container {
    width: calc(100% - 61px);
    /* adjust as needed */
    margin-left: 61px;
    /* adjust as needed */
    padding: 0px;
    padding-top: 10px;
  }

  .page .title {
    left: 61px;
  }
}

/* Mobile view (max-width 768px) */
@media (max-width: 768px) {
  .container {
    width: calc(100% - 61px);
    /* adjust as needed */
    margin-left: 61px;
    /* adjust as needed */
    padding: 0px;
    padding-top: 10px;
  }

  .page .title {
    left: 61px;
  }
}