/* --- Code Corner Radius --- */
code {
  border-radius: 10px;
}

/* --- Change color of header highlighting --- */
.is-flashing {
  background-color: ;
}

/* --- Increase nav arrow stroke --- */
.collapse-icon svg {
  stroke-width: 5px;
}

/* --- "Last Touched" Date Styling --- */
.last-touched-container {
  text-align: left;
  font-size: 0.9em;
  color: var(--text-muted);
  margin-left: 1em;
  margin-top: 4em; /* Adds space above, separating from content */
  padding-bottom: 1em; /* Adds a little space below */
}

/* Styles the calendar icon */
.last-touched-container .fa-calendar {
  margin-right: 0.5em; /* Space between icon and text */
}

/* RSS Icon */
.rss-link { color: #ffca80; font-size: 24px; transition: 0.3s; }
.rss-link:hover { color: #f8f8f2; }


/*Published Dates*/
/*-------------------------------------------------------*/
.published-date {
  font-size: 0.9em;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 0; /* Remove default paragraph margin */
  margin-bottom: 2em; /* Add space between date and content */
}


/*Add border radius to images*/
/*-------------------------------------------------------*/
img {
    border-radius: 5px;
}

hr {
    background-image: linear-gradient(to right, #bd93f9, #bd93f9, #44475a);
    border-radius: 5px;
    height: 2px;
    margin-bottom: 10px;
}

.published-container .markdown-rendered h1, .published-container .markdown-rendered h2, .published-container .markdown-rendered h3, .published-container .markdown-rendered h4, .published-container .markdown-rendered h5, .published-container .markdown-rendered h6 {
  border-bottom: none;
  margin-bottom: 0;
  margin-top: 10px;
}



/* border-bottom: 1px solid var(--background-modifier-border);


/* Terminal logo with blinking cursor*/
/*-------------------------------------------------------*/
.site-body-left-column-site-logo {
padding-right: 15px;
}

#new-weblog-title {
    padding-bottom: 40px;
}

.blinking{
    animation:blinkingText 1.2s infinite;
}
@keyframes blinkingText{
    0%   {color: #50fa7b;}
    49%  {color: #50fa7b;}
    60%  {color: transparent;}
    99%  {color: transparent;}
    100% {color: #50fa7b;}
}


/*Dracula Gemini theme*/
/*-------------------------------------------------------*/
:root {
  --color-dracula-background: #282a36;
  --color-dracula-selection: #44475a; /* a.k.a. "Current line" */
  --color-dracula-foreground: #f8f8f2;
  --color-dracula-comment: #6272a4;

  --color-dracula-cyan: #8be9fd;
  --color-dracula-green: #50fa7b;
  --color-dracula-orange: #ffb86c;
  --color-dracula-pink: #ff79c6;
  --color-dracula-purple: #bd93f9;
  --color-dracula-red: #ff5555;
  --color-dracula-yellow: #f1fa8c;
  --color-dracula-black: #282a36;

  --color-dracula-yellow-ish: #f4f9bf; /* 50/50 blend of -yellow and -foreground */

  --empty-line-height: 1em; /* 1em = 16px = 2/3 of the height of the normal line, which is 24px */
  --header-hanging-margin: 30px; /* extra margin for hanging ### (header formatting) in there */
}

body {
  /* HSL components of --color-dracula-comment */
  --accent-h: 225;
  --accent-s: 27%;
  --accent-l: 51%;

  /* Text editor layout */
  --file-margins: var(--size-4-8) var(--size-4-12); /* wider left margin for hanging header prefixes (see below) */
}

body.theme-dark {
  --color-base-00: var(--color-dracula-background); /* a.k.a. hsl(231, 15%, 18%) */
  --color-base-10: hsl(231, 15%, 22%);
  --color-base-20: hsl(231, 15%, 24%);
  --color-base-25: hsl(231, 15%, 27%);
  --color-base-30: hsl(231, 15%, 30%);
  --color-base-35: hsl(231, 15%, 33%);
  --color-base-40: hsl(231, 15%, 40%);
  --color-base-50: hsl(231, 15%, 50%);
  --color-base-60: hsl(231, 15%, 65%);
  --color-base-70: hsl(231, 15%, 84%);
  --color-base-100: var(--color-dracula-foreground); /* a.k.a. hsl(60, 30%, 96%) */

  --text-selection: var(--color-dracula-selection);

  --checklist-done-decoration: none; /* line-through */
  --checklist-done-color: var(--text-faint); /* --text-muted */
}

body.theme-dark.is-mobile {
  --color-base-00: hsl(231, 15%, 12%); /* 6pp lower than Desktop, default was #000000 */
  --color-base-10: hsl(231, 15%, 17%); /* 5pp lower than Desktop, default was #121212 */
  --color-base-20: hsl(231, 15%, 20%); /* 4pp lower than Desktop, default was #1e1e1e */
}

/*
 ********************************************************************************************************************
  * Block quotes
*/

body {
  --blockquote-border-thickness: 4px;
  --blockquote-border-color: var(--color-dracula-yellow);
  --blockquote-color: var(--color-dracula-yellow-ish);
}

.markdown-source-view .HyperMD-quote {
  text-indent: -0.875em !important;
  padding-inline-start: 2.375em !important;
}

/* Empty line inside the blockquote */
.markdown-source-view .HyperMD-quote:has(> .cm-formatting-quote:only-child) {
  height: var(--empty-line-height);
  line-height: var(--empty-line-height); /* to vertically align the lonely `>` in the otherwise empty blockquote line */
}

.markdown-preview-view blockquote {
  margin: 0 0 var(--empty-line-height) 1em; /* like paragraphs, plus left margin */
  padding: 0 0 0 1.125em;
}
.markdown-preview-view blockquote > :last-child {
  padding-bottom: 0;
}

/*
 ********************************************************************************************************************
 * Bold and italic
*/

body {
  --bold-color: var(--color-dracula-orange);
  --italic-color: var(--color-dracula-yellow);
}

.markdown-source-view .cm-formatting-strong,
.markdown-source-view .cm-formatting-em {
  opacity: 0.4;

  /* For bold text, make the formatting asterisks non-bold */
  font-weight: normal;

  /* For italic text though, we still let the asterisks to be italic,
     so they align better with the text between them. */
}

/*
 ********************************************************************************************************************
 * Code: block code
*/

body {
  --code-size: var(--font-small); /* `small` is a bit bigger than code's default `smaller` */

  --code-normal:      var(--text-muted);                /* --text-muted */
  --code-comment:     var(--color-dracula-comment);     /* --text-faint */
  --code-function:    var(--color-dracula-green);       /* --color-yellow */
  --code-important:   var(--color-dracula-red);         /* --color-orange */
  --code-keyword:     var(--color-dracula-pink);        /* --color-pink */
  --code-operator:    var(--color-dracula-foreground);  /* --color-red */
  --code-property:    var(--color-dracula-orange);      /* --color-cyan */
  --code-punctuation: var(--text-muted);                /* --text-muted */
  --code-string:      var(--color-dracula-yellow);      /* --color-green */
  --code-tag:         var(--color-dracula-red);         /* --color-red */
  --code-value:       var(--color-dracula-purple);      /* --color-purple */
}

.markdown-source-view .HyperMD-codeblock-begin,
.markdown-source-view .HyperMD-codeblock-end {
  /* make backticks small */
  font-size: 0.625em;

  /* limit "top padding" height of the block */
  height: 0.75rem; /* 12px */
  line-height: 1.2rem !important; /* move backticks a bit down */
}
.markdown-source-view .HyperMD-codeblock-begin {
  z-index: 1; /* make overflow visible */
}

.markdown-preview-view pre {
  padding: 0.75em 1em; /* 12px - to match Source's top and bottom backtick rows */
  margin: 0 0 var(--empty-line-height) 0; /* like paragraphs */
}

.markdown-source-view .HyperMD-codeblock,
.markdown-preview-view pre code {
  line-height: 1.5rem;
}

/*
 ********************************************************************************************************************
 * Code: inline code
*/

.markdown-source-view span.cm-inline-code,
.markdown-preview-view :not(pre) > code {
  color: var(--color-dracula-green);
  padding-top: 0.1875em; /* 3px */
  padding-bottom: 0.1875em; /* 3px */
}

/*
 ********************************************************************************************************************
 * Hashtags
*/

body {
  --tag-size: var(--font-text-size);
  --tag-color: var(--color-dracula-pink);
  --tag-color-hover: var(--color-dracula-pink);
  --tag-background: hsla(var(--interactive-accent-hsl), 0.2);
  --tag-background-hover: hsla(var(--interactive-accent-hsl), 0.4);
  --tag-padding-x: 0.25em; /* 4px */
  --tag-padding-y: 0.125em; /* 2px */
  --tag-radius: 0.1875em; /* 3px */
}

/*
 ********************************************************************************************************************
 * Headings
 * - Six Dracula colors (the "red" is not used)
 * - Sizes from 1em to 2em with 0.2em interval
 * - Same look in Source and Preview (except for ###)
 * - Formatting (###) is header's font-size * 0.6
*/

body {
  --h1-color: var(--color-dracula-pink);
  --h2-color: var(--color-dracula-purple);
  --h3-color: var(--color-dracula-cyan);
  --h4-color: var(--color-dracula-green);
  --h5-color: var(--color-dracula-yellow);
  --h6-color: var(--color-dracula-orange);

  --h1-size: 2em;
  --h2-size: 1.8em;
  --h3-size: 1.6em;
  --h4-size: 1.4em;
  --h5-size: 1.2em;
  --h6-size: 1em;

  --h1-weight: 600;
  --h2-weight: 600;
  --h3-weight: 600;
  --h4-weight: 600;
  --h5-weight: 600;
  --h6-weight: 600;

  --h1-line-height: 1.3125; /* 41.6px → 42px */
  --h2-line-height: 1.2847; /* 37.44px → 37px */
  --h3-line-height: 1.2891; /* 33.28px → 33px */
  --h4-line-height: 1.2946; /* 29.12px → 29px */
  --h5-line-height: 1.3021; /* 24.96px → 25px */
  --h6-line-height: 1.3125; /* 20.8px → 21px */

  --heading-spacing: 0;
}

.markdown-source-view .HyperMD-header,
.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6 {
  margin: 0;
  letter-spacing: 0;
}

/* Header formatting prefix (###) */
.markdown-source-view .cm-formatting-header {
  color: inherit; /* inherit color from header, instead of using --heading-formatting */
  opacity: 0.4;
  font-size: 0.6em !important;
}

/* Hanging prefixes (### is outside in the text margin) */
.markdown-source-view:not(.is-live-preview) .HyperMD-header-1,
.markdown-source-view.is-live-preview .cm-active.HyperMD-header-1 { text-indent: -0.5184em; }
.markdown-source-view:not(.is-live-preview) .HyperMD-header-2,
.markdown-source-view.is-live-preview .cm-active.HyperMD-header-2 { text-indent: -0.9014em; }
.markdown-source-view:not(.is-live-preview) .HyperMD-header-3,
.markdown-source-view.is-live-preview .cm-active.HyperMD-header-3 { text-indent: -1.3004em; }
.markdown-source-view:not(.is-live-preview) .HyperMD-header-4,
.markdown-source-view.is-live-preview .cm-active.HyperMD-header-4 { text-indent: -1.7116em; }
.markdown-source-view:not(.is-live-preview) .HyperMD-header-5,
.markdown-source-view.is-live-preview .cm-active.HyperMD-header-5 { text-indent: -2.1396em; }
.markdown-source-view:not(.is-live-preview) .HyperMD-header-6,
.markdown-source-view.is-live-preview .cm-active.HyperMD-header-6 { text-indent: -2.5838em; }

/* Empty line after headers, to align Preview with Source (sizing looks
   tricky, but it's just to make the padding the same size in pixels) */
.markdown-preview-view h1 { margin-bottom: calc(var(--empty-line-height) / 2); }
.markdown-preview-view h2 { margin-bottom: calc(var(--empty-line-height) / 1.8); }
.markdown-preview-view h3 { margin-bottom: calc(var(--empty-line-height) / 1.6); }
.markdown-preview-view h4 { margin-bottom: calc(var(--empty-line-height) / 1.4); }
.markdown-preview-view h5 { margin-bottom: calc(var(--empty-line-height) / 1.2); }
.markdown-preview-view h6 { margin-bottom: calc(var(--empty-line-height) / 1); }

/*
 ********************************************************************************************************************
 * Links
*/

body {
  --link-color: var(--color-dracula-pink);
  --link-color-hover: var(--color-dracula-purple);
  --link-external-color: var(--color-dracula-pink);
  --link-external-color-hover: var(--color-dracula-purple);
  --link-unresolved-color: var(--color-dracula-pink);
  --link-unresolved-opacity: 0.5;
  --link-unresolved-decoration-color: var(--color-dracula-pink);
}

/* URL part in `[text](url)` */
.markdown-source-view .cm-string.cm-url {
  color: var(--color-dracula-cyan);
}
/* Parens around URL in `[text](url)`, since they don't use punctuation color by default */
.markdown-source-view .cm-string.cm-url.cm-formatting-link-string {
  color: var(--text-faint);
}

/*
 ********************************************************************************************************************
 * Lists
 * - Because overriding `--list-spacing` is not enough
*/

body {
  /* Custom vars */
  --list-item-gap: 0.375em; /* bottom margin for a list item, to keep the items separated */
  --list-indent-spacing: 0.125em; /* +2px for every space in `    ` */
  --list-ul-bullet-spacing: 0.0805em; /* width of `- ` is 11.42px by default, we make it 14px */
  --list-ol-bullet-width: 1.75em; /* width of `99. ` is 28.16px; we set it to 28px, even for `1. ` */
  --list-checkbox-margin-left: calc(var(--checkbox-size) * 0.385); /* match checkbox width to `[x]`; only affects Preview, doesn't affect Source */
  --list-checkbox-margin-right: calc(var(--checkbox-size) * 0.685); /* match checkbox width to `[x]`; only affects Preview, doesn't affect Source */

  /* Obsidian vars */
  --list-spacing: 0; /* reset vertical padding on list items */
  --list-indent: calc(1.046875em + 4 * var(--list-indent-spacing)); /* 16.75px + 8px, the width of 4 spaces */
}

/* Source UL+OL list items */
.markdown-source-view .HyperMD-list-line + .HyperMD-list-line {
  padding-top: var(--list-item-gap) !important;
  padding-bottom: 0 !important;
}

/* Source UL+OL list items */
.markdown-source-view .HyperMD-list-line .cm-hmd-list-indent {
  letter-spacing: var(--list-indent-spacing);
}

/* Source UL bullet */
.markdown-source-view .HyperMD-list-line .cm-formatting-list-ul {
  letter-spacing: var(--list-ul-bullet-spacing);
}

/* Source OL bullet */
.markdown-source-view .HyperMD-list-line .cm-formatting-list-ol {
  display: inline-block;
  min-width: var(--list-ol-bullet-width);
  text-align: right;
}

/* Source UL+OL task checkbox */
.markdown-source-view .HyperMD-list-line.HyperMD-task-line .cm-formatting-task {
  color: var(--text-faint);
}

/* Source UL+OL task text
 * - completed tasks have checkbox with .cm-property
 * - incomplete tasks have checkbox with .cm-meta */
.markdown-source-view .HyperMD-list-line.HyperMD-task-line:has(> .cm-property) {
  text-decoration: var(--checklist-done-decoration);
  color: var(--checklist-done-color);
}

/* Preview UL+OL list items
 * - top-level ones get gaps, except for the first one
 * - nested ones get gaps, including the first one */
.markdown-preview-view li + li,
.markdown-preview-view li li {
  margin-top: var(--list-item-gap);
}

/* Preview UL top-level lists */
.markdown-preview-view :not(li) > ul {
  --list-ul-bullet-width: 0.875em; /* 14px, the width of `- `, hopefully; see declaration of --list-ul-bullet-spacing above */
  margin-left: calc(var(--list-ul-bullet-width) - var(--list-indent));
}

/* Preview UL-task top-level lists */
.markdown-preview-view :not(li) > ul.contains-task-list {
  --list-ul-bullet-width: 0.875em; /* 14px, the width of `- `, hopefully; see declaration of --list-ul-bullet-spacing above */
  --list-checkbox-width: var(--list-checkbox-margin-left) + var(--checkbox-size) + var(--list-checkbox-margin-right);
  margin-left: calc(var(--list-ul-bullet-width) + var(--list-checkbox-width) - var(--list-indent));
}

/* Preview OL top-level lists */
.markdown-preview-view :not(li) > ol {
  margin-left: calc(var(--list-ol-bullet-width) - var(--list-indent));
}

/* Preview UL bullet */
.markdown-preview-view .list-bullet {
  justify-content: initial;
  padding-top: 0.09375em; /* move 1.5px down */
}

/* Preview UL task checkbox */
.markdown-preview-view ul.contains-task-list .task-list-item-checkbox {
  margin-inline-start: calc(-1 * (var(--checkbox-size) + var(--list-checkbox-margin-right)));
  margin-right: var(--list-checkbox-margin-right);
}

/* Preview OL task checkbox */
.markdown-preview-view ol.contains-task-list .task-list-item-checkbox {
  margin-left: var(--list-checkbox-margin-left);
  margin-right: var(--list-checkbox-margin-right);
}

/* Missing checked/done style for OL tasks (copied from the existing UL style in app.css) */
ol > li.task-list-item[data-task="x"],
ol > li.task-list-item[data-task="X"] {
  text-decoration: var(--checklist-done-decoration);
  color: var(--checklist-done-color);
}

/*
 ********************************************************************************************************************
 * Paragraphs & empty lines
 * - in Source, we'll have empty lines after each block (header, paragraph, list etc.)
 * - in Preview, we'll emulate empty lines with the equivalent padding-bottom / margin-bottom
*/

/* Empty line in Source is a separator, and should look smaller than a line with text */
.markdown-source-view .cm-line:has(> br:only-child) {
  height: var(--empty-line-height);
  line-height: var(--empty-line-height); /* to vertically align the text cursor in the empty line */
}

/* Empty line after paragraphs, to align Preview with Source */
.markdown-preview-view p {
  margin: 0 0 var(--empty-line-height) 0;
  padding: 0;
}

/*
 ********************************************************************************************************************
 * Tables
*/

body {
  --table-header-background: var(--color-base-20);
}

.markdown-preview-view table {
  margin-block-start: 0;
}

/*
 ********************************************************************************************************************
 * Thematic breaks (horizontal rules, <hr>)
*/

.markdown-source-view .cm-hr {
  /* Preview's color (--hr-color) is `--color-base-30`, but for Source's short `---` we need a brighter one */
  color: var(--color-base-40);
  font-weight: bold;
}

.markdown-preview-view hr {
  /* to match Source's paragraphs, the height must be = 1.5, plus --empty-line-height on both sides */
  --hr-required-size: 1.5em; /* normal text line height */
  --hr-remainder: calc(var(--hr-required-size) - var(--hr-thickness));
  --hr-margin: calc(var(--hr-remainder) / 2 + var(--empty-line-height));

  margin: var(--hr-margin) 0;
}

/*
 ********************************************************************************************************************
 * YAML front matter (metadata)
 * - Metadata is only visible if enabled in the settings
 * - We make it look very much like a code block
*/

/* All metadata rows (formatting + content) */
.markdown-source-view .cm-line:has(> .cm-hmd-frontmatter) {
  background-color: var(--code-background);
  padding-left: var(--size-4-4);
}

/* Text in metadata rows (formatting + content) */
.markdown-source-view .cm-line > .cm-hmd-frontmatter {
  color: var(--text-faint);
}

/* Formatting rows (top and bottom) */
.markdown-source-view .cm-line:has(> .cm-hmd-frontmatter.cm-def) {
  /* make "---" small */
  font-size: 0.625em;

  /* limit "top padding" height of the block */
  height: 0.75rem; /* 12px */
  line-height: 0.75rem; /* 12px */

  border-radius: var(--radius-s) var(--radius-s) 0 0;
}

/* Bottom formatting row */
.markdown-source-view .cm-line:has(> .cm-hmd-frontmatter) + .cm-line:has(> .cm-hmd-frontmatter.cm-def) {
  border-radius: 0 0 var(--radius-s) var(--radius-s);
}

/* Content rows */
.markdown-source-view .cm-line > .cm-hmd-frontmatter:not(.cm-def) {
  height: 1.5rem;
  line-height: 1.5rem;
  vertical-align: top;
}

/* The rest is for Preview */
.markdown-preview-view .frontmatter-container {
  color: var(--text-faint);
  background-color: var(--code-background);
  border-radius: var(--radius-s);
  padding: 0.75em 1em; /* 12px - to match Source's top and bottom backtick rows */
  margin: 0 0 var(--empty-line-height) 0; /* like paragraphs */
}
.markdown-preview-view .frontmatter-container-header {
  display: none;
}
.markdown-preview-view .frontmatter-section {
  line-height: 1.5em;
  margin: 0;
}
.markdown-preview-view .frontmatter-section-label,
.markdown-preview-view .frontmatter-section-data {
  font-family: var(--font-monospace);
  font-size: var(--font-smaller);
  text-transform: none;
}


/*Card Decks*/
/*-------------------------------------------------------*/
.deck-image {
    max-height: 150px;
    margin: 5px;
    transition: transform 100ms ease-out 0s;
}
.deck-image:hover {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Safari 3-8 */
    transform: scale(1.5); 
}
.suit-hr {
    width: 100%;
    text-align: center;
    font-size: 1.2em;
    margin-top: 50px;
    margin-bottom: 50px;
}
#deck-container {
    width: 100%;
    text-align: center;
}

/*Post Count page*/
/*-------------------------------------------------------*/
.year {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 4px;
  margin: 4px;
  font-family: monospace;
  }
.count {
  flex-grow: 1;
}
.bar {
  height: 28px;
  border: solid 3px black;
  border-radius: 0 5px 5px 0;
}
.year:nth-child(7n-6) .bar { background-color: #8BE9FD; }
.year:nth-child(7n-5) .bar { background-color: #50FA7B; }
.year:nth-child(7n-4) .bar { background-color: #FFB86C; }
.year:nth-child(7n-3) .bar { background-color: #FF79C6; }
.year:nth-child(7n-2) .bar { background-color: #BD93F9; }
.year:nth-child(7n-1) .bar { background-color: #FF5555; }
.year:nth-child(7n)   .bar { background-color: #F1FA8C; }


/*Goals Page*/
/*-------------------------------------------------------*/
.grid-container {
    display: grid;
    grid-template-columns: 50px repeat(12, 1fr); /* Add a fixed width column for descriptions */
    grid-template-rows: repeat(11, 50px); /* Adjust height as needed */
    gap: 5px;
    width: 100%;
    max-width: 1,200px; /* Adjust width as needed */
    margin: 0 auto;
}            
.empty-cell, .month, .box, .row-description {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    font-size: 16px;
    font-weight: bold;
    height: 100%; /* Ensure full height of grid cell */
}            
.empty-cell {
    background-color: #ffffff; /* Make the top-left cell empty */
    color: black;
}            
.month {
    background-color: #bd93f9; /* Different color for month headers */
    color: black;
}            
.row-description {
    background-color: #ffb86c; /* Different color for row descriptions */
    color: #FFFFFF;
    font-weight: normal;
}


/*My Setup page*/
/*-------------------------------------------------------*/
#stuff_wrapper {
    font-size: 13px;
    text-align: center;
    display: grid;
    grid-template-columns: 50% 50%;  
}
#stuff_title_text {
    color: #ffb86c;
    font-family: monospace;
    font-size: 2.0em;
    margin-bottom: 30px;
    text-align: center;
}
#stuff_updated_text {
    color: #f1fa8c;
    font-family: monospace;
    font-size: 1.1em;
    text-align: center;
}
.stuff_container {
    width: 295px;
    border-style: solid;
    border-color: #f8f8f2;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    margin: 10px;
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
}
.stuff_section {
    display: inline;
    width: 100%
}
.stuff_header {
    text-align: center;
    padding-top: 10px;
}
.stuff_header_title {
    font-family: monospace;
    font-size: 2em;
    color: #bd93f9;
}
.stuff_header_subtitle {
    font-family: monospace;
    font-size: 1.5em;
    color: #bd93f9;
}
.service_time_text{
    font-family: monospace;
    font-size: 1.2em;
    color: #50fa7b;
}
#laptop_service_time{
    font-family: monospace;
    color: #50fa7b;
}
.stuff_header_image {
}
.stuff_image {
    height: 200px;
}
.stuff_body {
    margin-top: 0px;
    padding: 5px;
    font-family: monospace;
    font-size: 1.15em;
    color: #f8f8f2;
}
.stuff_body li {
    font-family: inherit;
    line-height: 1.3em;
    list-style-type: disc;
}
.stuff_hr {
    width: 90%;
    border: 1px solid #50fa7b;
    margin: 5px auto;
}
.stuff_span {
    color: #f1fa8c;
}
@media screen and (max-width: 730px) {
    ul, li {
        margin-left: 5px;
    }
    ul ul, ol ul, ol ol, ul ol {
        margin-left: 0;
    }
    .stuff_container {
        height: auto;
    }
    #stuff_wrapper {
        display: block;
    }
}


/*Now page*/
/*-------------------------------------------------------*/
.item-type {
    font-size: 1.0em;
    padding-right: 5px;
    grid-column-start: 2;
    grid-row-start: 2;
}
.item-type-tag {
    font-size: 0.8em;
    padding: 2px 8px;
    border-radius: 20px;
    color: var(--color-dracula-black);
}
.tag-book {
    background-color: var(--color-dracula-yellow);    
}
.tag-audiobook {
    background-color: var(--color-dracula-red);    
}
.tag-game {
    background-color: var(--color-dracula-purple);    
}
.tag-movie {
    background-color: var(--color-dracula-pink);  
}
.tag-tv {
    background-color: var(--color-dracula-orange);    
}
.tag-sw-hw {
    background-color: var(--color-dracula-green);
}
.tag-activity {
    background-color: var(--color-dracula-cyan); 
}
.tag-progress {
    background-color: var(--color-dracula-yellow);    
}
.tag-finished {
    background-color: var(--color-dracula-green);    
}
.item-status {
    font-size: 1.0em;
    padding-right: 5px;
    grid-column-start: 3;
    grid-row-start: 2;
}
.item-status-tag {
    font-size: 0.8em;
    padding: 2px 8px;
    border-radius: 20px;
    color: var(--color-dracula-black);
}
@media screen and (max-width: 414px) {
    .item-container {
        grid-template-columns: 75px 155px 1fr;
        grid-template-rows: 0.4fr 0.4fr 0fr;
    }
    .item-title {
        font-size: 1.2em;
    }
    .item-type {
        font-size: 1.0em;
        padding-top: 5px;
        padding-bottom: 15px;
    }
    .item-status {
        font-size: 1.0em;
        grid-column-start: 2;
        grid-row-start: 3;
        grid-column-end: span 2;
        padding-bottom: 5px;
    }
.fas fa-smile {
    color: var(--color-dracula-green);
}
.fas fa-meh {
    color: var(--color-dracula-yellow);
}
.fas fa-frown {
    color: var(--color-dracula-red);
}


/*Footer*/
/*-------------------------------------------------------*/
/* --- Sticky Footer & Icon Styling (PNG Version) --- */

/* 1. Makes the footer stick to the bottom */
.site-footer {
  position: sticky;
  bottom: 0;
  width: 100%;
  background-color: var(--background-primary); 
  z-index: 100; 
  border-top: 1px solid var(--background-modifier-border);
}

/* 2. Styles your new custom footer layout */
.my-custom-footer {
  display: flex;
  flex-direction: column; /* Stacks text on top of icons */
  align-items: center;    /* Centers everything horizontally */
  justify-content: center;
  padding: 1rem 1.5rem;   /* Gives it some breathing room */
  gap: 0.75rem;           /* Space between the text and the icons */
}

/* 3. Styles the text part */
.footer-text {
  font-size: 0.85em;
  color: var(--text-muted);
}

/* 4. Styles the new icon container */
.footer-icons {
  display: flex;
  align-items: center;
  gap: 1.75rem; /* Space between each icon */
}

/* 5. Styles the icon images themselves */
.footer-icons a img {
  max-height: 35px;  /* Set max icon height */
  width: auto;       /* Maintain aspect ratio */
  vertical-align: middle; /* Keeps them aligned nicely */
  opacity: 0.7; /* Makes them blend in a bit, like 'text-muted' */
  transition: opacity 0.2s ease;
}

/* 6. Adds a hover effect to icons */
.footer-icons a:hover img {
  opacity: 1.0; /* Makes them full color on hover */
}

/* 7. IMPORTANT: Prevents footer from hiding the last lines of text */
.published-container .page-content {
  padding-bottom: 100px; /* Adds space at the bottom of every page */
}


/*1000 Words Progress Bar*/
/*-------------------------------------------------------*/
/* This whole <style> block should be in the <head> of your document */
progress[value] {
  /* Resets default browser appearance */
  -webkit-appearance: none;
  appearance: none;

  width: 220px;
  height: 20px;
  border: none; /* Removes default border */
  border-radius: 20px;
  overflow: hidden;
  box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.2);
}

/* Style for the bar's background (the "empty" part) */
progress[value]::-webkit-progress-bar {
  background-color: #f8f8f2;
  border-radius: 20px;
}

/* Style for the bar's fill (the "progress" part) */
progress[value]::-webkit-progress-value {
  background-color: #50fa7b;
  border-radius: 20px;
}