body, html {
  margin: 0px;
  padding: 0px;
  height: 100vh;
}

body::-webkit-scrollbar {
    display: none; /* Hides scrollbar in Chrome, Safari, and Edge */
}

/* font */

/* color variables */
:root{
  --primary-beige: #E4E6C3;
  --secondary-palm-leaf: #899878;
  --tertiary-carbon-black: #222725;
  --text-color-default: #121113;

  /* new color scheme */
  --primary: #78cdd0;
  --bar-color: #419445;
  --bar-color-highlight: #7ec482;
  --green-offwhite: #d8f7da;
  --bar-color-secondary: #606555;
  --window-color: #FDFFF5;
  --bubblebg: #74b3f2;
  --bubblefg: #94c8fd;
}
@font-face {
  font-family: Dogica;
  src: url("/fonts/dogica.ttf");
}
@font-face {
    font-family: Pixel;
    src: url(/fonts/DePixelBreit.ttf);
}

body{
  background-color: var(--green-offwhite);
}



h1, h2, h3, h4, h5, h6, p, ol, ul, div{
  font-family: Dogica;
  line-height: 1.5;
}
p, ol, ul, div{
  font-family: Pixel;
  font-size: 12px;
}

br {
   display: block;
   margin: 0px 0;
}

@font-face {
    font-family: LowResPixel;
    src: url("/LowresPixel-Regular.otf") format("opentype");
}

.blogContainer{
  display: inline-grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  text-align: center;
  align-items: center;
  justify-content: center;
}

h1, h2, h3, h4, h5, h6{
  text-align: center;
}

.blogContainer > h1, h2, h3, h4, h5, h6 {
  grid-column: 1 / span 3;
}

.twoColumns{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
}
.threeColumns{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.twoRows{
  display: grid;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  justify-content: center;
}
.threeRows{
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
}

.imgContainer{
  text-align: center;
}

hr.dashed {
  color: var(--green-offwhite);
  border-top: 3px dashed var(--bar-color);
}
hr.dotted {
  color: var(--green-offwhite);
  border-top: 3px dashed var(--bar-color);
}
hr.rounded {
  color: var(--green-offwhite);
  border-top: 3px solid var(--bar-color);
  border-radius: 5px;
}
hr{
  border:none;
}

li{
  margin-bottom: 10px;

}
ul{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

ul.rightAlign > li{
  text-align: right;
  padding-right: 40px;
  padding-left: 0px;
}

div, p{
  padding: 0px 10px;
}
p{
  display: inline-block;
}
.noAlign{
  align-items:normal !important;
}

.revealText{
  position: relative;
  
}
.revealText::after{
  content: "";
  overflow: hidden;
  display: inline-block;
  position: absolute;
  height: 100%;
  width:  100%;
 
  top: 0;
	left: 0;
	right: 0;
	bottom: 0;
  transform-origin: 100% 50%;
  
  animation: reveal;
  animation-duration: 1s;
  animation-timing-function: steps(20, end);
  animation-fill-mode: forwards;
  animation-delay: calc((var(--n) * .5s) + 1s);
  background-color: #222725;
}

@keyframes reveal{
  from{
    transform: scaleX(100%);
  }
  to{
    transform: scaleX(0%);
  }
}

@keyframes print{
  from{
    transform: translateY(-100%);
  }
  to{
    transform: translateY(0%);
  }
}

.report{
  animation: print 3s steps(15, end) forwards;
}