@import url('https://fonts.googleapis.com/css2?family=Hind+Madurai:wght@300;400;500;700&display=swap');

:root {
  --sans-serif-font: "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans-serif-nav-font: 'Hind Madurai', "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif-font: -apple-system-ui-serif, ui-serif, Georgia, "Nimbus Roman No9 L", serif;
  ;
  --mono-font: 'SF Mono', SFMono-Regular, ui-monospace, 'Inconsolata', 'Monaco', 'DejaVu Sans Mono', Menlo, Consolas, monospace;

  /* 2022 May 10 – change to complementary yellow from main site */
  --background-color: rgb(255, 247, 240);
  /* --background-color: #f0f8ff; */
  --alt-secondary-bg-color: #f0fcfb;
  /* --text-color: #651300; */
  --text-color: rgb(35, 28, 51);

  --bq-brightness: brightness(120%);

  --font-size-base: 10px;
  --font-size-XS: 1.1rem;
  --font-size-S: 1.4rem;
  --font-size-M: 1.7rem;
  --font-size-L: 2rem;
  --font-size-XL: 3rem;
  --font-size-XXL: 3.6rem;
}

@media (min-width: 60em) {
  :root {
    --font-size-XS: 1.2rem;
    --font-size-S: 1.6rem;
    --font-size-M: 1.8rem;
    --font-size-L: 2rem;
    --font-size-XL: 3.5rem;
    --font-size-XXL: 4.6rem;
  }
}

html {
  font-size: var(--font-size-base);
}

body {
  background: var(--background-color);
  color: var(--text-color);
  font-family: var(--serif-font);
  font-size: var(--font-size-M);
  font-weight: 400;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6,
.nav,
.blog-title,
.post-date,
.microblog_post .microblog_user,
.microblog_post .microblog_time,
.site-footer {
  font-family: var(--sans-serif-font);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

h1 {
  font-size: var(--font-size-XL);
}

h1.blog-title {
  font-size: var(--font-size-XXL);
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  text-decoration: none !important;
  border: none !important;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
  text-decoration: none !important;
  border: none !important;
}

.blog-description {
  display: none;
}

.nav {
  font-family: var(--sans-serif-nav-font);
  font-size: var(--font-size-S);
  font-weight: 400;
}

.nav a {
  color: var(--text-color);
  filter: brightness(150%);
}

.nav a:hover {
  color: inherit;
}

a.nav-current {
  color: inherit;
}

.post-meta {
  font-size: var(--font-size-XS);
  margin-top: 0.3em;
}

.post a,
.site-footer a,
.archive_categories a,
.h-entry a,
.microblog_conversation a {
  /* Shawn doesn't like color */
  color: var(--text-color);
  border-bottom: 0.5px solid;
  text-decoration: none;
}

.post a:visited,
.site-footer a:visited,
.archive_categories a:visited,
.h-entry a:visited,
.microblog_conversation a:visited {
  color: var(--text-color);
}

.nav a:hover,
.post a:hover,
.site-footer a:hover,
.archive_categories a:hover,
.h-entry a:hover,
.microblog_conversation a:hover {
  background-color: var(--background-color);
  filter: brightness(97%);
  text-decoration: none;
  border-bottom: 1px solid;
}

.post-date {
  filter: brightness(150%);
}

.post img {
  margin: 0;
}

.post img,
blockquote {
  border-radius: 10px;
}

.post img~img {
  margin-top: 1em;
}

blockquote {
  color: var(--text-color);
  font-style: normal;
  filter: var(--bq-brightness);
  margin: 1em 0;
  padding: 1em 1.25em;
  background-color: var(--alt-secondary-bg-color);
  border: none;
}


blockquote p {
  font-style: normal;
}

blockquote cite {
  font-size: var(--font-size-S);
}

/* Code blocks */
code,
pre {
  font-family: var(--mono-font);
  font-size: 1.2rem;
}

p code,
li code {
  background-color: #eee;
  border-radius: 2px;
  padding: 3px;
}

pre {
  color: #ccc;
  background-color: #222;
  padding: 15px 15px;
  border-radius: 10px;
  overflow: auto;
  white-space: pre;
}

pre code {
  background-color: inherit;
}

/*
pre span.attribute { color: #009900; }
pre span.char { color: #F00; }
pre span.class { color: #A020F0; font-weight: bold; }
pre span.comment { color: #00FFFF; }
pre span.constant { color: #008B8B; }
pre span.escape { color: #6A5ACD; }
pre span.expr { color: #22FFCC; }
pre span.global { color: #11AA44; }
pre span.ident { color: #CCCCCC; }
pre span.keyword { color: #A52A2A; font-weight: bold; }
pre span.method { color: #008B8B; }
pre span.module { color: #A020F0; font-weight: bold; }
pre span.number { color: #DD00DD; }
pre span.punct { color: #6A5ACD; }
pre span.regex { color: #DD00DD; }
pre span.string { color: #DD00DD; }
pre span.symbol { color: #008B8B; }
*/

/* For Commonplace: GIFs */
.gifs img {
  border-radius: 5px;
  max-width: 100%;
  height: auto;
}


/* Replies */
.microblog_conversation {
  font-size: var(--font-size-S);
}

.microblog_post .microblog_user {
  font-weight: normal;
}

.microblog_post .microblog_avatar {
  border-radius: 2px;
}

.microblog_post+.microblog_post {
  margin-top: 1.5em;
}

.microblog_post .microblog_text {
  padding-top: 0.5em;
}

.microblog_post .microblog_text p {
  margin-block-end: 0.5em;
}

.microblog_post .microblog_time {
  font-size: var(--font-size-XS);
}

footer.site-footer {
  display: none;
}

a.icon-feed {
  padding-left: 2px;
}

a.icon-feed,
a.newsletter-feed {
  text-decoration: none;
  border: none;
}

a.icon-feed:hover,
a.newsletter-feed:hover {
  background-color: transparent;
  text-decoration: none;
  border-bottom: none;
}

.pagination,
.footer2 {
  font-size: 1.2rem;
}

.footer2 ul {
  margin: 0;
  padding: 0;
}

.footer2 li {
  margin: 1px 0;
  list-style: none;
  display: inline-block;
}

.footer2 li:after {
  content: " \00b7";
}

.footer2 li:last-child:after {
  content: none;
}

/* From: https: //stackoverflow.com/questions/59594737/how-can-i-resize-the-interface-of-the-iframe-youtube-video */
.yt {
  position: relative;
  display: block;
  width: 90%;
  /* width of iframe wrapper */
  height: 0;
  margin: auto;
  padding: 0% 0% 56.25%;
  /* 16:9 ratio */
  overflow: hidden;
}

.yt iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/******************** ALBUMS (via Shawn) ********************/

.albums-container {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 0 auto;
  flex-flow: wrap row
}

.albums-container iframe {
  /* makes the bottom spacing not suck */
  /* https://stackoverflow.com/questions/21025319/iframe-creates-extra-space-below */
  display: block;
}

.albums-container iframe,
.albums-container img {
  margin-bottom: 10px;
}

.albums-container img {
  border-radius: 0;
}

.per-album {
  font-size: var(--font-size-M);
  font-weight: 400;
  line-height: 1.5em;
  width: 275px;
  margin: 18px
}

.album-name {
  font-family: var(--sans-serif-font);
  font-weight: 700
}

.album-artist {
  font-family: var(--sans-serif-font);
  color: #888
}

/******************** END ALBUMS ********************/