/* ==========================================
** IMPORTS
** ========================================== */

@import url('https://mihobu.lol/mx-icons.css');
@import url('https://cdn.cache.lol/profiles/icons/omg.lol-icons.css?v=2');
@import url('https://use.typekit.net/jcq7qyt.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/devibeans.min.css');

/* ==========================================
** COLORS
** ========================================== */

:root {
  --body-bg-color: #F7F5EE;
  --blogroll-bg-color: #E7E5DD;
  --main-bg-color: transparent;
  --header-bg-color: transparent;
  --header-fg-color: #272523; /* near black */
  --roundel-red: hsl(346, 96%, 39%);
  --heading-1-color: var(--roundel-red);
  --main-fg-color: #272523; /* near black */
  --link-color: #339AF0; /* blue 5 */
  --active-link-color: #F06595; /* pink 5 */
  --meta-fg-color: #F1F3F5; /* gray 1 */
  --meta-bg-color: #868E96; /* gray 6 */
  --footer-fg-color: #344;
  --body-font: ff-tisa-web-pro;
  --headings-font: jaf-bernina-sans-narrow; /* ff-tisa-sans-web-pro */
  --header-font: jaf-bernina-sans-narrow;
  --nav-font: jaf-bernina-sans-narrow;
  --meta-font: jaf-bernina-sans-narrow;

  --tab-about-active-bg: hsl(205, 79%, 40%); /* FRENCH BLUE */
  --tab-about-active-fg: #F7F5EE;
  --btn-about-bg: hsl(205, 79%, 95%);
  --btn-about-fg: hsl(205, 79%, 40%);

  --tab-blog-active-bg: hsl(266, 79%, 40%); /* CHRYSLER BLUE */
  --tab-blog-active-fg: #F7F5EE;
  --btn-blog-bg: hsl(266, 79%, 95%);
  --btn-blog-fg: hsl(266, 79%, 40%);

  --tab-photos-active-bg: hsl(31, 40%, 40%); /* RAW UMBER */
  --tab-photos-active-fg: #F7F5EE;
  --btn-photos-bg: hsl(31, 40%, 95%);
  --btn-photos-fg: hsl(31, 40%, 40%);

  --tab-social-active-bg: hsl(143, 30%, 40%); /* SEA GREEN */
  --tab-social-active-fg: #F7F5EE;
  --btn-social-bg: hsl(143, 30%, 95%);
  --btn-social-fg: hsl(143, 30%, 40%);

  --nav1-gray-bg: #adb5bd; /* gray 5 */
  --nav1-gray-fg: #f1f3f5; /* gray 1 */
}

html.dark-mode {
  --body-bg-color: #272523; /* near black */
  --blogroll-bg-color: #373533;
  --header-fg-color: #F7F5EE; /* off white */
  --heading-1-color: hsl(346, 96%, 69%); /* Roundel Red L+30% */
  --main-fg-color: #FFF0D4; /* off white */
  --link-color: #74C0FC; /* blue 3 */
  --active-link-color: #FAA2C1; /* pink 3 */
  --meta-fg-color: #343A40; /* gray 8 */
  --meta-bg-color: #DEE2E6; /* gray 3 */
  /* ^^^ updated for v4 ^^^ */
  --heading-color: #FA9;
  --footer-fg-color: #EEE;
  --tab-about-active-bg: hsl(205, 79%, 60%); /* BLUE L+20%*/
  --tab-blog-active-bg: hsl(266, 79%, 60%); /* CHRYSLER BLUE L+20% */
  --tab-photos-active-bg: hsl(31, 40%, 60%); /* RAW UMBER L+20% */
  --tab-social-active-bg: hsl(143, 30%, 60%); /* SEA GREEN L+20% */
}

/* ==========================================
** PRIMARY CONTAINERS
** ========================================== */

html { font-size: min(3vw, 18px); }

body {
  font-family: sans-serif;
  font-family: var(--body-font);
  font-weight: 400;
  font-style: normal;
  color: var(--main-fg-color);
  background-color: var(--body-bg-color);
  margin: 0;
  padding: 0 0 1em 0;
  font-size: 1.1em;
  height: 100%;
  overflow-wrap: break-word;
  font-variant-numeric: lining-nums;
  -moz-font-feature-settings: "lnum";
  -webkit-font-feature-settings: "lnum";
  font-feature-settings: "lnum";
}

main {
  display: block;
  max-width: 75vw;
  box-sizing: border-box;
  border-radius: 0 0 0.5em 0.5em;
  margin: 0 auto;
  border: none;
  padding: 2em 0;
  text-align: left;
  background-color: var(--main-bg-color);
}

/* =============================================================
** PROFILE PHOTO
** ============================================================= */

img.profile {
  max-width: 20vw;
  width: 10em;
  /* border-radius: 100%; */
  border-radius: 80% 20% 80% 20% / 20% 80% 20% 80%;
  border-width: 0.5em;
  border-color: var(--header-bg-color);
  border-style: solid;
  margin-bottom: 0.5em;
}

/* =============================================================
** MAIN / TEXT LINKS
** ============================================================= */

main a:link, main a:visited {
  color: var(--link-color); text-decoration: none; border: none; }
main a:hover, main a:active {
  color: var(--active-link-color); text-decoration: none; border: none; }

/* =============================================================
** HEADER / NAVIGATION
** ============================================================= */

header {
  width: 75vw;
  margin: 1em auto;
  border: none;
  padding: 0;
}

nav {
  text-align: center;
  font-family: sans-serif;
  font-family: var(--nav-font);
}

nav.top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

nav.top div.left {
  text-align: left;
}

nav.top div.right {
  text-align: right;
  white-space: nowrap;
}

a {
  text-decoration: none;
}

nav.top span {
  border-radius: 8px 8px 0 0;
  border-style: solid;
  padding: 0.5em 0.5em 0.25em 0.5em;
  border-width: 0;
  display: inline-block;
  background-color: var(--nav1-gray-bg);
  color: var(--nav1-gray-fg);
}

nav.top > span.group1 {
  background-color: var(--tab-about-active-bg);
  color: var(--tab-about-active-fg);
}

nav.top > span.group2 {
  background-color: var(--tab-blog-active-bg);
  color: var(--tab-blog-active-fg);
}

nav.top > span.group3 {
  background-color: var(--tab-photos-active-bg);
  color: var(--tab-photos-active-fg);
}

nav.top > span.group4 {
  background-color: var(--tab-social-active-bg);
  color: var(--tab-social-active-fg);
}

nav.top span.tab1 {
  background-color: var(--tab-about-active-bg);
  color: var(--tab-about-active-fg);
}

nav.top span.tab2 {
  background-color: var(--tab-blog-active-bg);
  color: var(--tab-blog-active-fg);
}

nav.top span.tab3 {
  background-color: var(--tab-photos-active-bg);
  color: var(--tab-photos-active-fg);
}

nav.top span.tab4 {
  background-color: var(--tab-social-active-bg);
  color: var(--tab-social-active-fg);
}

nav.bottom {
  text-align: right;
  padding: 0.25em 0;
  margin: 0;
  border: none;
}

nav.bottom a { padding-left: 1em; }

nav.group1 a:link,
nav.group1 a:hover,
nav.group1 a:active,
nav.group1 a:visited { color: var(--tab-about-active-bg); }

nav.group2 a:link,
nav.group2 a:hover,
nav.group2 a:active,
nav.group2 a:visited { color: var(--tab-blog-active-bg); }

nav.group3 a:link,
nav.group3 a:hover,
nav.group3 a:active,
nav.group3 a:visited { color: var(--tab-photos-active-bg); }

nav.group4 a:link,
nav.group4 a:hover,
nav.group4 a:active,
nav.group4 a:visited { color: var(--tab-social-active-bg); }

nav.group0 { border-top: 3px solid var(--nav1-gray-bg); }
nav.group1 { border-top: 3px solid var(--tab-about-active-bg); }
nav.group2 { border-top: 3px solid var(--tab-blog-active-bg); }
nav.group3 { border-top: 3px solid var(--tab-photos-active-bg); }
nav.group4 { border-top: 3px solid var(--tab-social-active-bg); }

img.bean {
  height: 3em;
  width: auto;
  margin-bottom: 0.25em;
}

/* ==========================================
** IMAGES
** ========================================== */

main img, main video {
  display: block;
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 20em;
  border-radius: 0.75em;
  margin-left: auto;
  margin-right: auto;
}

div.caption {
  font-family: var(--meta-font);
  text-align: center;
  line-height: 160%;
  font-size: 0.9em;
}

img.emoji {
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 0;
  /* vertical-align: -0.1em; */
  vertical-align: middle;
  margin-block-start: calc(1ex - 1cap);
}

img.mb-bean {
  width: auto;
  height: 3em;
  vertical-align: bottom;
}

/* =============================================================
** HEADINGS (H1, H2, ETC.)
** ============================================================= */

h1, h2, h3, h4, h5 {
  font-family: serif;
  font-family: var(--headings-font);
  font-weight: 700;
  font-style: normal;
  margin: 1em 0;
  color: var(--main-fg-color);
}

h1 {
  font-style: italic;
  font-size: 1.5em;
  text-align: center;
  color: var(--heading-1-color);
  margin-top: 0;
}

h2 { font-size: 1.25em; }
h3 { font-size: 1.1em; }

h6 {
  font-family: var(--meta-font);
  font-weight: 300;
  text-align: center;
  margin: 0;
}

/* =============================================================
** TEXT STYLES
** ============================================================= */

main p, main li { line-height: 160%; }
main strong, main b { font-weight: 700; }

/* =============================================================
** HELLO! PAGE STYLES
** ============================================================= */

div.metadata { margin-bottom: 0.5em; text-align: center; }

/* =============================================================
** META INFO
** ============================================================= */

div.post-meta { text-align: right; }
aside {
  font-family: sans-serif;
  font-family: var(--meta-font);
  font-weight: 400;
  display: inline-block;
  font-size: 85%;
  color: var(--main-fg-color);
}
aside.post-info { margin-top: 1em; }
aside i {
  padding-right: 0.5em;
  padding-left: 0.5em;
}

.tag {
  font-family: var(--meta-font);
  background-color: var(--meta-bg-color);
  color: var(--meta-fg-color) !important;
  padding: .3em .4em;
  margin: 0.2em;
  border-radius: .5em;
  border-bottom: none !important;
  text-decoration: none !important;
  display: inline-block;
}

/* =============================================================
** TABLES
** ============================================================= */

main table { border-collapse: collapse; margin: 0 auto; }
main td, main th { padding: .4em; font-size: 0.8em; }
main td { border-top: 1px solid var(--body-bg-color); }
table.archive-post-list tr:nth-of-type(2) { counter-reset: row-num; }
table.archive-post-list tr { counter-increment: row-num; }
table.archive-post-list td:first-child::before { content: counter(row-num); }
table.archive-post-list tr td:nth-of-type(1) { text-align: right; }
table.archive-post-list tr td:nth-of-type(2) { white-space: nowrap; }
table.archive-post-list tr th:nth-of-type(1) { text-align: right; }

/* =============================================================
** CONTENT RATINGS - 5 STARS
** ============================================================= */

.star-rating {
  --f: 1; /* num full stars */
  --h: 0; /* num half stars */
  display: inline-block;
  background-image: url("https://cdn.some.pics/mihobu/65429788c3386.png");
  width: 4em;
  height: 0.8em;
  background-size: 4em 8em;
  background-position-y: calc( (-0.8em * (var(--f) - 1)) - (4.8em * var(--h)) );
}

/* =============================================================
** PROGRESS BAR (FOR BOOKS, MOSTLY)
** ============================================================= */

.progress-bar-container {
  display: inline-block;
  width: 60px;
  height: 10px;
  border-radius: 4px;
  border: 1px solid hsl(208,14%,60%);
  /* overflow: hidden; */
  position: relative;
  margin-right: 0.3rem;
  background: linear-gradient(
    90deg,
    Orange 0%, Orange var(--pct),
    var(--main-bg-color) var(--pct), var(--main-bg-color) 100%
  );
}

[data-tooltip]::before {
    /* needed - do not touch */
    content: attr(data-tooltip);
    position: absolute;
    opacity: 0;

    /* customizable */
    transition: all 0.15s ease;
    padding: 0.5rem;
    color: SaddleBrown;
    border-radius: 5px;
    box-shadow: 2px 2px 1px silver;
    font-size: 0.75rem;
    white-space: nowrap;
    line-height: 1;
    text-indent: 0;
}

[data-tooltip]:hover::before {
    /* needed - do not touch */
    opacity: 1;

    /* customizable */
    background: Gold;
    margin-top: 0px;
    margin-left: 0px;
}

[data-tooltip]:not([data-tooltip-persistent])::before {
    pointer-events: none;
}

/* =============================================================
** BLOCKQUOTE
** ============================================================= */

blockquote {
  border-left: 4px solid var(--active-link-color);
  padding-left: 1em;
}

/* =============================================================
** GALLERY
** ============================================================= */

div.gallery {
  text-align: center;
}

div.gallery img {
  border: none;
  border-radius: 10px;
  width: 150px;
  height: auto;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
  display: inline;
}

div.gallery img:hover {
  cursor: pointer;
  box-shadow: 1px 16px 29px -5px rgba(0, 0, 0, 0.75);
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0, 0.9);
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

.modal-content {
  animation-name: zoom;
  animation-duration: 0.4s;
}

@keyframes zoom {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

/* The Close Button */
#close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

#close:hover,
#close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* =============================================================
** COMMENTS
** ============================================================= */

.commentContainer { font-size: 0.8em; border: 1px dashed #787882; padding: 0.5em; margin: 0.5em 0; }
.commentContainer .content p:last-of-type { margin-bottom: 0; }
.commentContainer .pubtime { float: right; }
.commentContainer .content p { margin: 0.5em auto; }
.reply { margin-left: 1em; }

/* =============================================================
** FOOTER
** ============================================================= */

footer {
  display: block;
  margin: 0;
  margin-top: 1em;
  color: var(--footer-fg-color);
  text-align: center; 
  font-size: 0.8em;
}

footer a:link,
footer a:visited,
footer a:hover,
footer a:active {
  color: var(--footer-fg-color);
  text-decoration: none;
  border: 0;
}

footer .prami-logo {
  height: 1em;
  transition: all 0.3s ease;
  margin: 0 .3em -.1em 0;
}

footer #omglink:hover .prami-logo {
  transform: scale(1.5) rotate(20deg);
  transition: all 0.3s ease;
}

div.tinylytics_container {
  display: inline-block;
  border: none;
  border-radius: 5px;
  background-color: var(--main-bg-color);
  padding: 2px 3px;
  height: auto;
  font-size: 85%;
  vertical-align: bottom;
}

div.tinylytics_container a { display: inline-flex; }

div.tinylytics_container button {
  border: none;
  background: none;
}

a.ftr-ii {
  padding: 0 0.25em;
  border-radius: 0.25em;
  background-color: var(--main-bg-color);
  color: var(--link-color) !important;
  margin-left: 0.1em;
  margin-right: 0.1em;
}

/* =============================================================
** CUSTOM ICONS FOR NAVIGATION
** ============================================================= */

i.mb-icons::before {
  content: " ";
  display: inline-block;
  background-size: 100%;
  mask-repeat: no-repeat;
  width: 1em;
  height: 1em;
  background-color: currentColor;
}

/* =============================================================
** LISTS WITH MASK-IMAGE MARKERS (mx-ul, mx-li)
** ============================================================= */

ul.mx-ul {
  text-align: left;
  padding-left: 0;
  text-indent: -2em;
  margin-left: 2em;
  list-style-type: none;
  line-height: 175%;
}

ul.mx-ul li {
  margin-bottom: 0.5em;
}

ul.mx-ul li::before {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.8em;
  overflow: visible;
  position: relative;
}

ul.mx-ul li.mx-li::before {
  content: ' ';
  padding: 0;
  font-size: 1em;
  text-indent: 0;
  /* vertical-align: -0.2em; */
  vertical-align: middle;
  margin-block-start: calc(1ex - 1cap);
  background-color: currentColor;
  mask-repeat: no-repeat;
}

/* =============================================================
** INLINE ICONS USING SVG MASKS (mx-ii)
** ============================================================= */

.mx-ii {
  display: inline-block;
  content: ' ';
  padding: 0;
  font-size: 1em;
  text-indent: 0;
  /* vertical-align: -0.1em; */
  vertical-align: middle;
  margin-block-start: calc(1ex - 1cap);
  background-color: currentColor;
  mask-repeat: no-repeat;
  width: 1em;
  height: 1em;
}

/* =============================================================
** BLOGROLL
** ============================================================= */

div.blogroll-cards {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
}

div.blogroll-container {
  text-align: right;
}

div.blogroll-tab {
  display: inline-block;
  border-radius: 0.25em 0.25em 0 0;
  background-color: var(--meta-bg-color);
  color: var(--meta-fg-color);
  margin-right: 1em;
  margin-left: auto;
  padding: 0.25em 1em;
  font-size: 80%;
  font-family: var(--meta-font);
}

div.blogroll-card {
  padding: 1rem;
  background-color: var(--blogroll-bg-color);
  border-radius: 0.5em 0.5em 0 0;
  text-align: left;
}

div.blogroll-date {
  background-color: var(--blogroll-bg-color);
  border-radius: 0 0 0.5em 0.5em;
  font-size: 80%;
  text-align: right;
  font-family: var(--meta-font);
  padding: 0.25em 1em;
}

div.blogroll-card > h3 {
  margin: 0px;
}

div.blogroll-links {
  margin: 0;
  margin-bottom: 0.25em;
  font-size: 75%;
}

div.blogroll-description {
  font-size: 90%;
}

@media (max-width: 800px) {
  div.blogroll-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  nav.top { display: block; }
  nav.top div.left { text-align: center; }
  nav.top div.right { text-align: center; }
  nav.bottom { text-align: center; }
}

@media (max-width: 600px) {
  div.blogroll-cards {
    grid-template-columns: 1fr;
  }
}