body {
      background-image: url(tattoo/tatbg.jpg);
      background-repeat: repeat;
       color: black;
       font-family: 'Courier New', Courier, monospace; 
       font-size: 14px; 
       font-style: normal; font-variant: normal; font-weight: 400; line-height: 20px; 
}

.main {
 display: grid;
 grid-template-columns: 1fr 5fr;
 height: 95vh;
 width: 100%;
 grid-template-areas:
    'header header'
    'index content';
}

.grid-item{
    display: grid;
    align-content: start;
}

.header{grid-area: header; grid-column: 1/-1;; height: 0px;}
.index{grid-area: index;}
.content{grid-area: content;}



.navbar {
    height: 30px;
    background: #b4bfba;
    background: linear-gradient(180deg, rgba(180, 191, 186, 1) 0%, rgba(140, 140, 140, 1) 32%, rgba(237, 237, 237, 1) 100%);
    border-radius: 10%;
    padding-top: 10px;
}



.content-grid{
    grid-template-columns: repeat(5, 1fr);
    display: none;
    gap: 15px;
}

.content-grid img{
    max-width: 100%;
    max-height: 500px;
    object-fit: contain;
    display: block;
}

.content-grid.active{
    display:grid;
}

.bio-text {
    display: none;
}
.bio-text.active{
    display: block;
}


ul {
    padding-left: 0;
    list-style: none;
}

li {
  display: block;
  color: black;
  text-align: center; 
  margin-bottom: 10px;
  cursor: pointer;
}

li:hover{
    color: blue;
    
}

@media (max-width: 1200px) {
  .content-grid {
      grid-template-columns: repeat(4, 1fr);
  }
}


@media (max-width: 880px) {
  .content-grid {
      grid-template-columns: repeat(3, 1fr);
  }
}


@media (max-width: 480px) {
  .main{
    grid-template-columns: 1fr;
    grid-template-areas:
      'header'
      'index'
      'content'
  }
  .content-grid {
      grid-template-columns: 1fr;
  }
}