/* kin page */
.kinContainer{
  display: grid;
  grid-template-areas:
    "home banner"
    "nav intro"
    "nav list";
  grid-template-columns: 1fr 7fr;
  gap: 5px 5px;
  padding: 10px;
  }
.kinContainer .home {
  grid-area: home;
  text-align: center;
  background-color: lightpink;
  }  
.kinContainer .banner {
  grid-area: banner;
  background-color: lightpink;
} 
.kinContainer .nav {
  grid-area: nav;
  background-color: lightpink;
  } 
.kinContainer .intro {
  grid-area: intro;
  background-color: lightpink;
  }
.kinContainer .list {
  grid-area: list;
  text-align: center;
  background-color: lightpink;
  }
tabel, td, th {
  text-align: center;
  vertical-align: top;
  padding: 5px;
  }
tabel {
  width:100%;
  }
.navButton {
  padding: 5px;
  text-align: center;
  border:5px solid black;
  }
.kli{
  width:250px;
  height:250px;
  background-color:grey;
  position: relative;
}
.klio {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: white;
}
.kli:hover .klio {
  opacity: 0.9;
} 
.klit{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  } 
.Alfred {
  background-image: url(https://i.pinimg.com/736x/99/e6/80/99e68081da3c61b4b2d19c2752d26f8a.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  }
.Aziraphale {
  background-image: url(https://i.pinimg.com/webp85/1200x/62/c2/ff/62c2ffd094b44d7a4a7b707730c0d495.webp);
  background-repeat: no-repeat;
  background-position: center;
   background-size: cover;
  }
.charlie {
  background-image: url(https://i.pinimg.com/736x/43/b2/04/43b204e0bc9a0cde26a3adefbf447683.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  }
.joy {
  background-image: url(https://posttraumaticmanifesto.carrd.co/assets/images/image75.jpg?v=bc5dedb9);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; 
  }
.freyja {
  background-image: url(https://posttraumaticmanifesto.carrd.co/assets/images/image57.jpg?v=bc5dedb9);
  background-repeat: no-repeat;
  background-position: center left;
  background-size: cover; 
  }
.dp {
  background-image: url(https://i.pinimg.com/736x/4c/37/16/4c37166d922827edc2587e08d952f5e7.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; 
  }
.denji {
  background-image: url(https://i.pinimg.com/webp85/736x/15/4b/57/154b5719acae508cc51b614e0c10030d.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; 
  }
.dipper {
  background-image: url(https://i.pinimg.com/736x/2e/8a/a0/2e8aa0dfb48e6d41a8216ee89463eb37.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; 
  }
.jordyn {
  background-image: url(https://posttraumaticmanifesto.carrd.co/assets/images/image22.jpg?v=bc5dedb9);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; 
  }
.gangle {
  background-image: url(https://i.pinimg.com/736x/c6/53/49/c653490badc30e2b723a8da985d27667.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; 
  }
.izzy {
  background-image: url(https://i.pinimg.com/1200x/af/c1/4c/afc14cd4b251261085540e65d034ed21.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; 
  }
.lapis{
  background-image: url(https://i.pinimg.com/webp85/736x/94/58/a8/9458a8a235f2cbc6a4b5b19758ace36a.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;  
  }
.pim{
  background-image: url(https://i.pinimg.com/736x/95/f4/61/95f461cb31e06fae1e865c57765e9fa9.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;  
}
.puso{
  background-image: url(https://i.pinimg.com/736x/14/04/d1/1404d1e2ec2762d75f4497cd4ad2df31.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;  
}
.nataana{
  background-image: url(https://posttraumaticmanifesto.carrd.co/assets/images/image82.jpg?v=bc5dedb9);
  background-repeat: no-repeat;
  background-position: center left;
  background-size: cover;  
}
.shinji{
  background-image: url(https://i.pinimg.com/webp85/736x/00/38/c8/0038c8d71f9c06e05704d6ff15bde5ac.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;  
}
.tahira {
  background-image: url(https://posttraumaticmanifesto.carrd.co/assets/images/image11.jpg?v=bc5dedb9);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;  
  }
.teto {
  background-image: url(https://i.pinimg.com/736x/c9/70/86/c97086fd4a54f18676969d29948e3186.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;  
  }
.mayra {
  background-image: url(https://posttraumaticmanifesto.carrd.co/assets/images/image66.jpg?v=bc5dedb9);
  background-repeat: no-repeat;
  background-position: center left;
  background-size: cover;  
  }
.yoshiki{
  background-image: url(https://i.pinimg.com/736x/52/b7/1f/52b71f0e9eaf37463aa02d93dbb65110.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; 
  }
  
/* blog page */
.blogContainer {
  display:grid;
  grid-template-areas:
    "home banner"
    "nav intro"
    "nav blog";
  grid-template-columns: 1fr 7fr;
  gap: 5px 5px;
  padding: 10px;
  position: relative;
}
.blogContainer .home {
  grid-area: home;
  text-align: center;
  background-color: lightpink;
  position: relative;
  }  
.blogContainer .banner {
  grid-area: banner;
  background-color: lightpink;
  position: relative;
} 
.blogContainer .nav {
  grid-area: nav;
  background-color: lightpink;
  position: relative;
  } 
.blogContainer .intro {
  grid-area: intro;
  background-color: lightpink;
  position: relative;
  }
.blogContainer .blog {
  grid-area: blog;
  text-align: center;
  position: relative;
  }
.blogItem{
  width: 99%;
  background-color:yellow;
  text-align: left;
  }
.blogItem:nth-child(odd) {
  background-color:skyblue;
  }
.blogTitle{
  font-weight:bold;
  }
.blogEven{
  display:flex;
  color:grey;
  flex-direction:column-reverse;
  justify-content: center;
  margin: 15px;
}
.twButton {
  color: green;
  border: black solid 5px;
  padding: 5px;
}
.twButtonTitle {
  color: purple;
  border: black solid 5px;
  padding: 5px;
}
.twButtonContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}