/* © 2024 Jim Taylor */

html {
  scroll-padding-top: 60px;   /* snap named links below nav bar (after following internal hrefs)*/
}

body {
  font-family: "Open Sans", "Lucida Sans Unicode", "Lucida Sans", Arial, sans-serif;
  max-width: 80%;
  margin: auto;
  padding-bottom: 40px;
}

h1, h2, h3, h4 {
  font-family: "Verdana", Arial, sans-serif;
}

h2 {
  padding-top: 20px;
}

/* Top navigation nmenu */
ul.topnav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-image: linear-gradient(to right, #4C721D , #A8D18F);
}

ul.topnav li {float: left;}

ul.topnav li a {
  display: block;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul.topnav li a:hover:not(.active) {background-color: #3a5717;}

/* Indicate in the menu which page you're on */
ul.topnav li a.active {
  text-decoration: underline;
  text-decoration-thickness: 0.3rem;
}

.topnav_spacer {
  padding-top: 60px;
}

/* small screens */
@media screen and (max-width: 411px) {
  ul.topnav li.right, 
  ul.topnav li {float: none;}
  .topnav_spacer {padding-top: 80px;}
}

/* Top-level menu */
.topic-grid {
  display: flex;
  flex-wrap: wrap;
}

.topic-box {
  float: left;
  width: 300px;
  margin: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.topic-box img {
  height: auto;
}

.topic-caption {
  position: absolute;
  text-align: center;
  font-family: Verdana, sans-serif;
  font-size: xx-large;
  font-weight: 700;
  padding: 10px;
  color: black;
  background-color: white;
  opacity: 80%;
  border-radius: 10%;
  transition: opacity 0.3s ease;
}

/* Page-level menu */
.page-menu-item {
  color: black;
  font-family: "Verdana", Arial, sans-serif;
  font-size: x-large;
  font-weight: bold;
  text-decoration: none;
  padding: 24px 16px;
}

/* Misc */


.two-col {
  display: grid;
  grid-template-columns: 200px auto;
  row-gap: 4px;
}

.two-col-header {
  padding-top: 4px;
  padding-bottom: 4px;
  font-weight: bold;
  text-decoration: underline;
  text-decoration-color: #2EC1C7;
}

.two-col-term {
  font-style: italic;
  padding-top: 10px;
}

.two-col-descr {
  padding-top: 10px;
}

.note {
  /* background-color: rgb(255, 245, 235); */
  font-size: smaller;
  margin-left: 40px;
  padding: 6px;
}

/*** Tooltip ***/
  /* Select elements with data-tooltip attribute and put the text invisibly "before" */
[data-tooltip]::before {
  content: attr(data-tooltip);  /* get the tooltip text */
  position: relative;
  display: inline-block;   /* not sure we need this */
  background-color: #FFDD9C;
  font-size: 70%;
  color: #000;
  border-radius: 6px;
  padding: 3px 1em;
  max-width: 30vw;  /* don't let the tooltip get wider than 30% of the viewport */

  position: absolute;
  z-index: 1;
  transform: translateY(-90%);   /* put it above the element (90% keeps it a little closer) */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s, visibility 0.5s; /* fade out; needs to include both opacity and visibility so it doesn't hide before opacity transitions */
}

  /* Show the tooltip on hover and focus */
[data-tooltip]:hover::before,
[data-tooltip]:focus::before {
  visibility: visible;
  opacity: 1;
  transition: opacity 1s;   /* fade in */
}