html {
  min-height: 100vh;
  width: 100%;
  /* min-width: 1500px; */
}

body {
  position: relative;
  overflow-x: hidden;
  width: 100%;
  /* min-width: 1500px; */
}

.container {
  width: 100%;
  /* min-width: 1500px; */
}

.smallHeader {
  display: flex;
  justify-content: center;
  font-size: 7vw;
  font-family: sans-serif;
  font-weight: 800;
  background-color: var(--quinary-color);
  color: var(--primary-color);
  padding: 20px;
}
.smallHeader:hover {
  cursor: pointer;
}
.blog {
  display: flex;
  flex-direction: row;
  background-color: var(--primary-color);
  justify-content: space-evenly;
  flex-wrap: wrap;
  min-width: 1000px;
}

.blogIndex {
  overflow-x: scroll;
  display: flex;
  flex-direction: row;
  background-color: var(--primary-color);
  justify-content: center;
  flex-wrap: nowrap;
  width: 100%;
}

.blogPost {
  min-width: 300px;
  width: 300px;
  height: 500px;
  background-color: var(--accent-color);
  justify-content: space-between;
  display: flex;
  flex-direction: column;
  margin: 15px;
  border-radius: 0px 0px 60px 60px;
  box-shadow: 0px 2px 6px -1px rgba(0, 0, 0, 0.3);
}

.blogImage {
  object-fit: cover;
  width: 100%;
  height: 250px;
}
.blogTitle {
  text-align: center;
  font-size: 20px;
  font-family: sans-serif;
  font-weight: bolder;
  padding: 5px;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
}
.blogTitle span {
  text-overflow: ellipsis;
  overflow: hidden;
  text-wrap: nowrap;
}
.blogText {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: center;
}
.blogTextContainer {
  display: flex;
  justify-content: center;
  flex-direction: row;
  height: 130px;
}
.blogDate {
  font-size: 16px;
  text-align: center;
  font-family: sans-serif;
}
.editButtons {
  font-size: xx-small;
}
.blogDevider {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.readPost {
  border-radius: 20px;
  background-color: var(--secundary-color);
  border: none;
  width: 150px;
  padding: 8px;
  align-self: center;
  transition: all 1.5s;
}
.readPost:hover {
  background-color: var(--tertiary-color);
  transition: all 0.4s;
}
.readPostContainer {
  display: flex;
  justify-content: center;
}
.filler {
  height: 15px;
}
.filler2 {
  width: 30px;
  height: 100%;
}
.readPostRedirect {
  text-decoration: none;
  color: var(--primary-color);
}
.specialTextContainer {
  display: flex;
  justify-content: center;
  flex-direction: row;
}
.blogSpecial {
  min-width: 300px;
  width: 300px;
  height: 500px;
  background-color: var(--accent-color);
  justify-content: space-between;
  display: flex;
  flex-direction: column;
  margin: 15px;
  border-radius: 60px 60px 60px 60px;
  transition: all 1.5s;
  text-decoration: none;
}
.blogSpecial:hover {
  background-color: #6aa9d5;
  transition: all 0.4s;
  cursor: pointer;
}
.addPost {
  text-decoration: none;
  color: black;
  text-align: center;
  font-size: 20px;
  font-family: sans-serif;
  font-weight: bolder;
  padding: 5px;
  margin-top: 5px;
}
.blogGrid {
  justify-content: center;
  display: grid;
  grid-template-columns: auto auto auto auto;
  background-color: var(--primary-color);
}
@media only screen and (max-width: 1300px) {
  .blogGrid {
    grid-template-columns: auto auto auto;
  }
  .blogIndex {
    justify-content: start;
  }
  @media only screen and (max-width: 1000px) {
    .blogGrid {
      grid-template-columns: auto auto;
    }
  }
  @media only screen and (max-width: 650px) {
    .blogGrid {
      grid-template-columns: auto;
    }
  }
}