/* PicnicCss Hugo Wrapper - microcontroller friendly theme */
/* pihuw variables */
:root {
  /* 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%);

  /* default screen break points */
  --pi-break-s: 500px;
  --pi-break-m: 800px;
  --pi-break-w: 1100px;

  /* named elements - pihuw controls */
  --pihuw-dark-bg: var(--mm-purple);
  --pihuw-blue: var(--mm-blue);

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

  /* pihuw named colors & highlights */
  --pi-text: var(--mm-dark);
  /* annotation text, reading time */
  --pi-hi1: var(--mrx-green);
  /* sidebar, th */
  --pi-hi2: var(--mrx-purple);
  /* buttons */
  --pi-hi3: var(--mrx-amber);
  --pi-bg1: hsl(from var(--pi-hi1) h s 95%);
  --pi-bg2: hsl(from var(--pi-hi2) h s 95%);
  --pi-bg3: hsl(from var(--pi-hi3) h s 95%);
}

body {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  line-height: 1.25;
  color: var(--mm-dark);
  background-color: #fff;
  margin: 0em 2em;
  padding: 0;
}

/* general highlights for widgets */
.card.hi-1 {
  color: var(--pi-hi1);
  background-color: var(--pi-bg1);
}

/* specialty text styles & colors */
code {
  color: var(--pihuw-blue);
}
/*   _                            _                             _     */
/*  | |__   _ _   ___   __ _   __| |  __   _ _   _  _   _ __   | |__  */
/*  | '_ \ | '_| / -_) / _` | / _` | / _| | '_| | || | | '  \  | '_ \ */
/*  |_.__/ |_|   \___| \__,_| \__,_| \__| |_|    \_,_| |_|_|_| |_.__/ */
.breadcrumb {
  margin-top: 3.5em;
  height: 1em;
  border: none;
  box-shadow: none;
  text-align: center;
}
/*                      */
/*  _ _    __ _  __ __  */
/* | ' \  / _` | \ V /  */
/* |_||_| \__,_|  \_/   */
.pi-nav {
  /* the full nav bar */
  color: var(--mm-green);
  margin: 0 15%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* set bottom to push everything else down the page*/
  bottom: 3.5em;
}

.pi-nav-pad {
  /* padding to drop below the fixed nav bar */
  padding-top: 0.3em;
}


nav .pi-nav-brand {
  /* just the left hand brand section*/
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

nav .pi-nav-brand .logo {
  flex-shrink: 2;
  margin: 0 0.5em 0 0;
}

nav .pi-nav-brand .title {
  flex-shrink: 8;
  margin: 0;
}

nav .pi-nav-brand .logo img {
  /* force the image (especially svg) to fit in the bounding box*/
  flex: 'flex-shrink';
  height: 100%;
  object-fit: contain;
}

nav .pi-nav-brand .title {
  display: block;
  object-fit: contain;
}
nav div.view-w div.menu {
  color:#FF4088;
}

section img {
  display: inline;
  height: 70%;
  object-fit: contain;
}

main footer.caption {
  font-style: italic;
  font-weight: bold;
  color: var(--pi-hi3);
  background-color: var(--pi-bg3);
  text-align: center;
}

section>div.block{
  align-items: stretch;
}
div img.src.block {
  display: flex;
  width:100%;
}
 .txt.block .card{
  height:100%;
  padding: 0.3em;
}
section  footer {
  text-align: center;
  font-size: smaller;
  font-style: italic;
  color: var(--pi-hi2);
}

#block-1 > div > div.fifth > footer

.pi-reading-time {
  size: 80%;
  color: var(--pi-hi1)
}
/*                                _                     */
/*   _ _    __ _  __ __  ___   __| |  _ _   ___   _ __  */
/*  | ' \  / _` | \ V / |___| / _` | | '_| / _ \ | '_ \ */
/*  |_||_| \__,_|  \_/        \__,_| |_|   \___/ | .__/ */
/*                                               |_|    */
.dropbtn {
  background-color: var(--pi-hi3);
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--pi-bg3);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  right:0
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: var(--pi-hi3)}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color:  var(--pi-bg3);
}
/*       _      _         _                  */
/*  ___ (_)  __| |  ___  | |__   __ _   _ _  */
/* (_-< | | / _` | / -_) | '_ \ / _` | | '_| */
/* /__/ |_| \__,_| \___| |_.__/ \__,_| |_|   */
sidebar {
  display: inline-flex;
  color: var(--pi-hi2);
  background-color: var(--pi-bg2);
  border: 1px solid var(--pi-hi2);
  border-radius: 0.5em;
  padding: 0.6em;
  height: 100%;
}

.childbar-horizontal {
  padding:0.3em 1em;
  text-align:center;
  width: 100%;
}
.childbar-horizontal .divider {
  color:var(--pi-hi3);
  font-weight:bold;
}
/* #          _   _                        _                      */
/* #   _ __  (_) | |_    _  _  __ __ __   | |  ___   __ _   ___   */
/* #  | '_ \ | | | ' \  | || | \ V  V /   | | / _ \ / _` | / _ \  */
/* #  | .__/ |_| |_||_|  \_,_|  \_/\_/    |_| \___/ \__, | \___/  */
/* #  |_|                                           |___/         */
.logo-pi {
  color: var(--fomantic-theme-color);
}

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

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

/* custom styling for the site title text in the menu*/
#siteTitleMenu {
  font-weight: bold;
  color: var(--pi-hi1);
  margin-top: auto;
  vertical-align: middle;
}

/*   _                                                      */
/*  | |_   __ _  __ __  ___   _ _    ___   _ __    _  _     */
/*  |  _| / _` | \ \ / / _ \ | ' \  / _ \ | '  \  | || |    */
/*   \__| \__,_| /_\_\ \___/ |_||_| \___/ |_|_|_|  \_, |    */
/*                                                 |__/     */

/* a flexbox for aligning centered things with tags like buttons and tags */
.pi-flex-with-tags {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

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

/* pihuw taxonomy label classes */
.ui.pi-tax-1.label {
  background: hsl(from var(--pi-hi1) h s 95%);
  backdrop-filter: 200%;
  border-color: var(--pi-hi1);
  color: var(--pi-hi1);
}

.ui.pi-tax-2.label {
  background: hsl(from var(--pi-hi2) h s 95%);
  border-color: var(--pi-hi2);
  color: var(--pi-hi2);
}

.ui.pi-tax-3.label {
  background: hsl(from var(--pi-hi3) h s 95%);
  border-color: var(--pi-hi3);
  color: var(--pi-hi3);
}

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

/*   _                                      */
/*  | |__   __ _   _ _    _ _    ___   _ _  */
/*  | '_ \ / _` | | ' \  | ' \  / -_) | '_| */
/*  |_.__/ \__,_| |_||_| |_||_| \___| |_|   */
/* pihuw footer row*/
.banner {
  display: block;
  text-align: center;
  color: var(--pi-hi1);
  background-color: hsl(from var(--pi-hi1) h s 95%);
  font-size: 1.3em;
  padding: 0.5em;
  width: 100%;
}

.banner .text {
  color: var(--pi-hi2);
  flex-grow: 1;
}

.banner .header {
  font-weight: bolder;
  flex-grow: 1;
}

/*   _             _     _                 */
/*  | |__   _  _  | |_  | |_   ___   _ _   */
/*  | '_ \ | || | |  _| |  _| / _ \ | ' \  */
/*  |_.__/  \_,_|  \__|  \__| \___/ |_||_| */
.button {
  background-color: var(--pi-hi3);
}

/*                                    _     _   _     _        */
/*   _ __   __ _   __ _   ___   ___  | |_  (_) | |_  | |  ___  */
/*  | '_ \ / _` | / _` | / -_) |___| |  _| | | |  _| | | / -_) */
/*  | .__/ \__,_| \__, | \___|        \__| |_|  \__| |_| \___| */
/*  |_|           |___/                                        */
main div.page-title {
  background-color: var(--pi-bg2);
  border-radius: 0.5em;
  border: solid 1px var(--pi-hi2);
  align-items: center;
  padding: .2em;
}

/*   _            _      _        */
/*  | |_   __ _  | |__  | |  ___  */
/*  |  _| / _` | | '_ \ | | / -_) */
/*   \__| \__,_| |_.__/ |_| \___| */
th {
  background-color: var(--pi-hi2);
  color: var(--pi-bg2);
}

/*   __               _                   */
/*  / _|  ___   ___  | |_   ___   _ _     */
/* |  _| / _ \ / _ \ |  _| / -_) | '_|    */
/* |_|   \___/ \___/  \__| \___| |_|      */
/* pihuw footer row*/
.footer {
  display: flex;
  flex-flow: wrap;
  color: var(--mrx-skin);
  background-color: var(--mrx-green);
  display: inline-flex;
  align-items: center;
  font-size: 0.7em;
  padding: 1px;
}

.footer .left {
  text-align: center;
  flex-grow: 1;
}

.footer .middle {
  text-align: center;
  flex-grow: 4;
}

.footer .right {
  text-align: center;
  flex-grow: 2;
}

/* all labels in the row */
.footer .left .label,
.footer .middle .label,
.footer .right .label {
  color: var(--mrx-green);
  background-color: hsl(from var(--mrx-green) h 20% 60%);
  margin: 1px;
  padding: 1;
  font-size: 1em;
  /* border: 2px solid var(--mrx-white); */
}

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

/* all text in the row with a link*/
.footer .label>a:hover {
  color: red;
}

.pi-footer-label {
  color: lighten(var(--mm-purple), 40%);
}

.pi-footer-title {
  color: lighten(var(--mrx-green), 40%);
  font-size: 1.2em;
}

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

.pi-menu-n {
  display: none;
}

/*  On narrow screens - opposite */
@media screen and (max-width: var(--pi-break-mid)) {
  .pi-nav-pad {
    /* padding to drop below the fixed nav bar */
    padding-top: 6em;
  }
}


@media screen and (max-width: var(--pi-break-w)) {
  .pi-nav-pad {
    /* padding to drop below the fixed nav bar */
    padding-top: 3.5em;
  }
}


/*                                   _   _               */
/*   __ _   __   __   ___   _ _   __| | (_)  ___   _ _   */
/*  / _` | / _| / _| / _ \ | '_| / _` | | | / _ \ | ' \  */
/*  \__,_| \__| \__| \___/ |_|   \__,_| |_| \___/ |_||_| */

  /* Core styles/functionality */
  .tab {
    position: relative;
  }

  .tab input {
    position: absolute;
    opacity: 0;
    z-index: -1;
  }

  .tab__content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.35s;
  }

  .tab input:checked~.tab__content {
    max-height: 100%;
  }

  /* --- Visual styles ---   */
  .accordion {
    border-left: 1px solid lightgray;
    border-radius:none;
    overflow: hidden;
  }

  .tab__label,
  .tab__close {
    display: flex;
    background: var(--theme);
    cursor: pointer;
    padding: 0;
  }

  .tab__label {
    justify-content: space-between;
    padding: 0.2rem 1rem ;
  }

  .tab__label::after {
    content: "\276F";
    width: 1em;
    height: 1em;
    text-align: center;
    transform: rotate(90deg);
    transition: all 0.35s;
  }

  .tab input:checked+.tab__label::after {
    transform: rotate(270deg);
  }

  .tab__content p {
    margin: 0;
    padding: 0.2rem 1rem ;
  }

  .tab__close {
    justify-content: flex-end;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
  }

  .accordion--radio {
    --theme: var(--secondary);
  }

  /* Arrow animation */
  .tab input:not(:checked)+.tab__label:hover::after {
    animation: bounce .5s infinite;
  }

  @keyframes bounce {
    25% {
      transform: rotate(90deg) translate(.25rem);
    }

    75% {
      transform: rotate(90deg) translate(-.25rem);
    }
  }

/** HR rainbow */
hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, 
    hsl(0, 100%, 50%), 
    hsl(180, 100%, 50%)
  );
  animation: hue-rotate 10s linear infinite;
}

@keyframes hue-rotate {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

/*                                             _                       _                      */
/*   _ _   ___   ___  _ __   ___   _ _    ___ (_) __ __  ___    __ __ (_)  ___  __ __ __  ___ */
/*  | '_| / -_) (_-< | '_ \ / _ \ | ' \  (_-< | | \ V / / -_)   \ V / | | / -_) \ V  V / (_-< */
/*  |_|   \___| /__/ | .__/ \___/ |_||_| /__/ |_|  \_/  \___|    \_/  |_| \___|  \_/\_/  /__/ */
/*                   |_|                                                                      */
/* the single letter classes are switched depending on width */
.view-s {
  display: none;
}

.view-m {
  display: none;
}

.view-w {
  display: flex;
}

@media screen and (max-width: 800px) {
  .view-s {
    display: none;
  }

  .view-m {
    display: flex;
  }

  .view-w {
    display: none;
  }
}

@media screen and (max-width: 500px) {
  .view-s {
    display: flex;
  }

  .view-m {
    display: none;
  }

  .view-w {
    display: none;
  }
}