/* Basic reset for all elements */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Core and frequently used classes */
  body {
    background-color: rgb(235,235,235);
    color: rgb(30,30,30);
    padding-top: 75px;
  }
  @media (prefers-color-scheme: dark) {
    body {
      background-color: rgb(235,235,235);
      color: rgb(30,30,30);
    }
  }

  a {
    text-decoration: none;
  }

  .link-style{
    border-style: none;
    cursor: pointer;
    background-color: rgb(235,235,235);
    font-family: "Atkinson Hyperlegible Next";
    color: rgb(23, 23, 130); 
    display: inline-block;
  }
  .how-section-title {
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 25px;
    margin-top: 8em;
  }
  .left-aligned-text {
    padding: 25px;
    width: 100vw;
    max-width: 750px;
    margin: auto;
  }

  @media only screen and (max-width: 400px) {
    .how-section-title {
      padding: 15px;
    }
    .left-aligned-text {
      padding: 15px;
    }
  }
  .lightbox {
    /* Default to hidden */
    display: none;

    /* Overlay entire screen */
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    margin-top: 75px;
    padding: 50px 25px;
    background: rgba(0, 0, 0, 0.8);
  }

  /* Unhide the lightbox when it's the target */
  .lightbox:target {
    display: block;
  }

  .vspace {
    height: 40px;
  }

/* Fonts */
  @font-face {
    font-family: 'Atkinson Hyperlegible Next';
    src: url('./fonts/AtkinsonHyperlegibleNext-Regular.otf');
  }
  @font-face {
    font-family: 'Atkinson Hyperlegible Next Bold';
    src: url('./fonts/AtkinsonHyperlegibleNext-Bold.otf');
  }
  @font-face {
    font-family: 'Atkinson Hyperlegible Next Italic';
    src: url('./fonts/AtkinsonHyperlegibleNext-RegularItalic.otf');
  }
  @font-face {
    font-family: 'CantedComic Regular';
    src: url('./fonts/CantedComic Regular.otf');
  }
  .atkinson {
    font-family: "Atkinson Hyperlegible Next";
  }
  .atkinson-bold {
    font-family: "Atkinson Hyperlegible Next Bold";
  }
  .atkinson-italic {
    font-family: "Atkinson Hyperlegible Next Italic";
  }
  .canted {
    font-family: "CantedComic Regular";
  }
  .h1-specs { font-size: 3rem; }
  .h2-specs { font-size: 2.5rem; }
  .h3-specs { font-size: 1.8rem; }
  .h4-specs { font-size: 1.3rem; }
  .navbar-font-specs { font-size: 1.2rem; }
  .text-specs { font-size: 1.1rem; }
  .footer-specs { font-size: 1rem; }
  @media only screen and (max-width: 975px) {
    .h1-specs { font-size: 2.5rem; }
    .h2-specs { font-size: 2rem; }
    .h3-specs { font-size: 1.5rem; }
    .h4-specs { font-size: 1.2rem; }
  }
  @media only screen and (max-width: 625px) {
    .h1-specs { font-size: 2rem; }
    .h2-specs { font-size: 1.5rem; }
    .h3-specs { font-size: 1.3rem; }
    .h4-specs { font-size: 1.1rem; }
    .navbar-font-specs { font-size: 1rem; }
  }
  @media only screen and (max-width: 400px) {
    .h1-specs { font-size: 1.7rem; }
    .h2-specs { font-size: 1.5rem; }
    .h3-specs { font-size: 1.3rem; }
    .h4-specs { font-size: 1.1rem; }
  }

/* Navigation bar */
  .navbar {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 15px;
    height: 75px;
    gap: clamp(15px, 5vw, 100px);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 9999;
    background-color: rgb(235,235,235);
  }
  .navlink {
    text-decoration: none;
    color: rgb(30,30,30);
    transition: all 0.5s ease;
  }
  .navlink:hover {
    transform: scale(1.1);
  }
  .navlink-demo {
    cursor: pointer;
    color: rgb(240,240,240);
    background-color: rgb(70,70,70);
    border-radius: 10px;
    padding: 0.7rem 0.5rem 0.5rem;
  }
  .navlink-logo { height: 25px; }
  @media only screen and (max-width: 565px) {
    .navlink-logo { height: 19px; }
  }
  @media only screen and (max-width: 353px) {
    .navbar {
      gap: 8px;
      padding: 5px;
    }
  }

/* Footer */
  .footer {
    display: flex;
    flex-direction: column;
    padding: 25px;
    justify-content: start;
    background-color: rgb(30,30,30);
    color: rgb(220,220,220);
    margin-top: 5em;
  }
  .footer-logo {
    height: 1.3rem;
    margin-bottom: 1rem;
  }
  @media only screen and (max-width: 450px) {
    .footer {
      padding: 10px;
    }
  }

/* Intro */
  .intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 25px;
    height: max(65vh, 50px);
    gap: max(10vh, 35px);
  }
  .intro-h1 {
    display: flex;
    flex-direction: column;
    gap: max(5vh, 20px);
  }
  @media only screen and (max-width: 625px) {
    .intro {
      padding: 15px;
    }
  }
  .intro-text {
      display: inline;
  }

  /* Enter key */
    .enter {
      height: 1.5em;
      position: relative;
      top: 0.4em;
    }

  /* Animation */
    .words::before {
      animation: words 6s infinite;
      content: "";
      width: 5em;
      display: inline-block; 
    }
    @keyframes words {
      0% {content: "";}
      1% {content: "y";}
      2% {content: "yo";}
      3% {content: "you";}
      29% {content: "you";}
      30% {content: "";}
      31% {content: "y";}
      32% {content: "yo";}
      33% {content: "you";}
      34% {content: "your";}
      35% {content: "your ";}
      36% {content: "your u";}
      37% {content: "your us";}
      38% {content: "your use";}
      39% {content: "your user";}
      40% {content: "your users";}
      66% {content: "your users";}
      67% {content: "";}
      68% {content: "y";}
      69% {content: "yo";}
      70% {content: "you";}
      71% {content: "your";}
      72% {content: "your ";}
      73% {content: "your t";}
      74% {content: "your te";}
      75% {content: "your tea";}
      76% {content: "your team";}
      100% {content: "your team";}
    }

/* The three explanation steps */
  .explanation-step {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 220px;
    padding: 25px;
    gap: 35px;
  }
  .explanation-step-text {
    text-align: center;
    width: 300px;
  }
  .explanation-step-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 250px;
  }
  .explanation-step-image img {
    height: 150px;
    position: absolute;
  }
  @media only screen and (max-width: 625px) {
    .explanation-step {
      flex-direction: column;
      gap: 20px;
      padding: 15px;
      height: 300px;
    }
    .explanation-step-image {
      height: 150px;
    }
    .explanation-step-image img {
      height: 120px;
    }
  }

  /* Step 1 */
    .img-step1 {
      opacity: 0;
      animation: image-cycle-step-one 4s infinite;
      animation-delay: 2s;
    }
    @keyframes image-cycle-step-one {
      0%, 25% { opacity: 0; }
      30%, 100% { opacity: 1; }
    }

  /* Step 2 */
    .img-step2-smoke {
      opacity: 0;
      animation: image-cycle-smoke 6s infinite;
    }
    @keyframes image-cycle-smoke {
      16.67%, 66.67% { opacity: 0; }
      33.33%, 50% { opacity: 1; }
    }
    .img-step2-premise {
      opacity: 0;
      animation: image-cycle-premise 6s infinite;
    }
    @keyframes image-cycle-premise {
      12.5% { opacity: 0; }
      16.67%, 100% { opacity: 1; }
    }
    .img-step2-servers {
      opacity: 0;
      animation: image-cycle-servers 6s infinite;
    }
    @keyframes image-cycle-servers {
      16.66% { opacity: 0; }
      20.83%, 100% { opacity: 1; }
    }
    .img-step2-punchline {
      opacity: 0;
      animation: image-cycle-punchline 6s infinite;
    }
    @keyframes image-cycle-punchline {
      45.83% { opacity: 0; }
      50%, 100% { opacity: 1; }
    }

  /* Lights in step 2 */
    .img-lights1 {
      opacity: 1;
      animation: image-cycle-lights 6s infinite;
    }
    .img-lights2 {
      opacity: 0;
      animation: image-cycle-lights 6s infinite;
      animation-delay: 1s;
    }
    .img-lights3 {
      opacity: 0;
      animation: image-cycle-lights 6s infinite;
      animation-delay: 1s;
    }
    .img-lights4 {
      opacity: 0;
      animation: image-cycle-lights 6s infinite;
      animation-delay: 2s;
    }
    .img-lights5 {
      opacity: 0;
      animation: image-cycle-lights 6s infinite;
      animation-delay: 3s;
    }
    .img-lights6 {
      opacity: 0;
      animation: image-cycle-lights 6s infinite;
      animation-delay: 4s;
    }
    .img-lights7 {
      opacity: 0;
      animation: image-cycle-lights-last 6s infinite;
      animation-delay: 5s;
    }
    @keyframes image-cycle-lights {
      2%, 16.67% { opacity: 1; }
      19%, 100% { opacity: 0; }
    }
    @keyframes image-cycle-lights-last {
      2%, 16.67% { opacity: 1; }
      16.68%, 100% { opacity: 0; }
    }

/* A climate action so easy, you can DIY */
  .how-emissions {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    height: 450px;
    gap: 1em;
  }
  .how-emissions-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 220px;
  }
  .how-emissions-image img {
    position: absolute;
    width: auto;
    height: 220px;
  }
  .how-emissions-text {
    padding: 25px;
    width: 100vw;
    max-width: 750px;
  }
  @media only screen and (max-width: 400px) {
    .how-emissions-text {
      padding: 15px;
    }
    .how-emissions-image {
      height: 170px;
    }
    .how-emissions-image img {
      height: 170px;
    }
  }

  .img-emissions-smoke {
    opacity: 1;
    animation: image-cycle-emissions-smoke 4s infinite;
  }
  @keyframes image-cycle-emissions-smoke {
    0%, 30% { opacity: 1; }
    55%, 100% { opacity: 0; }
  }
  .img-emissions-permits {
    opacity: 1;
    animation: image-cycle-emissions-permits 4s infinite;
  }
  @keyframes image-cycle-emissions-permits {
    0%, 30% { opacity: 1; }
    31%, 100% { opacity: 0; }
  }
  .img-emissions-mountain {
    opacity: 0;
    animation: image-cycle-emissions-mountain 4s infinite;
  }
  @keyframes image-cycle-emissions-mountain {
    0%, 30% { opacity: 0; }
    40%, 100% { opacity: 1; }
  }

/* Lightbox to show the Northeast */
  .lightbox-northeast {
    display: block;
    background-image: url("media/northeast.svg");
    width: 100%;
    height: 350px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

/* Permit Prices */
  .how-prices {
    display: flex;
    align-items: start;
    justify-content: center;
    gap: min(20px, 2vw);
    padding: 5px 25px;
  }
  .how-prices-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1em;
    width: 220px;
  }

  @media only screen and (max-width: 500px) {
    .how-prices-text {
      width: 150px;
    }
  }

  @media only screen and (max-width: 400px) {
    .how-prices {
      padding: 0 15px;
    }
  }

/* DIY steps */
  .diy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
  .diy-step {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 35px;
    width: 100vw;
    max-width: 750px;
    height: 150px;
  }
  .diy-step-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 25px;
    text-align: start;
    width: 500px;
  }
  .diy-step-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 250px;
  }
  .diy-step-image img {
    height: 150px;
    position: absolute;
  }
  @media only screen and (max-width: 900px) {
    .diy-step {
      flex-direction: column;
      gap: 20px;
      height: auto;
    }
    .diy-step-text {
      width: 100vw;
      max-width: 750px;
    }
    .diy-step-image {
      height: 150px;
    }
    .diy-step-image img {
      height: 150px;
    }
  }
  @media only screen and (max-width: 400px) {
    .diy-step-text {
      padding: 10px 15px;
    }
  }

  .img-diy-door {
    opacity: 1;
    animation: image-cycle-diy-door 2s infinite;
  }
  @keyframes image-cycle-diy-door {
    0%, 100% { opacity: 1; }
  }
  .img-diy-allowance1 {
    opacity: 1;
    animation: image-cycle-diy-allowance-first 2s infinite;
  }
  @keyframes image-cycle-diy-allowance-first {
    0%, 20% { opacity: 1; }
    30%, 100% { opacity: 0; }
  }
  .img-diy-allowance2 {
    opacity: 0;
    animation: image-cycle-diy-allowance-second 2s infinite;
  }
  @keyframes image-cycle-diy-allowance-second {
    0%, 20% { opacity: 0; }
    30%, 45% { opacity: 1; }
    55%, 100% { opacity: 0; }
  }
  .img-diy-allowance3 {
    opacity: 0;
    animation: image-cycle-diy-allowance-third 2s infinite;
  }
  @keyframes image-cycle-diy-allowance-third {
    0%, 45% { opacity: 0; }
    55%, 70% { opacity: 1; }
    80%, 100% { opacity: 0; }
  }

/* Standalone text */
  .standalone-text {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .standalone-text div {
    width: 100vw;
    max-width: 855px;
    padding: 25px;
  }
  @media only screen and (max-width: 900px) {
    .standalone-text div {
      max-width: 750px;
    }
  }
  @media only screen and (max-width: 400px) {
    .standalone-text div {
      padding: 15px;
    }
  }


/* Crypto */
  .how-crypto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2em;
    height: 400px;
  }
  .how-crypto-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 220px;
  }
  .how-crypto-image img {
    position: absolute;
    width: auto;
    height: 220px;
  }
  .how-crypto-text {
    display: flex;
    flex-direction: column;
    gap: 1em;
    width: 100vw;
    max-width: 750px;
    padding: 25px;
  }
  @media only screen and (max-width: 600px) {
    .how-crypto-image {
      height: 200px;
    }
    .how-crypto-image img {
      height: 200px;
    }
  }
  @media only screen and (max-width: 400px) {
    .how-crypto-text {
      padding: 15px;
    }
    .how-crypto-image {
      height: 150px;
    }
    .how-crypto-image img {
      height: 150px;
    }
  }

  .img-crypto-door {
    opacity: 1;
    animation: image-cycle-crypto-door 4s infinite;
  }
  @keyframes image-cycle-crypto-door {
    0%, 55% { opacity: 1; }
    56%, 100% { opacity: 0; }
  }
  .img-crypto-allowance1 {
    opacity: 1;
    animation: image-cycle-crypto-allowance-first 4s infinite;
  }
  @keyframes image-cycle-crypto-allowance-first {
    0%, 7.5% { opacity: 1; }
    15%, 100% { opacity: 0; }
  }
  .img-crypto-allowance2 {
    opacity: 0;
    animation: image-cycle-crypto-allowance-second 4s infinite;
  }
  @keyframes image-cycle-crypto-allowance-second {
    0%, 7.5% { opacity: 0; }
    15%, 22.5% { opacity: 1; }
    30%, 100% { opacity: 0; }
  }
  .img-crypto-allowance3 {
    opacity: 0;
    animation: image-cycle-crypto-allowance-third 4s infinite;
  }
  @keyframes image-cycle-crypto-allowance-third {
    0%, 22.5% { opacity: 0; }
    30%, 37.5% { opacity: 1; }
    45%, 100% { opacity: 0; }
  }
  .img-crypto-hole {
    opacity: 0;
    animation: image-cycle-crypto-hole 4s infinite;
  }
  @keyframes image-cycle-crypto-hole {
    0%, 60% { opacity: 0; }
    70%, 100% { opacity: 1; }
  }
  .img-crypto-reward {
    opacity: 0;
    animation: image-cycle-crypto-reward 4s infinite;
  }
  @keyframes image-cycle-crypto-reward {
    0%, 65% { opacity: 0; }
    80%, 100% { opacity: 1; }
  }

/* Haiku */
  .haiku-image {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 75vh;
  }
  .haiku-image img {
    height: 100px;
    position: absolute;
  }
  .img-haiku {
    opacity: 0;
    animation: cursor-cycle 1.2s infinite;
  }
  @keyframes cursor-cycle {
    0%, 50% { opacity: 0; }
    51%, 100% { opacity: 1; }
  }

  @media only screen and (max-width: 625px) {
    .haiku-image img {
        height: 70px;
    }
  }

/* Warning */
  .warning {
    display: flex;
    justify-content: center;
    padding: 25px;
    margin-top: 150px;
  }
  .warning img {
    width: 600px;
  }
  @media only screen and (max-width: 975px) {
    .warning img {
      width: 400px;
    }
  }
  @media only screen and (max-width: 450px) {
    .warning {
      padding: 15px;
    }
    .warning img {
      width: 290px;
    }
  }

/* Theorem and proof */
  .theorem {
    display: flex;
    justify-content: center;
    padding: 25px;
    margin-top: 150px;
  }
  .theorem img {
    width: 600px;
  }
  .theorem-proof {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1em;
  }
  .theorem-proof-title {
    width: 100vw;
    max-width: 750px;
    padding: 0px 25px;
  }
  .theorem-proof-claim {
    text-align: start;
    width: 100vw;
    max-width: 750px;
    padding: 0px 25px;
    margin-top: 1em;
  }
  .theorem-proof-claim:hover {
    cursor: pointer;
  }
  .theorem-proof-details {
    display: flex;
    flex-direction: column;
    gap: 1em;
    width: 100vw;
    max-width: 750px;
    padding: 0px 25px;
  }

  @media only screen and (max-width: 650px) {
    .theorem img {
      width: 400px;
    }
  }
  @media only screen and (max-width: 450px) {
    .theorem {
      padding: 15px;
    }
    .theorem img {
      width: 290px;
    }
  }

/* Questions */
  .link-questions{
    border-style: none;
    cursor: pointer;
    background-color: rgb(235,235,235);
    color: rgb(30,30,30);
    display: inline-block;
  }

/* -----------------------Questions------------------------- */ 

/* Greeting */
  .greeting {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 50px 0px 0px 0px;
    gap: 30px;
  }
  .greeting-text {
    padding: 15px;
  }
  .greeting-image {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .greeting-image img {
    height: 200px;
  }
  .greeting-email {
    padding: 0 25px;
    width: 100vw;
    max-width: 850px;
    margin: 80px auto;
  }
  @media only screen and (max-width: 625px) {
    .greeting {
      margin: 30px 0px 0px 0px;
  }
    .greeting-image {
      height: 150px;
    }
    .greeting-image img {
      height: 150px;
    }
  }

/* Question */
  .question-section-title {
    display: flex;
    justify-content: center;
    padding: 25px;
  }
  .question-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .question {
    width: 100vw;
    max-width: 850px;
    /*border-bottom: 3px solid;*/
  }
  .question-button {
    background-color: rgb(235,235,235);
    color: rgb(30,30,30);
    border-style: none;
    cursor: pointer;
    padding: 25px;
    text-align: start;
  }
  .answer {
    display: none;
    padding: 0px 15px;
  }
  .answer p {
    line-height: 1.3;
    margin-bottom: 1em;
  }


/* FAQs */

/*------------------------About--------------------------*/ 
/* Portrait and bio */
  .portrait-pic {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 500px;
  }
  .portrait-pic img {
    width: 400px;
  }
  .bio {
    display: flex;
    flex-direction: column;
    justify-content: start center;
    align-items: center;
    height: 20em;
    gap: 3em;
  }
  .bio-text {
    width: 27em;
    max-width: 100vw;
    padding: 25px;
  }
  @media only screen and (max-width: 625px) {
    .portrait-pic {
      height: 350px;
    }
    .portrait-pic img {
      width: 300px;
    }
  }
  @media only screen and (max-width: 450px) {
    .bio-text {
      padding: 15px;
    }
    .portrait-pic img {
      width: 250px;
    }
  }