@font-face {
    font-family: 'Lexend';
    src: url('https://seoniocdn.b-cdn.net/font/lexend-variable.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}
h1, h2, h3, h4, h5, h6 {
    color: #f4f5f6;
    font-family: 'Lexend', system-ui, sans-serif;
    font-weight: 600;
}
.lexend { font-family: 'Lexend', system-ui, sans-serif; }

.mytab { color: gray; border-bottom: 2px solid transparent; }
.mytab.active { color: #689BEE; border-bottom-color: #689BEE; }

.mypattern {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="%232e2e2e" stroke-opacity="0.5" stroke-width="1"/></svg>');
  background-size: 60px 60px;
  background-repeat: repeat;
}

body {
    background-color: #080809;
}
.mycard {
    background-color: #0F1011;
    border: solid #1B1C1D;
    border-radius: 20px;
}
.mycard:hover {
    background-color: #161718;
}
.mycardelement {
    background-color: #141818;
    border-radius: 12px;
}
.mydivider {
    border-color: #23252A;
}
.mybuttonlight {
    background-color: #e6e6e6;
    color: #080809;
    border-radius: 20px;
    font-weight: 500;
}
.mybuttonlight:hover {
    background-color: #ffffff;
}
.mybuttongray {
    background-color: #28282c;
    color: #f4f5f6;
    border: solid #3e3e45;
    border-radius: 20px;
    font-weight: 500;
}
.mybuttongray:hover {
    background-color: #323237;
}
.mybuttontrans {
    background-color: #080809;
    color: #f4f5f6;
    font-weight: 500;
    border: solid #3e3e45;
    border-radius: 20px;
}
.mybuttontrans:hover {
    background-color: #323237;
}
.mytexthead {
    color: #f4f5f6;
}
.mytexprimary {
    color: #c2c2c2;
}
.mytextsecondary {
    color: #9fa0a3;
}
.myaccent {
    color: #689BEE;
}
.myaccent:hover {
    color: #1FA5FF;
}
.mylink {
    color: #849BC5;
}
.mylink:hover {
    color: #4474D0;
}

/* View Transition API styles */
@view-transition {
    navigation: auto;
}
::view-transition-group(root),
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.25s;
    animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(root),
    ::view-transition-old(root),
    ::view-transition-new(root) {
    animation: none !important;
}}  


/* scrollbar styles */
:root {
    --scrollbar-size: 6px;
    --thumb-idle:   rgba(255, 255, 255, 0.12);  /* Slightly higher for body */
    --thumb-hover:  rgba(255, 255, 255, 0.25);
    --thumb-active: rgba(255, 255, 255, 0.40);
    --track-idle:   transparent;
    --track-hover:  rgba(255, 255, 255, 0.04);
  }
        
/* Firefox - Global */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--thumb-idle) var(--track-idle);
}

*:hover {
  scrollbar-color: var(--thumb-hover) var(--track-hover);
}

/* WebKit - Global */
::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

::-webkit-scrollbar-track {
  background: var(--track-idle);
}

::-webkit-scrollbar-thumb {
  background: var(--thumb-idle);
  border-radius: 999px;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

*:hover::-webkit-scrollbar-track {
  background: var(--track-hover);
}

*:hover::-webkit-scrollbar-thumb {
  background: var(--thumb-hover);
}

*:hover::-webkit-scrollbar-thumb:hover {
  background: var(--thumb-active);
}

::-webkit-scrollbar-thumb:active {
  background: var(--thumb-active);
}