@font-face {
    font-family: 'Lexend';
    src: url('https://cdn.schulminator.com/font/lexend-variable.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}
h1, h2, h3, h4, h5, h6 {
    color: #262626;
    font-family: 'Lexend', system-ui, sans-serif;
    font-weight: 500;
}
.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;
}

/* 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;
}}  


:root {
  --scrollbar-size: 7px;
  --thumb-idle: rgba(0, 0, 0, 0.24);
  --thumb-hover: rgba(0, 0, 0, 0.36);
  --thumb-active: rgba(0, 0, 0, 0.50);
  --track: transparent;
  --corner: transparent;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--thumb-idle) var(--track);
}

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

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

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

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

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

::-webkit-scrollbar-corner {
  background: var(--corner);
}

.icon-mask {
  -webkit-mask: var(--mask-url) center / contain no-repeat;
  mask: var(--mask-url) center / contain no-repeat;
}