/* This is the betterwebsites theme. This is a simple gohugo theme that I’ve been wanting to develop for some time. It doesn’t use a CSS framework but a smallish custom CSS file, uses a system font stack (and also defaults to load Atkinson Hyperlegible if the user has it installed on their system), contains no Javascript, utilizes bootstrap icons through SVG, respects dark vs light mode of the user, loads fast, and follows a minimalist/utilitarian/brutalist design. All while looking great and being responsive, supporting modern browsers. Importantly, it tries to follow a designed-to-last mentality. -Raven Winters */

/* Font stacks*/

:root {
  --sans-stack: 'Atkinson Hyperlegible', system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --mono-stack: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Mono", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Consolas", "Courier New", monospace;
}

/* Default, light-mode styling */

html {
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    margin-left: auto;
    margin-right: auto;
    padding: 1em;
    max-width: 600px;
    min-width: 0;
    width: 100%;
    height: auto;
    display: block;
    box-sizing: border-box;
    overflow-wrap: break-word;
    background-color: #f8f9fa;
    font-family: var(--sans-stack);
    line-height: 1.5;
}

header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
    border-bottom: 3px solid black;
    background: #f8f9fa;
    padding-left: 5px;
    padding-right: 1em;
    padding-bottom: 2px;
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

h1 {
    font-size: 2rem;
    }

h2 {
    font-size: 1.25rem;
    border-bottom: 1px solid black;
    }

h3 {
    font-size: 1rem;
    }

hr {
    margin-top: 1rem;
}

a { 
  color: #71a230 
  }

a:visited {
color: #c351cd
}

pre {
    border: 1px solid black;
    white-space: pre-wrap;
    padding: 1rem;
    border-radius: 3px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

dd > code,
dt > code,
li > code,
a > code,
p > code {
    color: white;
    background: black;
    border-radius: 3px;
    padding: 1px;
}

blockquote {
    border-left: 3px solid;
    padding-left: 1rem;
     }

table :is(td, th) {
    border: 1px solid black;
    padding: 0.3em;
    border-radius: 3px;
}

table {
    margin: auto;
    border: 3px solid black;
    border-radius: 5px;
    width: 100%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    font-size: 0.9em;
    line-height: 1.2em;
    text-align: left;
    }

figure {
    margin: 0;
    justify-self: center;
    }

figcaption p {
    margin-top: -0.5em;
    font-size: 0.75rem;
    text-align: right;
    }

img,
video {
    max-inline-size: 100%;
    block-size: auto;
    border-radius: 3px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    align-items: center;
    justify-content: center;
}

footer {
    text-align: left;
    font-family: var(--mono-stack);
    font-size: 0.75rem;
    }

/* Classes */

.name {
    font-size: 3em;
    margin-bottom: 0.25em;
    animation: 1.5s fadeInUp;
    text-align: center;
}

.pronouns {
    color: grey;
    text-align: center;
    font-family: var(--mono-stack);
    animation: 3.5s fadeInUp;
}

/* Home page bio and links */

.bio {
    padding: 1em;
    line-height: 2em;
}

.weblinks {
    list-style: none;
    line-height: 1.5;
    font-size: 1.2em;
    padding-left: 0;
}

.weblinks-title {
    padding-top: 1em;
    }
    
.weblinks li {
    margin-top: 0.5rem;
    Padding-top: 0.5rem;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
} 

/* Tag styling */

.tag-cloud {
    font-family: var(--mono-stack);
    animation: 1s fadeInUp;
}

.tag-cloud span {
    padding-right: 1em;
    }

/* Post styling */

.post-date {
    font-weight: bold;
}

.post-description {
    font-size: 0.9rem;
    }

.post-update {
    font-family: var(--mono-stack);
    font-style: italic;
    font-size: 0.8rem;
    margin-top: 0.2rem;
}
    
.post-frontmatter {
    border-bottom: 1px solid black;
    }

.post-frontmatter h1 {
    margin-bottom: 0;
    }

/* Large 404 */

.notfound {
    font-size: 10rem;
    text-align: center;
    margin: 0;
    font-family: var(--mono-stack);
    }

/* Bootstrap icon styling */

.bi {
    vertical-align: -.125em;
    width: 1em;
    height: 1em;
}

/* Infobox styling */

.box {
    color: black;
    background: linear-gradient(131deg, rgba(91,206,250,0.3796117275035014) 0%, rgba(245,169,184,0.4076229319852942) 100%);
    padding: 1em;
    border-radius: 10px;
    font-family: var(--mono-stack);
    font-weight: 800;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    line-height: 1.2rem;
    font-size: 0.8rem;
    }

    .box code {
    color: black;
    background: white;
    border-radius: 3px;
    padding: 2px;
        }

/* Footnote styling */

a.footnote-ref::before {
    content: '[';
}

a.footnote-ref::after {
    content: ']';
}

[id] {
    scroll-margin-top: 10vh;
  }

/* When the user highlights, highlight in yellow */

::-moz-selection { /* Code for Firefox */
    color: black;
    background: yellow;
}

::selection {
    color: black;
    background: yellow;
}


/* Animation */
    
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}    
    
@keyframes fadeInUp {
    0% {
        transform: translateY(100%);
        opacity: 0;
  }
    
    100% {
        transform: translateY(0%);
        opacity: 1;
  }
}


/* Decrease font size on very narrow viewports, increase font size and max-width on larger viewports */

@media (max-width: 350px) {
    html {
        font-size: 80%;
    }
}

@media (min-width: 1800px) {
    html {
        font-size: 110%;
        }

    body {
        max-width: 700px;
        }
}

/* Dark-mode styling */

@media (prefers-color-scheme: dark) {

    header {
        background: black;
        border-bottom: 3px solid #FFFFFF;
        }
    
    body {
        background: black;
        color: #FAF9F6;
        }

    a:hover {
        color: black;
        text-decoration-color: black;
        background-color: white;
        }

a {
color:  #a4d266;
}

a:visited {
color: #d88dde
}

    h2 {
        border-bottom: 1px solid white;
        }
    
    dd > code,
    dt > code,
    li > code,
    a > code,
    p > code {
        color: black;
        background: white;
        border-radius: 4px;
        padding-left: 2px;
	padding-right: 2px;
        }

    table :is(td, th) {
        border: 1px solid white;
        }

    table {
        border: 3px solid white;
        }
        
        pre {
    border: 1px solid #9c27b0;
    white-space: pre-wrap;
    padding: 1rem;
    border-radius: 3px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
        
        

/* Dark-mode class styling */    

    .post-frontmatter {
        border-bottom: 1px solid white;
        }

    .box {
        background: linear-gradient(131deg, rgba(214,2,112,0.350480074842437) 0%, rgba(0,56,168,0.3728890384278712) 100%);
        color: white;
        }
}