@font-face {
  font-family: "HelveticaBlack";
  src: url("../HelveticaCom-Black.ttf") format("truetype");
}

body {
  background-color: lavender;
  font-family: Helvetica, sans-serif;
  font-weight: 800;
  overflow-y: hidden;
}

.freight {
  color: orangered;
  justify-content: space-between;
  font-family: 'HelveticaBlack', sans-serif;
  font-size: 15vw;
  letter-spacing: -0.053em;
  margin-left: -0.06em;
  margin-bottom: -0.2em;
  margin-top: 20vh;
}

.donald {
  color: orange;
  font-size: 9vw;
  letter-spacing: -0.05em;
  margin-left: 36.5vw;
  margin-top: -6.5vw;
}

.arrow {
  font-size: 3em;
  bottom: 20px;
  text-align: center;
  width: 100%;
  position: absolute;
}

.colophon {
  font-size: 1.45vw;
  /* text-justify: inter-word; */
  text-align: left;
  margin: 0 auto;
  padding-bottom: 2%;
  width: 50%;
  /* height: 100vh; */
}

.preschool {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.preschool-small {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 0.6em;
}

.isbn {
  mix-blend-mode: multiply;
  width: 15em;
}

.freighttitle {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-family: 'HelveticaBlack', sans-serif;
  font-size: 8.25vw;
  letter-spacing: -0.053em;
  margin-left: -0.06em;
  margin-bottom: -0.2em;
  margin-top: 0.2em;
}

ul, li {
  padding: 0;
  list-style-type: none;
}

.morebooks {
  text-align: center;
  /* line-height: 1.4em; */
}

address {
  font-style: normal;
}

a, a:hover, a:visited, a:active {
  color: black;
  text-decoration: none;
}

/* p {
  margin: 0 0 0 0;
} */

html {
  /* scroll-behavior: smooth; */
  overflow-x: hidden;
}

.grid {
  display: grid;
  margin: 0 0 0 0;
  grid-template-columns: 100%;
  grid-template-rows: auto;
  justify-content: center;
  text-align: center;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.grid::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.grid {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.circle {
  height: 100vw;
  width: 100vw;
  background-color: black;
  border-radius: 50%;
}

.circle-out {
  height: 100vw;
  width: 100vw;
  background-color: white;
  border-radius: 50%;
}

#one {
  color: black;
  font-size: 4vw;
  line-height: 40vw;
  }

#two {
  color: red;
  font-size: 13vw;
  }

#three {
  color: orange;
  font-size: 10vw;
  font-weight: 800;
  word-spacing: -0.5vw;
  letter-spacing: -0.2vw;
  line-height: 8vw;
}

#four{
  font-size: 13vw;
  color: yellow;
}

#five{
  color: green;
  font-size: 15vw;
  font-weight: 100;
  letter-spacing: -1vw;
  line-height: 15vw;
}

#six{
  font-size: 15vw;
  font-weight: 100;
  letter-spacing: -1vw;
  line-height: 15vw;
  color: blue;
}

#seven{
  font-size: 15vw;
  font-weight: 100;
  letter-spacing: -1vw;
  line-height: 15vw;
  color: purple;
}

#eight{
  font-size: 15vw;
  letter-spacing: -1vw;
  line-height: 15vw;
  color: black;
}

#nine{
  font-size: 15vw;
  letter-spacing: -1vw;
  line-height: 15vw;
  color: black;
  /* writing-mode: vertical-rl; */
  line-height: 11.2vw;
}

#ten{
  font-size: 10vw;
  line-height: 80vw;
}

#eleven{
  font-size: 10vw;
  line-height: 40vw;
  transform: rotate(3deg);
  /* -webkit-animation: jiggle 0.2s infinite;
  -moz-animation-duration: 0.2s;
  -moz-animation-name: jiggle;
  -moz-animation-iteration-count: infinite;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg); */
}

#twelve{
  font-size: 8vw;
  background-color: black;
  color: white;
}

#twelve-thirteen {
  font-size: 10vw;
  line-height: 80vw;
  background-color: black;
}

#thirteen{
  font-size: 12vw;
  color: grey;
  text-shadow: -0.25vw -0.25vw;
}

#fourteen{
  font-size: 14vw;
  line-height: 24vw;
}

#fifteen{
  font-size: 5vw;
  background-color: black;
  color: grey;
  letter-spacing: -0.25vw;
  /* border: 3vw dotted yellow;
  background-clip: content-box; */
}

#sixteen{
  font-size: 11vw;
  background-color: skyblue;
  color: yellow;
  line-height: 12vw;
}

#seventeen{
  font-size: 2vw;
  line-height: 44vw;
}

#image {
  margin-bottom: -80vw;
}

.trainimage {
  border-radius: 5vw;
  width: 95vw;
}

  .jiggle {
      -webkit-animation: jiggle 0.2s infinite;
      -moz-animation-duration: 0.2s;
      -moz-animation-name: jiggle;
      -moz-animation-iteration-count: infinite;
      -webkit-transform: rotate(-3deg);
      -moz-transform: rotate(-3deg);
  }

  @-moz-keyframes jiggle {
      0% {
          -moz-transform: rotate(-1deg);
      }
      50% {
          -moz-transform: rotate(1deg);
      }
  }

  @-webkit-keyframes jiggle {
      0% {
          -webkit-transform: rotate(-1deg);
          }
      50% {
          -webkit-transform: rotate(1deg);
      }
  }