body{
    height: 100vh;
    background-image: url("/Images/background.png");
    background-size: cover
}

/* grid container */
.containerMain {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 900px;
  grid-template-columns:  20% 50% 1fr;
  padding: 10px;
  grid-template-rows: 30px 160px 250px 250px;
  gap:1px;
  grid-template-areas:
    "ItemNavigation ItemNavigation ItemNavigation"
    "MainAboutMeContainer MainAboutMeContainer ItemAsidePicture"
    "ItemBlogSpace ItemBlogSpace ItemAsidePicture"
    "ItemFooter ItemFooter ItemFooter";
  margin: 0 auto;
}
/* grid container */

/* list of items */
.ItemNavigation {
  grid-area: ItemNavigation;
}

.MainAboutMeContainer {
  grid-area: ItemAboutMe;
}

.ItemAsidePicture {
  grid-area: ItemAsidePicture;
  max-height: 400px;
 

}

.ItemAsidePicture IMG{
object-fit: cover;
width: 85%;
}

.ItemBlogSpace {
  grid-area: ItemBlogSpace;}

.ItemFooter {
  grid-area: ItemFooter;
  min-width:auto;
  min-height:auto;
}
/* list of items */

.FlexcontainterNavigation {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 25px;
  gap: 30px;
  background-color: hsl(298.6,89.6%,89.7%, 0.2);
}

a{
  color: #ffb4d9;
  text-decoration: none;
  font-family: 'Trebuchet MS', sans-serif;
  line-height: 1.5;
  letter-spacing: 1px;
  font-style: italic;  
}

.Navigation:hover{
  background-color: rgba(200, 255, 255, 0.1);
  color: white;
  text-shadow: 1px 1px 5px white;
  transition: background-color 0.5s, color 0.5s, text-shadow 0.5s;}

.ItemMainPicture{
grid-area: ItemFooter;
  height: 131px;
  width: auto;
  margin-left: 4%;
  margin-top: 2%;
}

.MainPicture IMG{
  display:block;
  object-fit: cover;
  width: 100%;
  height: 100%;
  padding: 1%;


}

.Introduction {background-color: hsl(298.6,89.6%,89.7%, 0.8);
padding: 3%;
color: hsl(265,73.3%,20.6%);
font-family: 'Trebuchet MS', sans-serif;
line-height: 1.5;
letter-spacing: 1px;
font-style: italic;  
font-size: 15px;
}

.ItemBlogSpace{
height: 130%;
background-color: hsl(298.6,89.6%,89.7%, 0.2);
margin: auto;}



/* scroll-enabling class */
.ItemBlogSpace {
    overflow:scroll;
     overflow-x: hidden; /* Hide horizontal scrollbar */
  scrollbar-color: white hsl(298.6,89.6%,89.7%, 0.2);
  scrollbar-width: thin;
}

.time{
background-color: hsl(298.6,89.6%,89.7%, 0.8);
margin: 2%;
padding-left: 3%;
color: hsl(265,73.3%,20.6%);
font-family: 'Trebuchet MS', sans-serif;
line-height: 1.5;
letter-spacing: 1px;
font-style: italic; 
font-size: 15px}

.maintext{background-color: hsl(298.6,89.6%,89.7%, 0.8);
margin: 2%;
padding: 3%;
color: hsl(265,73.3%,20.6%);
font-family: 'Trebuchet MS', sans-serif;
line-height: 1.5;
letter-spacing: 1px;
font-style: italic; 
font-size: 15px}

.post{
margin-bottom: 11%;

}





.postimage{
display: block;
object-fit: cover;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
width: 50%;}




/* Animated Blinkie Banner */

.Blinkie img{
max-width: 300px; /* to change blinkie size */
max-height: auto;

}

.FooterCarousel{
margin:  auto;
width: 900px;

display: flex;
overflow-x: auto; /*broken here */ 
}

.FooterCarousel::-webkit-scrollbar {
display: none;}

.group{
display: flex;
align-items: center;
    justify-content: center;
    gap: 5px;
    animation: spin 20s infinite linear;
    padding-right: 5px;
}


.Blinkie{
flex: 0 0 5em;
height: 5vw;
padding: 0.1vw;  /* to change blinkies gap between */
align-content: center;

}



@keyframes spin {
    from {translate: 0;}
    to {translate: -100%}
}