@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,500;1,500&family=Source+Serif+4:ital,opsz@0,8..60;1,8..60&display=auto');

/* Latest breakpoint tuning: 2025-11-07 */
/* Reference: https://docs.microsoft.com/en-us/windows/apps/design/layout/screen-sizes-and-breakpoints-for-responsive-design */

/* Breakpoint: small screen */

@media all and (max-width: 640px) { 
    body { padding: 1% 2% 2% 1%; }    
    article { padding: 2% 0% 2% 0%; }
    h1 { font-size: 160%; line-height: 130%; }
    h1 span.dedication { font-size: 81%; padding: 0% 0% 0% 1%; }
    nav p { font-size: 130%; line-height: 150%; word-spacing: 16px; }
    nav img { width: 24px; height: auto; padding-right: 5%; }
    p { font-size: 130%; line-height: 150%; }
}

/* Breakpoint: medium screen */

@media all and (min-width: 641px) and (max-width: 1007px) {
    body { padding: 1% 5% 2% 5%; }
    article { padding: 2% 0% 2% 0%; }
    h1 { font-size: 160%; line-height: 130%; }
    h1 span.dedication { font-size: 81%; padding: 0% 0% 0% 1%; }
    nav p { font-size: 130%; line-height: 150%; word-spacing: 20px; }
    nav img { width: 28px; height: auto; padding-right: 3%; }
    p { font-size: 130%; line-height: 150%; }
}

/* Breakpoint: large screen */

@media all and (min-width: 1008px) {
    body { padding: 1% 18% 2% 15%; }
    article { padding: 2% 0% 3% 0%; }
    h1 { font-size: 180%; line-height: 130%; }
    h1 span.dedication { font-size: 75%; padding: 0% 0% 0% 1%; }
    nav p { font-size: 150%; line-height: 150%; word-spacing: 24px; }
    nav img { width: 28px; height: auto; padding-right: 1%; }
    p { font-size: 150%; line-height: 150%; }
}

/* Not really affected by screen sizes */

    body { color: #89c9b8; background-color: #092532; }

    h1 { font-family: 'Source Serif 4', serif; font-style: italic; font-weight: 200; }
    pre { font-family: 'Source Code Pro', monospace; font-size: 130%; line-height: 150%; }
    pre span.part { font-family: 'Source Serif 4', serif; font-size: 113%; font-weight: 600; }
    pre span.stamp { font-family: 'Source Serif 4', serif; font-size: 97%; font-weight: 600; }
    pre span.time { font-family: 'Source Code Pro', monospace; font-size: 76%; line-height: 80%; }
 
    a:link { text-decoration: none; color: #89c9b8; background-color: #092532; }
    a:visited { text-decoration: none; color: #89c9b8; background-color: #092532; }
    a:hover { text-decoration: none; color: #092532; background-color: #89c9b8; }
    
    nav a:link { font-family: 'Source Serif 4', serif; text-decoration: none; color: #c7e2b2; background-color: #092532; }
    nav a:visited { font-family: 'Source Serif 4', serif; text-decoration: none; color: #c7e2b2; background-color: #092532; }
    nav a:hover { font-family: 'Source Serif 4', serif; text-decoration: none; color: #092532; background-color: #89c9b8; }
    nav img { color: #c7e2b2; background-color: #092532; }
    
    p { font-family: 'Source Serif 4', serif; }
    
    p span.inherit a:link { text-decoration: none; color: #c7e2b2; background-color: #092532; }
    p span.inherit a:visited { text-decoration: none; color: #c7e2b2; background-color: #092532; }
    p span.inherit a:hover { text-decoration: none; color: #092532; background-color: #89c9b8; }
    
    p span.url { font-family: 'Source Code Pro', monospace; font-size: 85%; line-height: 100%; }
    
    p span.list { font-family: 'Source Serif 4', serif; font-size: 90%; line-height: 150%; }