@font-face {
  font-family: "ProdigySans";
  src: url("/fonts/ProdigySans-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "ProdigySans";
  src: url("/fonts/ProdigySans-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "ProdigySans";
  src: url("/fonts/ProdigySans-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "ProdigySans";
  src: url("/fonts/ProdigySans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "ProdigySans";
  src: url("/fonts/ProdigySans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "ProdigySans";
  src: url("/fonts/ProdigySans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "ProdigySans";
  src: url("/fonts/ProdigySans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "ProdigySans";
  src: url("/fonts/ProdigySans-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "ProdigySans";
  src: url("/fonts/ProdigySans-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

.mainBlogContainer {
  width: 100%;
  height: 100vh;

}

.mainBlogContainer::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  background-color: rgb(72, 74, 195);
}

.divCase {
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
  opacity: 0;
  transform: translateY(100px);
}


.blog {
  margin: 0% 20%;
}



.title {
  padding-top: 1rem;
  font-family: 'poppins';
}

.title h2 {
  /* padding-top: 1rem; */
  /* padding-bottom: 2rem; */
  /* font-family: 'poppins'; */
}

.authdetails {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: 'poppins';
}

.authdetails img {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  margin-right: 1rem;
  object-fit: cover;
}

.authdetails h6 {
  font-weight: 500;
  font-family: 'poppins';
}

.authtext {
  display: flex;
  flex-direction: column;
  align-items: left;
  font-family: 'poppins';
}

.cover {
  width: 100%;
  /* height: 30vh; */
  object-fit: cover;
  border-radius: 16px;
}

.blog code {
  font-size: 1.2rem;
  background: rgb(55, 55, 55);
  color: rgb(246, 246, 246);
  display: block;
  padding: 1rem;
  margin: 2rem 0rem;
  border-radius: 2rem;
  font-family: 'poppins';
}

/* .content {
  margin: 0% 30rem;
  font-family: "Roboto", sans-serif;
} */

.content h1 {
  font-size: .5rem;
  font-family: 'ProdigySans';
  font-weight: 100;
}

.content h2 {
  font-size: .2rem;
  font-family: 'ProdigySans';
}

.content h3 {
  font-size: .2rem;
  font-weight: 500;
  padding: 1rem 0rem;
  /* font-weight: bold; */
  font-family: 'ProdigySans';
}

.content h6 {
  font-size: .1rem;
  font-family: 'ProdigySans';
}

.content p,
.content li {
  line-height: 2rem;
  /* font-family: "Roboto Slab", serif; */
  font-size: 1rem;
  font-weight: 400;
  font-family: 'ProdigySans';
}

.content p {
  padding: .8rem 0rem;
}

.content li {
  padding: .65rem 0rem;
}

.content ol,
.content ul {
  padding-left: 1.2rem;
  font-family: 'ProdigySans';
}

.content a {
  font-size: 1.5rem;
  text-decoration: none;
  font-weight: bold;
}

.content img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.date {
  /* color: #55a654; */
}

@media screen and (max-width: 768px) {
  .blog {
    margin: 0rem 2rem;
  }
  .content {
    width: 100%;
  }
  .content img {
    width: 100%;
  }

  
}


@media screen and (max-width: 480px) {
  .content p,
.content li {

  padding: .45rem 0rem;
  font-size: .8rem;
  font-weight: 400;
}
}