@import url('https://fonts.googleapis.com/css?family=Permanent+Marker|Architects+Daughter|Rubik|Varela+Round|ABeeZee&display=swap');

:root {
    --h1-colour:      #283618;
    --sub-colour:     #606C38;
    --bg-colour:      #FEFAE0;
    --fg-colour:      #2D2D27;
    --accent-colour:  #BC6C25;
    --nav-shadow:     #9C8A79;
    --nav-background: #DDA15E;
    --nav-text:       #321904;
    --font-title:     'Architects Daughter';
    --font-body:      'ABeeZee';
    --font-banner:    'Permanent Marker';
}

header {
    font-family: var(--font-banner);
}

.text-primary-subtle {
    color: var(--nav-text);
}

.transition {
    font-family: 'ABeeZee';
    text-shadow: 0.25em 0.25em 0.25em var(--nav-shadow);
}

h1 {
    font-family: 'Architects Daughter' !important;
    font-weight: bold;
    color: var(--h1-colour) !important;
}

h2, h3, h4, h5, h6 {
    font-family: 'Architects Daughter' !important;
    color: var(--sub-colour) !important;
}

.bg-background, div.relative, main {
    background: var(--bg-colour);
}

article, main, #text, p {
    font-family: 'ABeeZee' !important;
    font-weight: 200;
    color: var(--fg-colour) !important;
}

article {
    padding-top: 0.75em;
}

aside {
    font-family: 'ABeeZee' !important;
    font-size: smaller;
    border-style: double;
    border-color: var(--accent-colour);
    border-radius: 5px;
    color: var(--nav-text);
    background: var(--nav-background);
    padding: 0.5em;
}

signature {
    font-family: 'Architects Daughter';
    font-size: larger;
    font-weight: lighter;
    text-align: right;
    display: block;
    color: var(--accent-colour);
}

.border-b {
    border-bottom: 2px double var(--sub-colour);
}

hr {
    clear: both;
    border: 1px solid var(--sub-colour) !important;
    color: var(--sub-colour);
    width: 66%;
    margin: auto;
}

.prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

.prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
    color: var(--accent-colour);
}

img.rounded-md {
    float: left;
    padding: 15px;
    vertical-align: middle;
}

/* For when I can think of a way to have additional attributes for certain types of in-article images.
img.rounded-md {
    padding: 0.5em;
    vertical-align: middle;
    width: 60%;
    box-shadow: 0px 0px 10px black;
    margin: 1em;
    float: right;
}
*/

/* Callout / description block */
.sm\:text-xl {
    font-size: 0.85em;
    border: 1px solid var(--sub-colour);
    margin: auto;
    width: 80%;
    padding: 0.5em;
    border-radius: 5px;
    box-shadow: 4px 3px 5px var(--accent-colour);
}

/* Giscus styling */
.gsc-reactions {
    padding: 0.4em;
    border-radius: 5px;
    border: 1px solid vaar(--accent-colour);
    color: var(--fg-colour);
}

.gsc-comments .gsc-comment-box {
    text-underline-offset: 4px;
    transition: all 0.2s;
    color: var(--fg-colour);
    font-family: 'Varela Round';
}

.gsc-comment-box-tabs .gsc-comment-box-bottom {
    background: var(--nav-background);
    border-bottom-color: var(--bg-colour);
}

.gsc-comment-box-textarea .gsc-comment-box-textarea-extras .color-border-primary {
    background: var(--bg-colour);
    border-color: var(--bg-colour);
    font-family: 'Varela Round';
}