@import url('https://fonts.googleapis.com/css2?family=Bytesized&family=Doto:wght@100..900&family=Jacquarda+Bastarda+9&family=Pixelify+Sans:wght@400..700&display=swap');
@import url("https://use.typekit.net/zxl1vet.css");


:root {

      --font-body: "Doto", sans-serif;
      --font-paragraph: "Hanken Grotesk", sans-serif;
    }

body {
    margin: 0;
}


.bookspread {
    display: flex;
    background-color: #000000;
    height: 100vh;
    justify-content: center;
}

p {
    color: #f0d8ba;
    font-family: var(--font-body);
    font-size: 20pt;
    text-align: justify;
    width: auto;
    margin: 0;
    padding: 0px 80px 0px 80px;
    justify-self: center;
    align-self: center;
}


.pixel-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* allow clicks to pass through to text */
  z-index: 0; /* behind text */
}

.page-1 p, .page-2 p {
  position: relative;
  z-index: 1; /* above pixels */
}


/* EXTRAAAAAAAAAAAAAAAAAAAA
    /*background-image: url('sand.png'); */


.word-style-1 {
    color: #f0d8ba81;
}
.word-style-2 { 
    font-style: italic; font-weight: 1000;
}
.word-style-3 { 
    letter-spacing: 30px; 
}
.word-style-4 { 
    font-family: "p22-folk-art-block", sans-serif;
    font-style: normal;
    font-size: 14px;
}
.word-style-5 { 
    font-family: "Bytesized", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-weight: bold; 
}

.word-style-6 { 
    font-size: 35px;
    font-family: "p22-folk-art-block", sans-serif;
    color: #907b62;
}
.word-style-7 { 
    font-size: 50px;
}
.word-style-8 {
    font-family: "argent-pixel-cf", sans-serif;

}
.word-style-9 {
    font-family: "dotgothic16", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #fff3e4;
}
.word-style-10 {
  font-family: "Jacquarda Bastarda 9", serif;
  font-weight: 400;
  font-style: normal;
}

.word-style-11 {
    font-family: "Pixelify Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

@keyframes letterShake {
  0%   { transform: translate(0, 0) rotate(0deg); }
  20%  { transform: translate(-2px, 2px) rotate(-2deg); }
  40%  { transform: translate(2px, -2px) rotate(2deg); }
  60%  { transform: translate(-4px, 2px) rotate(-1deg); }
  80%  { transform: translate(1px, -1px) rotate(1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.shake-letter {
  display: inline-block; /* required for transform */
  animation: letterShake 5s ease-in-out;
}