/* Start of w3collapsible
    /* Style the button that is used to open and close the collapsible content */
.collapsibleButton {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font: inherit;
  /* font-size: 15px; */
  font-size: 100%;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.collapsibleButton:hover,
.activeCollapsible {
  background-color: #ccc;
}
/* Style the collapsible content. Note: hidden by default */
.contentCollapsible {
  /* padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #f1f1f1; */

  padding: 0 18px;
  /* background-color: white; */
  background-color: #f1f1f1;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
/* End of w3collapsible */

/* for colour changing bg */
canvas {
  display: block;
  width: 100vw;
  height: 100vh;
  position: fixed; /* fixed or absolute */
  top: 0;
  left: 0;
}
/* end colour changing bg */

/* link styles https://codepen.io/masonconkright/pen/aJOoVO */
/* Link Style 3 you have to wrap the <a> with a <span> and give the span this class*/
.link3 a {
  color: #343139;
  text-decoration: none;
  /* border-bottom: .125em solid #ff6407; */
  border-bottom: 0.05em solid #b4e7f8;
  /* box-shadow: inset 0 -0.125em 0 #ff6407; */
  box-shadow: inset 0 -0.05em 0 #b4e7f8;
  transition: box-shadow 270ms cubic-bezier(0.77, 0, 0.175, 1),
    color 270ms cubic-bezier(0.77, 0, 0.175, 1);
}
.link3 a:hover {
  /* box-shadow: inset 0 -1.125em 0 #ff6407; */
  box-shadow: inset 0 -1.125em 0 #b4e7f8;
  color: #000;
}
.link3 a:focus {
  background: #fff;
  outline: none;
  background: #b4e7f8;
  color: #fff;
  box-shadow: 8px 8px 24px rgba(0, 0, 0, 0.2);
}
/* end link styles */

/* Change user highlight colour */
/* ["#FF6138", "#FFBE53", "#2980B9", "#282741"] */
::selection {
  background-color: #282741;
  color: white;
}
/* End Change user highlight colour */

/* Start Tooltip CSS --- https://codepen.io/Johannes-R-nn/pen/BavjGxd*/
.highlight {
  position: relative;
  display: inline-block;
}
.highlight__text {
  transition: 250ms ease-out;
}
.highlight__tooltip {
  color: #f3f3f3;
  background: #16161d;
  padding: 15px;
  width: clamp(180px, 100%, 375px);
  font-weight: normal;
  font-style: normal;
  z-index: 1;
  position: absolute;
  align-items: center;
  gap: 0.25rem;
  display: none;
  border-radius: 0.25rem;
  top: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  font: inherit;
}
.highlight__tooltip a:visited,
.highlight__tooltip a:link,
.highlight__tooltip a:active {
  color: #f3f3f3;
}
.highlight__tooltip:after {
  content: "";
  border: 5px solid transparent;
  border-bottom-color: #16161d;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translatex(-50%) translatey(-10px);
}
.highlight:hover .highlight__text,
.highlight:focus .highlight__text {
  border-radius: 0;
  border-color: transparent;
}
.highlight:hover .highlight__tooltip,
.highlight:focus .highlight__tooltip {
  display: grid;
  animation: fadeIn 250ms;
}
.highlight:focus .highlight__tooltip {
  z-index: 2;
}
.highlight.highlight--link {
  color: inherit;
  text-decoration: inherit;
}
.highlight.highlight--link .highlight__tooltip {
  grid-template-columns: auto 1fr;
  min-width: 180px;
  width: max-content;
  max-width: 100%;
}
.highlight.highlight--link .highlight__href {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* End Tooltip CSS*/