/* fohuw variables */
:root {
  --fo-wide-max: 800px;
  /* mrmxf pallette */
  --mm-yellow: hsl(46, 50%, 52%);
  --mm-green: hsl(80, 45%, 49%);
  --mm-purple: hsl(324, 45%, 42%);
  --mm-blue: hsl(243, 36%, 39%);
  --mm-black: hsl(0, 0%, 0%);
  --mm-dark: hsl(0, 0%, 20%);
  --mm-light: hsl(0, 0%, 93%);
  --mm-white: hsl(0, 0%, 100%);
  /* metarex.media pallette */
  --mrx-amber: var(--mm-yellow);
  --mrx-purple: var(--mm-purple);
  --mrx-green: hsl(88, 45%, 30%);
  --mrx-grey: var(--mm-dark);
  /* named elements - visual objects */
  --mrx-skin: hsl(88, 45%, 60%);
  --mrx-eye: hsl(354, 45%, 42%);
  --mrx-trainFill: lighten(var(--mrx-grey), 25%);
  --mrx-sky: lighten(var(--mrx-amber), 40%);
  --mrx-ground: lighten(var(--mrx-purple), 25%);

  /* named elements - fohuw controls */
  --fohuw-blue: var(--mm-blue);
  --fohuw-code: var(--mm-purple);
  --fohuw-dark-bg: var(--mm-purple);
  --fohuw-footer: hsl(from var(--mrx-skin) h s 70);
  --fohuw-footer-link: hsl(from var(--mrx-eye) h s 35);
  --fohuw-footer-hover: hsl(from var(--mrx-eye) h 100 35);
  --fohuw-footer-bg: var(--mrx-green);
  --fohuw-subtle-bg: hsl(from var(--mrx-green) h s 98%);

  /* colors of the logo */
  --fomantic-theme-color: #35BDB2;
  --hugo-theme-color: #FF4088;
  --cardboard-wrapper: #D8B588;

  /* fohuw named colors & highlights */
  --fo-text: var(--mm-dark);
  --fo-hi-1: var(--mrx-green);
  --fo-hi-2: var(--mrx-purple);
  --fo-hi-3: var(--mrx-amber);
}

/*              _                 __              _            _        */
/*   __   ___  | |  ___   _ _    / _|___     ___ | |_   _  _  | |  ___  */
/*  / _| / _ \ | | / _ \ | '_|   > _|_ _|   (_-< |  _| | || | | | / -_) */
/*  \__| \___/ |_| \___/ |_|     \_____|    /__/  \__|  \_, | |_| \___| */
/*                                                      |__/            */
code {
  color: var(--fohuw-code);
}

.ui .ui.list .description {
  color: darkgrey;
}

.fo-reading-time {
  size: 80%;
  color: var(--fo-hi-1)
}

.logo-fo {
  color: var(--fomantic-theme-color);
}

.logo-hu {
  color: var(--hugo-theme-color);
}

.logo-w {
  color: var(--fo-logo-w);
}

/*                       _                  */
/*   _ _    __ _  __ __ | |__   __ _   _ _  */
/*  | ' \  / _` | \ V / | '_ \ / _` | | '_| */
/*  |_||_| \__,_|  \_/  |_.__/ \__,_| |_|   */
/* custom styling for the site title text in the menu*/
#siteTitleMenu {
  font-weight: bold;
  color: var(--fo-hi-1)
}

/* On wide screens display full menu, hide narrow menu */
.fohuw-wide {
  display: flex;
}

.fohuw-mobile {
  display: none;
}

/*  On narrow screens - opposite */
@media (max-width: 800px) {
  .fohuw-wide {
    display: none;
  }

  .fohuw-mobile {
    display: flex;
  }
}

header .fohuw-wide .navbar {
  display: flex;
  align-items: stretch;
  column-gap: 0.5em;
  margin-bottom: 0.5em;
  width: 100%;
}

/* html.no-js body div.ui.wide.container header div.fohuw-wide div.navbar div nav.ui.bottom.attached.centered.fluid.borderless.wrapping.menu.navbar2 */
.ui.menu.navbar2 {
  background-color: var(--fohuw-subtle-bg);
}

.ui.segment.fohuw-sidebar {
  background-color: var(--fohuw-subtle-bg);
}

/* html body div.ui.wide.container header div.fohuw-mobile div.ui.compact.menu.fohuw-mobile div.ui.item.title */
header .fohuw-mobile .ui.item.title {
  flex-grow: 20;
  font-size: 1.5em;
}

/*        _      _         _                  */
/*   ___ (_)  __| |  ___  | |__   __ _   _ _  */
/*  (_-< | | / _` | / -_) | '_ \ / _` | | '_| */
/*  /__/ |_| \__,_| \___| |_.__/ \__,_| |_|   */
.fohuw-sidebar-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}
.fohuw-sidebar-column {
  flex: flex-grow 1;
}
.fohuw-sidebar-main {
  flex-grow: 3;
}
/*    __               _                */
/*   / _|  ___   ___  | |_   ___   _ _  */
/*  |  _| / _ \ / _ \ |  _| / -_) | '_| */
/*  |_|   \___/ \___/  \__| \___| |_|   */

/* fohuw footer row*/
footer .row {
  color: var(--fohuw-footer);
  background-color: var(--fohuw-footer-bg);
}

/* all labels in the row ()inverted colors */
footer .row .labels .label {
  color: var(--fohuw-footer-bg);
  background-color: var(--fohuw-footer);
}

/* all text in the row with a link*/
footer .row .labels .label>a {
  color: var(--fohuw-footer-link);
  opacity: 1;
}

/* all text in the row with a link*/
footer .row .labels .label>a:hover {
  color: var(--fohuw-footer-hover);
}

/*   _                       */
/*  | |_   __ _   __ _   ___ */
/*  |  _| / _` | / _` | (_-< */
/*   \__| \__,_| \__, | /__/ */
/*               |___/       */
/* a flexbox for aligning centered things with tags like buttons and tags */
.fohuw-blog-summary-buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

/* a flexbox  for aligning titles and tags */
.fohuw-list-title-tags {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

/* fohuw taxonomy label classes */
.ui.fohuw-taxonomy1.label {
  background: hsl(from var(--fo-hi-1) h s 95%);
  backdrop-filter: 200%;
  border-color: var(--fo-hi-1);
  color: var(--fo-hi-1);
}

.ui.fohuw-taxonomy2.label {
  background: hsl(from var(--fo-hi-2) h s 95%);
  border-color: var(--fo-hi-2);
  color: var(--fo-hi-2);
}

.ui.fohuw-taxonomy3.label {
  background: hsl(from var(--fo-hi-3) h s 95%);
  border-color: var(--fo-hi-3);
  color: var(--fo-hi-3);
}

.ui.fohuw-taxonomy4.label {
  background: hsl(from var(--fo-hi-4) h s 95%);
  border-color: var(--fo-hi-4);
  color: var(--fo-hi-4);
}