h1.home-heading {
  font-size: 3.5em;
  text-align: center;
  margin: auto;
  font-family: var(--spartan-font);
  font-weight: 700;
}

h1.home-heading.orange {
  color: var(--theme-orange);
}

h1.home-heading.cyan {
  color: var(--theme-neon-blue);
}
h3.home-heading.cyan {
  color: var(--theme-neon-blue);
}

h3.quote {
  font-size: 2.5em;
  text-align: center;
  font-style: italic;
  width: 100%;
  margin: -10% auto 0 auto;
  color: var(--theme-white);
  font-family: var(--libre-font);
  font-weight: 400;
}

.img-container {
  margin-top: 2.5%;
}

.img-container img {
  width: 10%;
  margin: 0 45%;
}

.author-container {
  margin-top: 2%;
}

h4.author {
  font-size: 1.75em;
  font-family: var(--spartan-font);
  color: var(--theme-orange);
  text-align: right;
  margin: 0;
  width: 70%;
  font-weight: 500;
}



[aria-label][tooltip-position]::before,
[aria-label][tooltip-position]::after {
  --scale: 0;
  position: absolute;
  font-size: 1rem;
  transition: transform 400ms;
  transition-timing-function: ease-out;
}

[aria-label][tooltip-position]:hover::before,
[aria-label][tooltip-position]:hover::after {
  --scale: 1;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.45, 1.93);
}


[aria-label][tooltip-position]::before {
  content: attr(aria-label);
  background-color: var(--tooltip-color);
  padding: 0.5em;
  border-radius: 0.3em;
  width: fit-content;
  min-width: 150%;
  text-align: center;
  transform: scale(0);
}

[aria-label][tooltip-position]::after {
  content: "";
  border: var(--arrow-size) solid transparent;
}

[aria-label][tooltip-position]::before,
[aria-label][tooltip-position]::after {
  --tooltip-color: orange;
  --arrow-size: 0.5rem;
  --scale: 0;

  z-index: 1;
  font-size: 1rem;
  transform: translate(var(--translate-x), var(--translate-y))
    scale(var(--scale));
}

/** Right  */

[aria-label][tooltip-position="right"]::before {
  --translate-x: calc(100% + var(--arrow-size));
  --translate-y: -50%;
  right: 0px;
  top: 50%;
  transform-origin: left center;
}

[aria-label][tooltip-position="right"]::after {
  --translate-x: calc(var(--arrow-size));
  --translate-y: -50%;
  right: 0px;
  top: 50%;
  border-right-color: var(--tooltip-color);
  transform-origin: left center;
}

/** Bottom  */

[aria-label][tooltip-position="bottom"]::before {
  --translate-x: -50%;
  --translate-y: calc(100% + var(--arrow-size));
  bottom: 0px;
  left: 50%;
  transform-origin: top center;
}

[aria-label][tooltip-position="bottom"]::after {
  --translate-x: -50%;
  --translate-y: calc(var(--arrow-size));
  left: 50%;
  bottom: 0px;
  border-bottom-color: var(--tooltip-color);
  transform-origin: top center;
}

/** Top */

[aria-label][tooltip-position="top"]::before {
  position: absolute;
  --translate-x: -50%;
  --translate-y: calc(-100% - var(--arrow-size));
  top: 0px;
  left: 50%;
  transform-origin: bottom center;
}

[aria-label][tooltip-position="top"]::after {
  --translate-x: -50%;
  --translate-y: calc(-1 * var(--arrow-size));
  top: 0px;
  left: 50%;
  border-top-color: var(--tooltip-color);
  transform-origin: bottom center;
}

/** Left */

[aria-label][tooltip-position="left"]::before {
  --translate-x: calc(-100% - var(--arrow-size));
  --translate-y: -50%;
  left: 0px;
  top: 50%;
  transform-origin: right center;
}

[aria-label][tooltip-position="left"]::after {
  --translate-x: calc(-1 * var(--arrow-size));
  --translate-y: -50%;
  left: 0px;
  top: 50%;
  border-left-color: var(--tooltip-color);
  transform-origin: right center;
}

/** Top */

[aria-label][tooltip-position="top"]::before {
  position: absolute;
  --translate-x: -50%;
  --translate-y: calc(-100% - var(--arrow-size));
  top: 0px;
  left: 50%;
  transform-origin: bottom center;
}

[aria-label][tooltip-position="top"]::after {
  --translate-x: -50%;
  --translate-y: calc(-1 * var(--arrow-size));
  top: 0px;
  left: 50%;
  border-top-color: var(--tooltip-color);
  transform-origin: bottom center;
}

/** Left */

[aria-label][tooltip-position="left"]::before {
  --translate-x: calc(-100% - var(--arrow-size));
  --translate-y: -50%;
  left: 0px;
  top: 50%;
  transform-origin: right center;
}

[aria-label][tooltip-position="left"]::after {
  --translate-x: calc(-1 * var(--arrow-size));
  --translate-y: -50%;
  left: 0px;
  top: 50%;
  border-left-color: var(--tooltip-color);
  transform-origin: right center;
}



.image-hover {
  text-align: center;
  position: relative;
}
.image-hover button {
  border: none;
  background-color: transparent; 
  position: absolute;
}
.image-hover button.mRNA {
  top: 46%;
  width: 8%;
  right: 39.75%;
  height: 10%;
  border-radius: 30px;
}
.image-hover button.DNA {
  top: 46%;
  width: 8%;
  left: 34.5%;
  height: 10%;
  border-radius: 30px;
}

.image-hover button.truck {
  top: 7%;
  width: 9.5%;
  left: 35%;
  height: 20%;
  border-radius: 100px;
}
.image-hover button.shield {
  top: 40%;
  width: 9.5%;
  left: 15.8%;
  height: 20%;
  border-radius: 100px;
}
.image-hover button.mouse {
  bottom: 3%;
  width: 9.5%;
  left: 34%;
  height: 20%;
  border-radius: 100px;

}
.image-hover button.clock {
  top: 7%;
  width: 9.5%;
  right: 40%;
  height: 20%;
  border-radius: 100px;
}
.image-hover button.magnifier {
  bottom: 40%;
  width: 9.5%;
  right: 21%;
  height: 20%;
  border-radius: 100px;
}
.image-hover button.arrows {
  bottom: 3%;
  width: 9.5%;
  right: 39%;
  height: 20%;
  border-radius: 100px;
}

.image-hover img {
  width: 75%;
  margin: -15% auto;
}

div.sub-heading-container {
  margin: 20% 0 5% 0;
  text-align: center;
}

h1.fancy-head {
  font-size: 5em;
  color: var(--theme-fancy-head);
  font-family: var(--libre-font);
  font-weight: 400;
  font-style: italic;
  margin: 0;
}

.orange {
  color: var(--theme-orange);
  font-family: var(--libre-font);
  font-weight: 400;
  margin: 0;
}

h1.home-heading.sticky {
  margin-top: -4%;
}

.multi-faceted-img img {
  width: 50%;
  margin: 0 25%;
  position: relative;
}

button.facet {
  background: rgba(141, 242, 236, 0.07);
  outline: none;
  border: 3.5px solid var(--theme-neon-blue);
  height: 10vw;
  width: 10vw;
  border-radius: 50%;
  cursor: pointer;
  transition: box-shadow 200ms ease;
}

button.facet:hover {
  box-shadow: 0 0 4px 2px rgba(141, 242, 236, 0.7),
    /* inner white */ 0 0 6px 3px rgba(141, 242, 236, 0.4),
    /* middle magenta */ 0 0 10px 5px rgba(141, 242, 236, 0.2);
  /* outer cyan */
}

button.facet img {
  width: 70%;
  margin: auto;
}

div.grid-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-content: center;
  justify-content: center;
}

.grid-section div {
  margin: 5% 0;
}

p.para {
  font-size: 1.25em;
  line-height: 1.5em;
  margin-top: auto;
}

p.para.spl {
  padding: 2%;
  border-radius: 15px;
}

p.para.spl.cyan {
  background-color: rgba(141, 242, 236, 0.2);
}

p.para.spl.blue {
  background-color: rgba(123, 183, 233, 0.2);
}

p.para.spl.orange {
  background-color: rgba(242, 159, 5, 0.2);
}

p.para.spl.grey {
  background-color: rgba(217, 217, 217, 0.2);
}

img.center-img {
  width: 40%;
  margin: 0 25%;
}

.flowchart {
  margin-top: 15%;
  text-align: center;
}

.flowchart .box {
  text-align: center;
}
.flowchart img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-height: 45%;
  max-width: auto;
}
.novel li {
  font-size: 1.25em;
  line-height: 1.5em;
  margin: 5%;
  position: relative;
}
.novel li::marker ,ul.dna-marker::marker, ol.dna-marker li::marker {
  content: url("https://static.igem.wiki/teams/4933/wiki/icons8-dna-48.png");
  height: 20px;
  width: 20px;
}
div.box {
  padding: 1% 5%;
  font-size: 1em;
  font-family: var(--libre-font);
  border: 2px solid var(--theme-orange);
  border-radius: 20px;
  width: 50%;
  max-width: 50%;
  color: var(--theme-white);
  text-align: center;
  margin: 3% auto;
}

div.bigbox {
  padding: 1% 5%;
  font-size: 1em;
  font-family: var(--libre-font);
  color: var(--theme-white);
  text-align: center;
  margin: 3% auto;
}

div.bigbox.outline {
  border: 2px solid var(--theme-orange);
  border-radius: 25px;
}

/* button.facet.six, button.facet.four, button.facet.five {
    border: 3.5px solid var(--theme-neon-blue);
} */

.solution {
  margin-top: -10%;
}
.solution .illustrations {
  width: 5%;
  position: absolute;
}

.grid-section div img {
  width: 50%;
  margin-left: 25%;
  margin-right: 25%;
}

#sc_main {
  position: relative;
  padding: 5%;
}

#sc_no {
  position: absolute;
}

#sc_chip {
  position: absolute;
}

.tippy-box[data-theme~="igemblue"] {
  background-color: rgba(141, 242, 236, 0.6);
  color: var(--theme-white);
}

p.para.tooltip {
  padding: 2% 0 0% 0;
  font-family: var(--spartan-font);
  font-size: 1.5em;
}

p.para.tooltip.right {
  text-align: right;
}

p.para.tooltip.left {
  text-align: left;
}

p.para.tooltip.center {
  text-align: center;
}

.para.spl {
  font-family: var(--spartan-font);
  font-size: 1.5em;
}

@media (max-width: 768px) {
  img#neuronOne {
    width: 80%;
    margin: 0 10%;
  }
  img#biomarker {
    width: 70%;
    margin: 0 5%;
  }
  div.box {
    width: fit-content;
  }
  .illustrations {
    width: 10%;
  }
  .sub-heading-container {
    margin: 10% 0 10% 0;
  }
  h1.home-heading {
    font-size: 2.5em;
  }
  h3.quote {
    font-size: 1.5em;
  }
  
h1.fancy-head {
  font-size: 3.2rem;
}
  div.author-container {
    text-align: right;
  }
  h4.author,
  h3.author {
    font-size: 1.2em;
  }
}

@media (max-width: 540px) {
  div.grid-section {
    grid-template-columns: 1fr;
  }
  div.box {
    width: fit-content;
  }
  .multi-faceted-img img {
    width: 70%;
    margin: 0 15%;
    position: relative;
  }
  h1.home-heading {
    font-size: 2em;
  }
  h3.quote {
    font-size: 1.2em;
  }
  div.author-container {
    text-align: right;
  }
  h4.author,
  h3.author {
    font-size: 1em;
  }
}