/* Images aren't pixelated, different palette*/
@font-face {
  font-family: CousineMono;
  src: url(/fonts/CousineNerdFont-Regular.ttf);
}

@media only screen and (min-width: 640px) {
  h1.title {
    font-size: 64px;
  }
  h2.subtitle {
    font-size: 24px;
  }
  h1.divTitle {
    font-size: 48px;
  }
  h2.divSubtitle {
    font-size: 16px;
  }
  a.divLink {
    font-size: 16px;
  }
  h1.doggrelTitle {
    font-size: 32px;
  }
  h2.doggrelSubtitle {
    font-size: 22px;
  }
  p.lyric {
    font-size: 16px;
  }
  p.lyric2 {
    font-size: 16px;
  }
  p.lyric3 {
    font-size: 16px;
  }
  img.dev {
    width: 64px;
  }
  p.footer1 {
    font-size: 16px;
  }
  p.navigation {
    font-size: 12px;
  }
  div.lines1 {
    margin-left: 20%;
  }
  div.lines2 {
    margin-left: 40%;
  }
}

@media only screen and (max-width: 639px) {
  h1.title {
    font-size: 10vw;
  }
  h2.subtitle {
    font-size: 3.75vw;
  }
  h1.divTitle {
    font-size: 7.5vw;
  }
  h2.divSubtitle {
    font-size: 2.5vw;
  }
  a.divLink {
    font-size: 2.5vw;
  }
  h1.doggrelTitle {
    font-size: 5vw;
  }
  h2.doggrelSubtitle {
    font-size: 3.437vw;
  }
  p.lyric {
    font-size: 2.5vw;
  }
  p.lyric2 {
    font-size: 2.5vw;
  }
  p.lyric3 {
    font-size: 2.5vw;
  }
  img.dev {
    width: 10vw;
  }
  p.footer1 {
    font-size: 2.5vw;
  }
  p.navigation {
    font-size: 1.875vw;
  }
  div.lines1 {
    margin-left: 5%;
  }
  div.lines2 {
    margin-left: 30%;
  }
}

body {
  background-color: #cccec7;
  color: #2e2622;
  font-family: CousineMono, Courier;
}
h1 {
    font-size: 32px;
    color: #2e2622;
    margin-top: 0px;
    margin-bottom: 0px;
}
h2 {
    font-size: 22px;
    color: #77746f;
    margin-top: 0px;
    margin-bottom: 0px;
}
hr {
    color: #a09f97;
    background-color: #a09f97;
    border-color: #a09f97;
}
a {
    color: #2e2622;
}
a:hover {
  filter: brightness(80%);
}
.navigation {
  color: #77746f;
  font-size: 12px;
}
.destination {
  color: #2e2622;
}
.step {
  color: #2e2622;
}
.lyric {
    padding-left: 0px;
    margin-top: 4px;
    margin-bottom: 4px;
}
.lyric2 {
    padding-left: 25px;
    margin-top: 4px;
    margin-bottom: 4px;
}
.lyric3 {
    padding-left: 50px;
    margin-top: 4px;
    margin-bottom: 4px;
}
.heading{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width:100%;
  text-align: center;
}
.footer1 {
  color: #2e2622
}

.pixelart {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}