:root {
  --lightblue: #1e90ff;
  --highlightcolor: var(--lightblue);
}

html {
  -webkit-text-size-adjust: 100%; /* Reset */
  image-rendering: pixelated; /* Love pixels */
}

body {
  margin: 0; /* Reset */
  /* Reference: https://modernfontstacks.com/ */
  font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif; 
}

h2 {
  margin: 2rem 0;
}

/* Waves generated by: https://css-shape.com/wavy-line/ */
hr {
  --s: 16px; /* size of the wave */
  --b: 1px; /* thickness of the line */
  --m: 2; /* curvature of the wave [0 2] */
  
  background: var(--highlightcolor);
  --R: calc(var(--s)*sqrt(var(--m)*var(--m) + 1) + var(--b)/2);
  height: calc(2*var(--R));
  width: 100%;
  --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
  mask:
    radial-gradient(var(--R) at left 50% bottom calc(-1*var(--m)*var(--s)), var(--_g)) 
     calc(50% - 2*var(--s)) calc(50% - var(--s)/2 - var(--b)/2)/calc(4*var(--s)) calc(var(--s) + var(--b)) repeat-x,
    radial-gradient(var(--R) at left 50% top calc(-1*var(--m)*var(--s)),var(--_g)) 
     50% calc(50% + var(--s)/2 + var(--b)/2)/calc(4*var(--s)) calc(var(--s) + var(--b)) repeat-x;
}

/* Stark text highlight */
::selection {
  background-color: black;
  color: white;
}

a {
  color: var(--lightblue);
}

/* Text block sizing and positioning */
.textblock {
  line-height: 1.5;
  margin-left: auto;
  margin-right: auto;
  max-width: 40rem;
  width: 100%;
}

/* Home page header */
header {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 3rem 1.5rem 1.5rem 1.5rem;

  p {
    font-size: 1.5rem;
    font-style: italic;
  }

  .logotitle {
    font-size: 4rem;
    line-height: 4rem;
    letter-spacing: -0.125rem;
    font-weight: 400;
  }

  .textblock {
    position: relative;
    z-index: 10;
  }

}

.dithervideo { 
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background-image: url('/dither70.svg');
  background-size: 8px; 
  overflow: hidden;

  dither-dither {
    position: absolute;
    bottom: 0px;
    opacity: 0.7;
    transform-origin: left bottom;
  }
}

main {
  padding: 1.5rem;
}

.coloroverlay {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color:  #88a6ff;
  width: 100vw;
  height: 100%;
  overflow: hidden;
  mix-blend-mode: screen;
  z-index: 20;
}

/* Home page sections */
#projects, #organizations {
  display: grid;
  gap: 2rem;
  justify-content: space-evenly;
}
#projects {
  grid-template-columns: repeat(auto-fill, 300px);
}
#organizations {
  grid-template-columns: repeat(auto-fill, 128px);

}

/* Image display */

.image-container {
  position: relative;
  .original-image {
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0;
    transition: opacity 2.5s ease;
    image-rendering: auto;
    &:hover {
      transition: opacity 0.4s ease;
      opacity: 1;
    }

    .mobilehover & {
      transition: opacity 0.3s ease;
      opacity: 1;
    }
  }
}



/* Home page footer */
footer {
  position: relative;
  height: 30vh;
  margin-top: 2rem;
  background-image: url('/dither70.svg');
  background-size: 8px;
}