* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*theme colors*/

:root {
  /* Light theme colors */
  --color-sidebar-bg: #ffeb7a;
  --color-sidebar-tab: #fff2a7;
  --color-sidebar-border: #cf8d1c;
  --color-sidebar-link: #ffe137;
  --color-sidebar-link-hr: #f9c700;
  --color-sidebar-link-selected: #daa520;
  --color-primary-text: #a80000;
  --color-secondary-text: #a80000;
  --color-text-tertiary: #800000;
  --color-book-select: #a80000;
  --color-slider-thumb-bg: #f5f5f5;
  --color-slider-thumb-txt: #000000;
  --color-slider-thumb-br: #c2c5c5;
  --color-slider-primary: #b3b7b8;
  --color-slider-secondary: #dbe0e1;
  --color-content-bg: #ffffff;
}

body.dark-theme {
  /* Dark theme colors */
  --color-sidebar-bg: #1f2873;
  --color-sidebar-tab: #0d134c;
  --color-sidebar-border: #4169e1;
  --color-sidebar-link: #000067;
  --color-sidebar-link-hr: #000086;
  --color-sidebar-link-selected: #0b0ba8;
  --color-primary-text: #4169e1;
  --color-secondary-text: #7d9dfc;
  --color-text-tertiary: #678cf8;
  --color-book-select: #4970e6;
  --color-slider-thumb-bg: #173552;
  --color-slider-thumb-txt: #020c15;
  --color-slider-thumb-br: #0a1d2e;
  --color-slider-primary: #0a1e31;
  --color-slider-secondary: #132b41;
  --color-content-bg: #020c15;
}

body {
    display: flex;
    height: 100vh;
    overflow-y: hidden;
    background: var(--color-content-bg);
}

#sidebar {
    height: 100vh;
    width: 235px;
    display: flex;
    transition: width 500ms;
    background: rgba(255, 0, 0, 0);
}

#sidebar.collapsed {
    width: 80px;
}

#sidebar #sidebar-toggle {
    z-index: 3;
    height: 100vh;
    width: 25px;
    left: 235px;
    font-size: 20px;
    position: absolute;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-text);
    background: var(--color-sidebar-tab);
    transition: opacity 500ms ease,left 500ms;
}

#sidebar.collapsed  #sidebar-toggle {
   left: 80px;
}

nav:not(:hover) #sidebar-toggle {
    opacity: 0;
}

#sidebar.collapsed #sidebar-toggle i {
    transform: rotate(180deg);
}

#sidebar-content {
    z-index: 1;
    height: 100vh;
    width: 235px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background: var(--color-sidebar-bg);
    border-right: 3px solid var(--color-sidebar-border);
    transition: width 500ms;
}

#sidebar.collapsed #sidebar-content {
    width: 80px;
}

#sidebar-content #menu-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    list-style: none;
}

#menu-list .menu-link {
    height: 64px;
    text-decoration: none;
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding: 20px 0 20px 25px;
    border-bottom: 3px solid var(--color-sidebar-border);
    font-family: Rubik;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary-text);
    background: var(--color-sidebar-link);
}

#sidebar.collapsed .menu-link .menu-label {
    pointer-events: none;
    translate: 15px;
    transition: translate 600ms;
}

.menu-link i {
    font-size: 24px;
    margin-right: 20px;
}

#menu-list .menu-link:hover {
    color: var(--color-secondary-text);
    background: var(--color-sidebar-link-hr);
}

#menu-list .menu-link.active {
    color: var(--color-secondary-text);
    background: var(--color-sidebar-link-selected);
}

.btn {
    border: none;
    background: none;
    color: var(--color-secondary-text);
}

.btn:hover {
    color: var(--color-text-tertiary);
}

#homebtn {
    z-index: 3;
    position: absolute;
    font-size: 45px;
    top: 10px;   
    translate: 270px;
    transition: translate 500ms;
}

#homebtn.collapsed {
    translate: 115px;
}

#themebtn {
    z-index: 3;
    position: absolute;
    font-size: 45px;
    top: 10px;   
    right: 10px;
}

/*open icon when light theme*/
#themebtn .light {
  display: inline;
}

#themebtn .dark {
  display: none;
}

/*closed icon when dark theme*/
body.dark-theme #themebtn .dark {
  display: inline;
}

body.dark-theme #themebtn .light {
  display: none;
}

main {
    z-index: 2;
    width: 100%;
    height: 100vh;
    transition: width 500ms; 
    background: var(--color-content-bg);
}

#sidebar.collapsed main {
    width: calc(100% + 155px);
}

#mainframe {
    width: 100%;
    height: 100vh;
    border: none;
}