:root {

  --sb-track-color: transparent;
  --sb-thumb-color: #ccc;
  --sb-thumb-hover: #b3b3b3;
  --sb-html-track-color: rgb(250,250,250);
  color-scheme: light;

  --bulma-primary-h: 198deg;
  --bulma-primary-s: 100%;
  --bulma-primary-l: 56%;
  --bulma-link-h: 198deg;
  --bulma-scheme-h: 198deg;

  --fore-h1-color:rgb(10,10,10);
  --frame-icon-color:hsl(var(--bulma-primary-h),5%,50%);
  --text-color-frist:hsl(var(--bulma-primary-h),5%,50%);
  --text-color-second:hsl(var(--bulma-primary-h),5%,50%);  
  --text-color-third:hsl(var(--bulma-primary-h),5%,70%);
}

@font-face {
  font-family: 'LexendDeca-Bold';
  src: url('/webfonts/LexendDeca-Bold.ttf') format('woff2');
}
@font-face {
  font-family: 'Jua-Regular';
  src: url('/webfonts/Jua-Regular.ttf') format('woff2');
}
@media (prefers-color-scheme: dark) {
  :root {
    /* Update CSS variables */

    --sb-track-color: transparent;
    --sb-thumb-color: #2b2f30;
    --sb-thumb-hover: #454a4b;
    --sb-html-track-color: rgb(26, 28, 29);
    color-scheme: dark;

    --fore-h1-color:rgb(10,10,10);
    --frame-icon-color:hsl(var(--bulma-primary-h),10%,40%);
    --text-color-frist:hsl(var(--bulma-primary-h),5%,50%);
    --text-color-second:hsl(var(--bulma-primary-h),5%,50%);
    --text-color-third:hsl(var(--bulma-primary-h),5%,30%);    
  }  
}

.astro-code,
.astro-code span {
  color: var(--shiki-light) !important;
  background-color: var(--bulma-pre-background);
  /* Optional, if you also want font styles */
  font-style: var(--shiki-light-font-style) !important;
  font-weight: var(--shiki-light-font-weight) !important;
  text-decoration: var(--shiki-light-text-decoration) !important;
}

[data-theme=dark],
.theme-dark {
    /* Update CSS variables */
    --sb-track-color: transparent;
    --sb-thumb-color: #2b2f30;
    --sb-thumb-hover: #454a4b;
    --sb-html-track-color: rgb(26, 28, 29);
    color-scheme: dark;
    
    --fore-h1-color:rgb(250,250,250);
    --frame-icon-color:hsl(var(--bulma-primary-h),10%,40%);
    --text-color-third:hsl(var(--bulma-primary-h),5%,30%); 
}

[data-theme=dark] .astro-code,
[data-theme=dark] .astro-code span,
.theme-dark .astro-code,
.theme-dark .astro-code span {
    color: var(--shiki-dark) !important;
    /* Optional, if you also want font styles */
    font-style: var(--shiki-dark-font-style) !important;
    font-weight: var(--shiki-dark-font-weight) !important;
    text-decoration: var(--shiki-dark-text-decoration) !important;
}

:root[style="color-scheme: dark;"],
:root[class="dark"]  {        
    --sb-track-color: transparent;
    --sb-thumb-color: #2b2f30;
    --sb-thumb-hover: #454a4b;
    --sb-html-track-color: rgb(26, 28, 29);
    color-scheme: dark;    

    --fore-h1-color:rgb(250,250,250);
    --frame-icon-color:hsl(var(--bulma-primary-h),10%,40%);
    --text-color-third:hsl(var(--bulma-primary-h),5%,30%);   
}

:root[style="color-scheme: dark;"] .astro-code,
:root[style="color-scheme: dark;"] .astro-code span,
:root[class="dark"] .astro-code,
:root[class="dark"] .astro-code span {
    color: var(--shiki-dark) !important;
    /* Optional, if you also want font styles */
    font-style: var(--shiki-dark-font-style) !important;
    font-weight: var(--shiki-dark-font-weight) !important;
    text-decoration: var(--shiki-dark-text-decoration) !important;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
} 

::-webkit-scrollbar-track {
    background-color: var(--sb-track-color);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--sb-thumb-color);
    border-radius: 10px; 
    border: 2px solid var(--sb-track-color);
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--sb-thumb-hover);
} 

::selection {
  color: var(--bulma-primary);
}

input[type="checkbox"],input[type="radio"] {
  accent-color: var(--bulma-primary);
}
.nav-top { 
  padding: 0.5rem;
}
.nav-top .navbar-item{
  border-radius: var(--bulma-burger-border-radius);
  padding: 0.35rem 1rem;
}
.brand-title {
  font-family: "Jua-Regular";
  font-weight: 500;
  font-size:1.2rem;
}
a.dropdown-item {
  display: inline-flex;
  align-items: center;
}
.navbar-icons {
  display: flex;
  justify-content: center;
  align-items: center;
}

.adminui-footer{
    --bulma-footer-background-color:transparent;
    --bulma-footer-padding:1.4rem 1rem;
    font-size: 0.875rem;
    text-align: center;
}

.has-text-third{
  color:var(--text-color-third);
}
.theme-button>span{  
  overflow: hidden;
}
.theme-button svg {
  position: absolute;
  opacity: 0;
  transform: scale(0.5);
  transform-origin: 50% 50%;
  transition: all 0.3s;
}
.theme-button svg.show {
  opacity: 1;
  transform: scale(1);
}
hr.btn-hr {
  margin:0.65rem 0px 0.35rem 0px;
  height: 1px;
}

@media screen and (max-width: 1023px) {
    #navbarExpmenu{
      position: absolute;      
      right: 1rem;
      padding: 0.5rem;
      align-items: stretch;
      background-color: var(--bulma-scheme-main);
      border-color: var(--bulma-border);
      border-radius: 1em;
      border-style: solid;
      border-width: 1px;
      box-shadow: var(--bulma-shadow);
      flex-direction: column;
    }
}