The Art Of Not Asking Why

    /* Global changes are defined in variables in TinyTheme. These are the theme's default colors, of which we have two sets: light and dark. Instaed of calling a color over and over, we call "link" or "link-visted," etc. Matt, the creator of TinyTheme, explains this here: https://mattlangford.com/2023/06/07/how-to-change.html
    
    At this point, I have both the same more or less - I only have one theme. I have dark/light theme listed as a todo later on. */
    
    
    /* Light Mode */
    :root {
            --text: #666;
            --link: #666;
            --link-visited: #666;
            --link-hover: #8b0000;
            --accent1: #8b0000;
            --accent2: #666666;
            --background: #eee8d5;
            --code: #e3e3e3;
            --button-text: #ffffff;
            --blockquote: #fffee0;
            --note: #FFFF00;
    }
    
    /* Dark mode */
    @media (prefers-color-scheme: dark) {
        :root {
            --text: #666;
            --link: #666;
            --link-visited: #666;
            --link-hover: #8b0000;
            --accent1: #8b0000;
            --accent2: #f8f8f2;
            --background: #eee8d5;
            --code: ##e3e3e3;
            --button-text: #282a36;
            --blockquote: #fffee0;
            --note: #44475a;
        }
    }
    
    
    /* Using the globals colors above, the links' color for the blog are defined here. The links change to crimson red (also defined above) when hovering over them, and keeping the underline, making them easier to identify as links */
    
    a, a:visited {
        color: var(--link);
        text-decoration: underline; 
    
    }
    
    a:hover {
        color: var(--link-hover);
        text-decoration: underline; 
    }
    
    
    /* Change the color of h2 link posts and dates to the red-crimson I use. Because the overall rule for links asks for an underline when hovering over them, I have to specify here that for post titles, I don't want an underline.  */
    
    h2 a, h2 a:hover, a.post-date.u-url {
        color: #8b0000;
        text-decoration: none;
    }
    
    /* Change the font and the color of the title to Righteous font, and the color crimson red. The font requires Google Fonts, with additional code in microhook-head.html */
    
    header h1 a, header h1 a:visited {
        font-family: Righteous;
        color: #8b0000;
    }
    
    
    /* To change what the tagline says, we need to use a Microhook: layouts/partials/microhook-description.html. Because by default this description is the same color and font as the text of the blog, I had to create a class here, description. It is also defined in the above microhook.
    
    The CSS then specifies the color (brown like the owl's bronw), the font (from Google fonts, imported in microhook-head.html), the size, and also makes it italic. */
    
    p.description  {
        color: #a5846e;
        font-family: "Caveat", cursive;
        font-size: 1.5em;
        font-style: italic;
    }
    
    /* Change the nav bar boxes links color to my crimson red, and when hovering over them, change the background to gray and the text to the beige color of the blog */
    
    nav a, nav a:visited {
        color: #8b0000;
        border-color: #8b0000;
    }
    
    nav a:hover {
        background-color: #666;
        border-color: #8b0000;
        color: #eee8d5;
    }
    
    
    /* a border for images in posts only */
    
    .e-content img {
        border: .2em double #666;
    }
    
    /* Make the avatar float to the left of the text. TinyTheme uses microhook-profile-photo.html for the image's URL. As well, a bit margin between the avatar and the site's title. */
    
    .site-header img {
        float: left;
        margin: 1em;
    }