.main, .videoBlog {
  display: flex;
  flex-direction: column;
  justify-content: center; width: 85%;
  align-items: center; position: relative;
  margin: 1% 5% 1% 10%; left: 0;
} 

/*About page*/
#about {margin-top: 10%;}
.profile {
  margin: 0; height: 60vh; width: 400px; 
  border-radius: 5%; margin-bottom: 1rem;
  z-index: -1;
}
.pf-slides, pf-slides:after {  
  height: 60vh; width: 400px;
  border: 0; padding: 0;
  list-style: none; margin: 0;
  border-radius: 50%;
  position: absolute;
  margin-bottom: 1rem;
  z-index: -1;
}
.pf-slides li span {
  height: 60vh; width: 400px;
  margin: 0; padding: 0; border: 0;
  border-radius: 50%; margin-bottom: 1rem;
  position: absolute; color: transparent;
  opacity: 0; margin: 0; z-index: -1;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  object-fit: cover;
  animation: imageAnimation 14s linear infinite 0s; /* total 7 images * 2s */
}
.pf-slides:after{
  content: '';
  background-image: transparent url(./media/backg.svg) no-repeat center center;
}

/* Slides timing (2s each) */
.pf-slides li:nth-child(1) span { background-image: url(./media/about.jfif); animation-delay: 2s; }
.pf-slides li:nth-child(2) span { background-image: url(./media/pro6.jfif); animation-delay: 4s; }
.pf-slides li:nth-child(3) span { background-image: url(./media/pro1.jfif); animation-delay: 6s; }
.pf-slides li:nth-child(4) span { background-image: url(./media/pro3.jfif); animation-delay: 8s; }
.pf-slides li:nth-child(5) span { background-image: url(./media/pro4.jfif); animation-delay: 10s; }
.pf-slides li:nth-child(6) span { background-image: url(./media/pro5.jfif); animation-delay: 12s; }
.pf-slides li:nth-child(7) span { background-image: url(./media/pro6.jfif); animation-delay: 14s; }

@keyframes imageAnimation { 
  0% { opacity: 0; animation-timing-function: ease-in; }
  8% { opacity: 1; animation-timing-function: ease-out; }
  14% { opacity: 1 }
  20% { opacity: 0 }
  100% { opacity: 0 }
}
.no-cssanimations .pf-slides .pf-li .pf-span { opacity: 1; }

.profile-txt {font-family: 'Kolker Brush', cursive; font-size: 3em;}

/*Blog and News*/
.txt { font-family: 'DM Serif Display', serif;}
.newsBox {margin-top: 2em;} #news, #blogs {margin: 0;}
.newsItem {
  position: relative; padding-left: 0;
  margin: 0; height: 500px;
  overflow: hidden; width: 720px;
  margin-bottom: 2em;
}
.newsChildren {
  display: flex; flex-direction: column; width: 100%;
  justify-content: center; align-items: center; height: auto;
  position: absolute; animation: carousel 20s linear infinite;
  top: 0; transform: translateX(100%); object-fit: cover;
}
.newsChildren:nth-child(1) {
  animation-name: first-picture, carousel;
  animation-duration: 20s;
  animation-iteration-count: 1, infinite;
  animation-delay: 0s, 20s;
  transform: translateX(0%);
}
.newsChildren:nth-child(2) {
  animation-delay: Calc(20s * .33);
}
.newsChildren:nth-child(3) {
  animation-delay: Calc(20s * .66);
}
@keyframes first-picture {
  0% { transform: translateX(0%); }
  7.5%, 33% { transform: translateX(0); }
  40.5%, 100% { transform: translateX(-100%); }
}
@keyframes carousel {
  0% { transform: translateX(100%); }
  7.5%, 33% { transform: translateX(0); }
  40.5%, 100% { transform: translateX(-100%); }
}
/* The keyframes for mobile */
@keyframes first-picture-responsive {
  0% { transform: translateX(0%); }
  5.5%, 25% { transform: translateX(0); }
  30.5%, 100% { transform: translateX(-100%); }
}
@keyframes carousel-responsive {
  0% { transform: translateX(100%); }
  5.5%, 25% { transform: translateX(0); }
  30.5%, 100% { transform: translateX(-100%); }
}
.videoBlog {
  height: auto;
}
hr { 
  width: 80vw; display: block;
  margin-top: 0; margin-bottom: 3em;
  margin-left: auto; margin-right: auto;
  border: none; height: 1px;
  text-align: center; background-color: #083587;
}
h1 {font-size: 3em;}

/*Blogging section*/
.blogs { 
  position: relative;
  display: grid;
  grid-template-columns: 100%;
  margin: 5% 5% 1% 10%; left: 0;
} 
.card {
  display: flex; flex-direction: column;
  justify-content: center; gap: 0.8em;
  align-items: center; margin-bottom: 2em;
} 
#blogTlt {margin-top: 0px; margin-bottom: 4px; font-size: 1.8em;}
.blogTxt {font-size: 1.6em;  margin-top: 0px; margin-bottom: 0px;}
#post1 {margin-top: 2em;}

/* Blog images with red frame */
.blogs img {
  border: 4px solid red;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(255,0,0,0.4);
}

/*Opening blog posts*/
.post {
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  margin: 2rem; margin-bottom: 20vh;
}

/*Responsive design*/
@media screen and (max-width: 900px) { 
  .newsItem {width: 600px; height: 450px} 
  .image {width: 100%; object-fit: cover;} 
  .img-title {font-size: 12px;} 
  img {width: 600px; height: auto;}
  .profile {width: 350px; height: 60vh;} 
  .pf-slides, pf-slides:after {height: 60vh; width: 350px;}
  .pf-slides li span {height: 60vh; width: 350px;} 
  iframe {width: 600px; height: 450px;} 
  #about {margin-top: 10%;}
}
@media screen and (max-width: 750px) { 
  img {width: 500px;}
  .profile {width: 300px; height: 50vh; margin: 1.2rem;} 
  .pf-slides, pf-slides:after {width: 300px; height: 50vh;}
  .pf-slides li span {width: 300px; height: 50vh;} 
  #blogTlt {font-size: 1.6em;} .blogTxt {font-size: 1.6em;}
  .profile-txt {font-size: 2.7em;} 
  iframe {width: 500px; height: 400px;} 
  .newsItem {width: 500px; height: 400px}
}
@media screen and (max-width: 600px) { 
  #blogTlt {font-size: 1.4em;} img {width: 400px;} 
  .blogTxt {font-size: 1.1em;} .newsItem {width: 400px; height: 300px;} 
  iframe {width: 400px; height: 300px;} #about {margin-top: 15%;}
}
@media screen and (max-width: 480px) { 
  .profile-txt {font-size: 2.4em;} #blogTlt {font-size: 1.3em;}
  .image {width: 100%; object-fit: cover;} .img-title {font-size: 10px;} 
  .blogTxt {font-size: 1em;}
  img {width: 300px;} iframe {width: 300px; height: 200px;} 
  .profile {width: 250px; height: 45vh; margin: 1rem;} 
  .pf-slides, pf-slides:after {width: 250px; height: 45vh;}
  .pf-slides li span {width: 250px; height: 45vh;} 
  .newsItem {width: 300px; height: 200px;} 
}
@media screen and (max-width: 380px) { 
  iframe{width: 260px; height: 170px;}
  .blogTxt {font-size: 0.9em;} img {width: 260px;} 
  #about {margin-top: 20%;} #blogTlt {font-size: 1.2em;}
  .profile {width: 200px; height: 40vh;} 
  .pf-slides, pf-slides:after {width: 200px; height: 40vh;}
  .pf-slides li span {width: 200px; height: 40vh;} 
  h1 {font-size: 2em;} 
  .profile-txt {font-size: 2.1em;}
}