:root {
    --bg-color: #fff;
    --text-color: #000;
    --link-color: #0066cc;       
    --link-hover-color: #004c99;  
    --link-visited-color: #6a329f; 
}

@media (prefers-color-scheme: dark) {
:root {
    --bg-color: #242424;
    --text-color: #e6e6e6;
    --link-color: #66b3ff;      
    --link-hover-color: #99ccff;  
    --link-visited-color: #c3a5e0; 
}
}
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s ease, color 0.3s ease;
}


a {
color: var(--link-color);
}


a:visited {
color: var(--link-visited-color);
}

a.notavailable {
    text-decoration: line-through;
    pointer-events: none;
    cursor:not-allowed;
    color: var(--text-color);
  }

@font-face {
    font-family: 'Cascadia Code';
    src: url('fonts/CascadiaCode.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Cascadia Code';
    src: url('fonts/CascadiaCodeItalic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
}

pre { font-family: 'Cascadia Code', monospace; line-height: 1.1;font-size:13px;  max-width: 70ch; white-space: pre-wrap; }

#header {
    display: inline-block;
}

.disabled-link {
    pointer-events: none; 
    color: #888; 
    text-decoration:line-through; 
    cursor: not-allowed;
}

img {
    display:inline-block;
    width: 100%;
    height: auto;
}