.content {
  margin: 0 auto;
  margin-top: 30px;
  max-width: 960px;
}

h1 {
  color: var(--primary);
  font-size: 2em;
  font-weight: 700;
}

div.mainImage + .text p:first-child,
.block-img + p{
  color: var(--dark);
  font-size: 0.8em;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  display: flex;
  justify-content: center;
}

p.date {
  color: var(--dark);
  font-size: 0.8em;
  font-weight: 400;
  margin: 0 20px;
}

.mainImage,
p.block-img {
  display: flex;
  justify-content: center;
}

img {
  max-width: 600px;
}

.block-img p{ 
  color: var(--dark);
  font-size: 0.5em;
  font-weight: 400;
  padding-left: 2em;
  margin: 0 4em;
}

h4 {
  color: var(--primary);
  font-size: 1.6em;
  font-weight: 700;
}


p {
  color: var(--dark);
  font-size: 1.2em;
  font-weight: 400;
  margin: 4em 4em;
  text-align: justify;
}

ol {

  padding-left: 6em;
}

li {
  color: var(--dark);
  font-size: 1.2em;
  font-weight: 700; 
}

.buttonPages {
  margin-top: 3em;
  display: flex;
  justify-content: space-around;
}


@media (max-width: 960px)
{
  .content {
    margin: 20px 10px;
  }
}

@media (max-width: 600px)
{
  img {
    max-width: 400px;
    max-height: 200px;
  }
}

@media (max-width: 400px)
{
  img {
    max-width: 240px;
    max-height: 200px;
  }
}

@media (max-width: 640px)
{
  body {
    font-size: 80%;
  }
}