.blog img {
  width: 100%;
  height: 100%;
  padding-left: 5px;
  padding-right: 5px;
  object-fit: contain;
}

.blog h1 {
  font-family: Arial, Helvetica, sans-serif;
  text-align: left;
  color: #f2f2f2;
  font-size: 5vw;
  padding-left: 5px;
  padding-right: 5px;
}

.blog h2 {
  font-family: Arial, Helvetica, sans-serif;
  color: #ffffff;
  font-size: 4vw;
  padding-left: 5px;
  padding-right: 5px;
}

.blog h3 {
  font-family: Arial, Helvetica, sans-serif;
  color: #ffffff;
  font-size: 3vw;
  padding-left: 5px;
  padding-right: 5px;
}

.blog h4 {
  font-family: Arial, Helvetica, sans-serif;
  color: #ffffff;
  font-size: 2vw;
  padding-left: 5px;
  padding-right: 5px;
}

.blog li {
  font-family: Arial, Helvetica, sans-serif;
  color: #ffffff;
  font-size: 3vw;
  padding-left: 5px;
  padding-right: 5px;
}

.blog p {
  font-family: Arial, Helvetica, sans-serif;
  color: #ffffff;
  font-size: 4vw;
  padding-left: 5px;
  padding-right: 5px;
}

.blog p a {
  color: #93b5f7;
  text-decoration: none;
}

.blog pre code {
  font-size: 3vw;
}

@media (min-width: 700px) {
  .blog img {
    height: 400px;
  }
  .blog pre code {
    font-size: 24px;
  }
  .blog li {
    font-size: 26px;
  }
  .blog p {
    font-size: 26px;
  }
  .blog h1 {
    font-size: 48px;
  }
  .blog h2 {
    font-size: 40px;
  }
  .blog h3 {
    font-size: 32px;
  }
  .blog h4 {
    font-size: 24px;
  }
}

@media (max-width: 600px) {
  .blog pre code {
    font-size: 6vw;
  }
  .blog li {
    font-size: 6vw;
  }
  .blog p {
    font-size: 8vw;
  }
  .blog h1 {
    font-size: 10vw;
  }
  .blog h2 {
    font-size: 9vw;
  }
  .blog h3 {
    font-size: 8vw;
  }
  .blog h4 {
    font-size: 7vw;
  }
}