/* -------------------------------------------------
   yes grok made the mobile responsive fiz to my css
   yes i hate writing css so i prompt grokius maximus
   ------------------------------------------------- */
@font-face {
    font-family: "Geist";
    src: url("Geist.ttf");
}

/* -------------------------------------------------
   Global page defaults
   Catpuccin mocha colours!!!!!!!!!!!!!!!
   ------------------------------------------------- */
html, body {
    margin: 0;
    padding: 0;
    background-color: #191919;
    font-family: "Geist", monospace;
    color: #f0f0f0;
    line-height: 1.4;
    overflow-x: hidden;          /* never horizontal scroll */
}

/* -------------------------------------------------
   Containers
   ------------------------------------------------- */
.main, .dir, .blog {
    padding: 10px 20px;
    font-size: 18px;
}
.blog {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
}

/* -------------------------------------------------
   EVERY LINE IS NOW A SIMPLE STACK
   ------------------------------------------------- */
.headers {
    font-weight: bold;
    display: block;
    margin-bottom: 0.2em;        /* tiny space between label & value */
}

.element12,
.element {
    font-weight: bold;
    display: block;
    margin-left: 2ch;            /* consistent indentation like previously, but now it wraps properly */
    margin-bottom: 1em;          /* space between pairs */
}

h3 {
    margin: 1.5em 0 1em 0;
}

a { color: #8a98ac; text-decoration: none; }
a:visited { color: #8aacab; }
a:hover   { color: #8aacab; }

hr { 
    margin: 2rem 0; 
    border: 0; 
    border-top: 1px solid #393939; 
}
h2 { 
    color: white; 
    margin-left: 1rem;
    margin-bottom: 1rem; 
}
code { 
    color: #8aac8b; 
    padding: 0 .2em; 
}