/*@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');
*/

:root {
   --red: #FF8080;  /* red */
   --ora: #FFC080;  /* orange */
   --yel: #FFFF80;  /* yellow */
   --ygr: #C0FF80;  /* yellow green */
   --gre: #80FF80;  /* green */
   --gaq: #80FFC0;  /* green aqua */
   --aqu: #80FFFF;  /* aqua */
   --baq: #80C0FF;  /* blue aqua */
   --blu: #8080FF;  /* blue */
   --bpu: #C080FF;  /* blue purple */
   --pur: #FF80FF;  /* purple */
   --mag: #FF80C0;  /* magenta */
   --cText: #111;   /* text color */
   --cMain: #fff;   /* main color */
   --cHili: var(--yel);  /* hilite color */
   --cHovr: var(--pur);  /* hover color */
}

*{ /* clear! */
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
html {
/* font-family: Poppins, 'Segoe UI', sans-serif; */
   font: 16pt "verdana";
   color: var(--cText);
   scroll-behavior: smooth; /*For bookmark links*/
}
body {
   min-height: 100vh;
   min-height: 100dvh;
   background-color: var(--cMain);
}

b {font-size: 20pt;   color: var(--pur);}

.ui-icon-background, .ui-state-active .ui-icon-background
{background-color: #fff;}

.ui-button:hover.red {color: black; background: var(--red);}
.ui-button:hover.ora {color: black; background: var(--ora);}
.ui-button:hover.yel {color: black; background: var(--yel);}
.ui-button:hover.ygr {color: black; background: var(--ygr);}
.ui-button:hover.gre {color: black; background: var(--gre);}
.ui-button:hover.gaq {color: black; background: var(--gaq);}
.ui-button:hover.aqu {color: black; background: var(--aqu);}
.ui-button:hover.baq {color: black; background: var(--baq);}
.ui-button:hover.blu {color: black; background: var(--blu);}
.ui-button:hover.bpu {color: black; background: var(--bpu);}
.ui-button:hover.pur {color: black; background: var(--pur);}
.ui-button:hover.mag {color: black; background: var(--mag);}

/*
main {
   padding: min(3em, 7%);
}
*/
main p {
   margin-top: .35em;
}
nav {
   background-color:        var(--cMain);
   border-bottom: 1px solid var(--cHovr);
}
nav ul {
   list-style: none;
   display: flex;
}
nav .li-home {
   margin-right: auto;
}
nav li {
   display: flex;
}
nav a {
   display: flex;
   text-decoration: none;
   color: var(--cText);
   padding: 1em 2em;
   transition: background-color 150ms ease;
}
nav a:hover {
   background-color: var(--cHovr);
}
nav a.nav-pick {
   border-bottom: 2px solid var(--cText);
}
nav a.nav-hili {
   background-color: var(--cHili);
}
#btn-nav-open {
   display: none;
   background: none;
   border: none;
   padding: 1em;
   margin-left: auto;
   cursor: pointer;
}
#btn-nav-shut {
   display: none;
   background: none;
   border: none;
   padding: 1em;
   cursor: pointer;
}
#nav-over {
   background: rgba(0, 0, 0, 0.5);
   position: fixed;
   inset: 0;
   z-index: 9;
   display: none;
}
@media screen and (max-width: 700px) {
   #btn-nav-open, #btn-nav-shut {
      display: block;
   }
   nav {
      position: fixed;
      top: 0;
      right: -100%;
      height: 100vh;
      width: min(15em, 100%);
      z-index: 10;
      border-left: 1px solid var(--cHovr);
      transition: right 300ms ease-in-out;
   }
   nav.show {
      right: 0;
   }
   nav.show ~ #nav-over {
      display: block;
   }
   nav ul {
      width: 100%;
      flex-direction: column;
   }
   nav a {
      width: 100%;
      padding-left: 2.5em;
   }
   nav a.nav-pick {
      border-bottom: none;
   }
   nav .li-home {
      margin-right: unset;
   }
}

.ui-select  {width: 320px;}

.comment {
   max-width: 640px;  font-size: 22pt;   color: #003050;
   background-color: #00F0FF;
   padding: 10px;
   border: solid 3px #0F7391;
}