/* last updated some time after 2025 06 22 except i forgot to keep track*/

p {
  color: red;
  font-size: large;
}
body {
  color: green;
  background-color: #3b4f17;
  width: 83%;
  margin: auto;
  border: 0px;
  padding: 10px;
}
:root {
    font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
  }
  @supports (font-variation-settings: normal) {
    :root { font-family: InterVariable, sans-serif; }
  }

  .third{
    font-size: 320%;
    text-align: center;   
    color:#FFF77A; 
    
}

  .third2{
    font-size: 150%;
    text-align: center;   
    color:#FFF77A; 
    
}

  .fyi{
    font-size: 400%;
    text-align: left;
    font-weight: bold;
    color:#f4ff9d;
}

  .backhome{
    font-size: 150%;
    text-align: center;
    font-weight: bold;
    color:#ffb2b2;
}
   a.backhome{
    color:#ffb2b2;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
 }



  .why{
    font-size: 250%;
    text-align: left;
    font-weight: bold;
    color:#ffb2b2;
}

.whym{
  font-size: 200%;
  text-align: left;
  font-weight: bold;
  color:#ffb2b2;
}

.co2desc{
  font-size: 200%;
  text-align: center;
  font-weight: bold;
  color:#ffb2b2;
}

.whym2{
  font-size: 150%;
  text-align: center;
  font-weight: normal;
  color:#D5F5B3;
}

.centerwarning{
  font-size: 150%;
  text-align: center;
  font-weight: normal;
  color:#D5F5B3;
}

/* did i need this? 
a.centerwarning{
  font-size: 150%;
  text-align: center;
  font-weight: normal;
  font-size: 150%;
  text-align: center;
  font-weight: normal;
  color:#D5F5B3;
} */

.whym22{
  font-size: 130%;
  text-align: left;
  font-weight: normal;
  color:#ffb2b2;
}

.studylinks{
  font-size: 125%;
  text-align: left;
  font-weight: normal;
  color: #D5F5B3;
  line-height: 145%;
}

  a.studylinks:visited{
    color: #9dbd7b;
    font-size: 125%;
    text-align: left;
    font-weight: bold;
    line-height: 145%;
  }

/* 
.masklink{
  font-size: 175%;
  text-align: right;
  font-weight: normal;
  color:#D5F5B3;
} */

.masklink {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: right;
  align-items: end;
  max-width: 100%;
  font-weight: bold;
  font-size: 230%;
  color: #ffc6c6;
}

a.masklink:visited{
  color: #FFF77A;
}

 .facts{
    font-size: 100%;
    font-weight: bold;
    text-align: left;
    color:#DBFF70;

  }

  .factsm{
    font-size: 100%;
    font-weight:normal;
    text-align: left;
    color:#DBFF70;
    line-height: 150%;
  }
  /* ^ changed factsm from 95% to 98%  25/08/25 */
  /* which one is the year and which one is the day! oh no! */

 .factst{
    font-size: 95%;
    font-weight:normal;
    text-align: left;
    color:#DBFF70;
    line-height: 155%;

  }

   a.factsm2links{
    font-size: 95%;
    font-weight:bold;
    text-align: left;
    color:#DBFF70;

  }

   a{
    color:#FFFD77;
    font-weight: bold;
    text-decoration: none;
    
 }

 a:visited{
    color:#D5F5B3;
    font-weight: lighter;
    font-style: italic;
 }

 a.email{
  font-weight: normal;
 }

 a.email:visited{
  color: #D5F5B3
 }


   .small{
    font-size: 90%;
    text-align: right;
   }

   .resources{
    color: #ffc6c6;
    font-size: 85%;
    vertical-align: bottom;
   }

   .foot{
    color: #928181;
    font-size: 75%;
    font-weight: normal;
    bottom: 3%;
    position: fixed;
    margin: auto;
    width: 100%;
    text-align: center;
   }

   .links{
    font-size: 80%;
    bottom: 1%;
    /* position: fixed; */
    width: 100%;
    text-align: center;
    font-weight: normal;
    color: #ffc6c6;
   }

   a.links{
    color: #ffb2b2;
    font-weight: bold;
    text-decoration: none;
    font-size: 90%;
   }
   a.links:visited{
    color: #D5F5B3;
    font-weight: bold;
    text-decoration: none;
    font-size: 100%;
   }

   h2{
    font-size: 350%;
    font-weight: normal;
   }

   .parent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    vertical-align: middle;
          }
        
.item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}

.centerit {
display: flex;
flex-direction: column;
justify-content: center;
margin: auto;
padding-top: 10%;
padding-bottom: 10%;
}

.rolebox {
display: flex;
flex-direction: column;
justify-content: left;
align-items: flex-start;
max-width: 100%;
}

  .keypoints{
    font-size: 120%;
    text-align: left;
    color:#faf59c; 
    line-height: 130%;

  }

/* i will clean this up eventually, lots of chunks that ended up not getting used */
/* the line in jesus christ superstar where they sing "kiss me, kiss me jesus" sounds like they are actually saying "crispy crispy jesus" */

.flex-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: left;
  align-items: flex-start;
  max-width: 100%;
}

.flex-container-bottom {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

img.toiletpic {
  display: flex;
  max-width: 100vw;
  border-color: #D5F5B3;
}

img.embed {
  display: flex;
  max-width: 100%;
  border-color: #D5F5B3;
  padding: 4px;
}

img.construct {
  display: flex;
  max-width: 100%;
  border-width: 0;
  line-height: 110%;
}

/*
.ttl2{
    font-size: 80%;
    bottom: 1%;
    / position: fixed; /
    width: 100%;
    text-align: center;
    font-weight: normal;
    color: #0000ff;
   } */


.ttl{
  display: flex;
  width: 100%;
  flex-direction: row;
  text-align: right;
  justify-content: right;
}

img.ttl {
  display: flex;
  max-width: 100px;
  max-height: 100px;
  border-width: 0;
  justify-content: right;
}

    a.ttlink{
    color:#ffb2b2;
    text-decoration: none;
    text-align: right;
 }


/* not sure i need this
@media screen and (min-width: 769px) {
  div.flex-container {
    font-size: 100%;
  }
  div.facts {
    font-size: 100%;

  }}
@media screen and (max-width: 768px) {
  div.flex-container {
    font-size: 120%;
  }
  div.facts {
    font-size: 120%;
  } 
} */