:root {
  --custom-container-width: calc(1320px + 2rem);
  --bgColor-default: #F7F7FC;
  --bgColor-inset: #ffffff;
  --orange-10: #FFEFE5;
  --orange-20: #FFD2B7;
  --orange-30: #FFB58A;
  --orange-40: #FF985C;
  --orange-50: #FF7C2E;
  --orange-60: #FF5F00;
  --orange-70: #D65000;
  --orange-80: #AD4100;
  --orange-90: #853100;
  --orange-100: #5C2200;
  --accent-color: var(--orange-50);
}

html.dark {
  --bgColor-default: #302721;
  --bgColor-inset: #3d322a;
}


body,
#portal,
#portal main {
  background-color: var(--bgColor-default);
}

/* scrollbar */
@supports (-moz-appearance: none) {
  :root, html, body {
    --scrollbar-color: var(--accent-color);
    scrollbar-color: var(--scrollbar-color, currentColor) var(--bgColor-default);
  }
}

::-webkit-scrollbar-track {
  background-color: inherit;
}

::-webkit-scrollbar {
  width: var(--scrollbar-width, 0.375rem);
  height: var(--scrollbar-height, 0.5rem);
  background-color: inherit;
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-color, currentColor);
  border: none;
  transition: background-color 0.25s ease-in-out;
}


/* DESKTOP HEADER */
@media (min-width: 640px) {
  #portal main header {
    background-color: transparent;
    box-shadow: none;
    
    /**/
    
    padding: 1.5rem 1rem 0 1rem;
    background-image: linear-gradient(to bottom, var(--bgColor-default), transparent);
  }
  
  #portal main header nav.hidden.sm\:flex {
    max-width: calc(var(--custom-container-width) - 4rem) !important;
    
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 1.5rem;
    box-shadow: 0 3px 16px 0 rgba(135, 135, 150, .08);
    background-color: var(--bgColor-inset);
  }
  
  #portal main header nav.hidden.sm\:flex > div {
    padding: 0 !important;
  }
  
  #portal main header nav.hidden.sm\:flex > div > a {
    width: 12rem !important;
    height: 3rem !important;
    padding: 0.5rem 0 !important;
    
    background-image: url('data:image/png;base64,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');
    background-position: 0.25rem center;
    background-size: 179px 32px;
    background-repeat: no-repeat;
  }
  
  #portal main header nav.hidden.sm\:flex > div > a > * {
    opacity: 0 !important;
    font-size: 0 !important;
  }
}


/* MOBILE HEADER */
@media (max-width: 640px) {
  #portal main header {
    background-color: transparent;
    box-shadow: none;
    
    /**/
    
    padding: 0;
  }
  
  #portal main header nav.flex.sm\:hidden {
    max-width: var(--custom-container-width) !important;
    
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background-color: var(--bgColor-inset);
    box-shadow: 0 8px 8px 0 rgba(135, 135, 150, .04);
  }
  
  #portal main header nav.flex.sm\:hidden > div {
    padding: 0 !important;
  }
  
  #portal main header nav.flex.sm\:hidden > div > a {
    width: 12rem !important;
    height: 3rem !important;
    padding: 0.5rem 0.25rem !important;
  }
  
  #portal main header nav.flex.sm\:hidden > div > a > img {
    height: 2rem !important;
  }
  
  /* burger */
  #portal main header nav.flex.sm\:hidden label[for='mobile-menu-toggle'] {
    width: 4.5rem;
    height: 3rem;
    background-color: var(--orange-10);
    padding: 0.75rem 1.5rem;
    border-radius: 2rem;
  }
  
  #portal main header nav.flex.sm\:hidden label[for='mobile-menu-toggle']:hover {
    background-color: var(--orange-20);
  }
  
  #portal main header nav.flex.sm\:hidden label[for='mobile-menu-toggle']:active {
    background-color: var(--orange-30);
  }
  
  #portal main header nav.flex.sm\:hidden label[for='mobile-menu-toggle'] svg {
    color: #D65000 !important;
  }
  
  /* menu */
  #portal main header nav.flex.sm\:hidden div.fixed > div.w-full > div.flex-col > div.py-5 {
    padding: 0.5rem 1rem !important;
  }
}

select[data-portal-slug] {
  background-color: transparent !important;
}

/* PORTAL */
#portal-bg {
  background: none !important;
  box-shadow: none !important; /* kinda inner */
}

#portal-bg-gradient {
  background: none !important;
}

.max-w-5xl {
  max-width: var(--custom-container-width) !important;
}

/* CARDS */
section.lg\:container {
  max-width: unset !important;
}

#portal main div div section > div,
#category-block {
  --lz-card-padding-x: 1.5rem;
  --lz-card-padding-y: 3rem;
  padding: var(--lz-card-padding-y) var(--lz-card-padding-x);
  gap: 1.5rem;
  border-radius: 1.5rem;
  box-shadow: 0 3px 1rem 0 rgba(135, 135, 150, .08);
  background: var(--bgColor-inset);
  border: none !important;
}

@media (max-width: 992px) {
  #portal main div div section > div,
  #category-block {
    --lz-card-padding-x: .75rem;
    --lz-card-padding-y: 1.5rem;
    border-radius: 1rem;
  }
}

#category-block {
  --lz-card-padding-x: .75rem;
  --lz-card-padding-y: 1.5rem;
  border-radius: 1rem;
}


/* ARTICLE */
.article-content {
  /* .max-w-3xl */
  max-width: calc(var(--custom-container-width) - 24rem) !important;
}

#cw-hc-toc nav ol li.border-slate-400 {
  border-color: var(--orange-70) !important;
}

h1 {
  font-weight: 800 !important;
  color: var(--orange-100) !important;
  font-size: 4.5rem !important;
  line-height: 1 !important;;
}

html.dark h1 {
  color: var(--orange-20) !important;
}

@media (max-width: 1400px) {
  h1 {
    font-size: 3.5rem !important;
  }
}

@media (max-width: 992px) {
  h1 {
    font-size: 2.375rem !important;
  }
}