/* TODO: Perhaps condense rule names down? I doubt this site will get super big with loads of rules, so name conflicts shouldn't be a concern.*/
/* TODO: Properly scale CSS based on the orientation of mobile devices.*/
:root {
  --col-bg0:                  #202330; /* Dark Gunmetal -- A rather  dark blue. */
  --col-bg1:                  #2D2F42; /* Gunmetal -- Brighter background color. */
  --col-fg0:                  #6A766F; /* Nickel -- foreground color. */
  --col-fg1:                  #BFC2C1; /* Silver Sand -- bright foreground. */
  --col-fg2:                  #FDF7F8; /* Snow -- super bright foreground. */
  --col-hl-soap:              #D9BCEF; /* Soft lavender-ish color, super pretty!! */
  --col-hl-french-fuchsia:    #FF4791; /* Closer to a hot pink, likely won't use this as much. */
  --col-hl-pastel-pink:       #E09DA5; /* Muted pastel pink ish color, calming yet cheerful. */
  --col-hl-maize-crayola:     #F6C159; /* A dark yellow. Not a huge fan of yellows so no idea how much I'll use this. */
  --col-hl-cookies-and-cream: #ECDBAD; /* Something inbetween a bright yellow and a cream color. */
  /* --width:                    800px; */
}

html, body {
  background-color: var(--col-bg1);
}

body {
  background-color: var(--col-bg1);
  display: flex;
  flex-direction: row;
  margin-inline: auto;
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
  max-width: 80ch;
}

main {
  overflow-x: scroll;
  line-height: 1.1;
}

p {
  word-break: normal;
  padding-left: 10px;
  padding-right: 10px;
}

p, li {
  color: var(--col-fg1);
  font-size: 1.5em;
}

li {
  margin: 5px;
}

a {
  color: var(--col-hl-maize-crayola);
  text-decoration: none;
  font-weight: normal;
}

a:hover {
  text-decoration: underline;
  color: var(--col-hl-soap);
}

code {
  color: var(--col-fg1);
  background-color: var(--col-bg0);
}

.heading {
  color: var(--col-hl-pastel-pink);
}

.table-of-links {
  font-size: 1.3em;
  padding-left: 0;
  list-style-type: none;
  
}

.machine-list, .blog-post-list{
  color: var(--col-fg1);
  list-style-type: none;
}

.blog-post-list {
  padding-left: 0;
}
.machine-list-entry-key {
  
}

/* TODO: Add styling.*/
.machine-list-entry-value {
}

.blog-post-list-entry-url {
  text-decoration: none;
  color: var(--col-fg1);
}

.blog-post-list-entry-tag {
  color: var(--col-hl-maize-crayola);
}

.pride {
  position: absolute;
  top: 0;
  right: 0;
}

.pride img {
  top: 0;
  right: 0;
  position: relative;
  z-index: 214748364;
  max-height: 6em;
}

.bold-important{
  font-weight: bold;
  color: var(--col-hl-soap);
}