body {
    background-image: url('../homeimgs/textureBg.png');
    font-family: "t26-carbon", monospace;
}



.item1 { 
    grid-area: profile; 
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.item2 { 
    grid-area: context; 
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.item3 { grid-area: info1; }
.item4 { grid-area: info2; }


.grid {
  display: grid;
  grid-template-areas:
    'profile info1'
    'profile info1'
    'profile info2'
    'context info2'
    ;
  gap: 10px;
  padding: 10px;
  margin-left: 20%;
  margin-right: 20%;
}

.grid > div {
  /*background-color: rgba(255, 255, 255, 0.8);*/
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}



#gender {
    width:150px;
    height: auto;
    margin:5%;
    display: block;
}

#context {
    width: 300px;
    display: block;
}

#contextInfo{
    position: absolute;
    font-size: 15px;
    text-align: left;
    max-width: 250px;
}

.banner{
    width: 400px;
}

.grid3{
    display: grid;
    grid-template-areas:
      'img'
      'info'
      'info2'
      ;
    gap: 10px;
    padding: 10px;
}

.profileImage { 
    grid-area: img;
    display: flex;
    justify-content: center;
    align-items: center;
}
#profileInfo {
    grid-area: info; 
    font-size: 15px;
    text-align: left;
    max-width: 250px;
    margin-left: 15%;
    line-height: 3vh;
}
#profileInfo2 {
    grid-area: info2;
    font-size: 15px;
    text-align: left;
    max-width: 250px;
    margin-left: 15%;
}

.profileOverlap {
    position: absolute;
    text-align:center;

}

#rightArrow, #leftArrow {
    width:80px;
    position: relative;
    margin-top: -30%;
}

#rightArrow:hover, #leftArrow:hover {
    transform: scale(1.2);
}

#rightArrow {
    float: right;
    margin-right: -20%;
}

#leftArrow {
    float: left;
    margin-left: -20%;
}

#khariMain{
    width: 300px;
    height:auto;
    display: block;
}

#cat{
    width:50px;
}


.stats {
    width:380px;
    margin-top: 5%;
}

.statCaption {
    font-size: 15px;
    text-align: left;
    max-width: 250px;
    margin-left: 15%; 
    margin-top: -0.5%;
}

@media only screen and (max-width: 900px) {
    .grid {
        display: grid;
        grid-template-areas:
          'profile'
          'context'
          'info1'
          'info2'
          ;
        gap: 10px;
        padding: 10px;
        margin-left: 20%;
        margin-right: 20%;
      }


  }

  @media only screen and (max-width: 600px) {

    .grid {
        margin-left: 2%;
        margin-right: 2%;
      }

      
    #khariMain {
        width: 250px;
    }

    #rightArrow, #leftArrow {
        width:70px;
    }

    #gender{
        width: 120px;
    }

    #context {
        width:250px;
    }

    #contextInfo {
        font-size: 13px;
        max-width: 200px;
    }

    .banner {
        width: 300px;
    }

    .profileOverlap {
        font-size: 25px;
    }

    .stats {
        width: 300px;
    }

  }


    /*dropdown menu button*/
    .dropbtn {
        border: none;
        cursor: pointer;
        width:50px;
        padding: 20px;
      }
    
      .icons{
        width:90px;
        height:auto;
      }
      
      .dropbtn:hover, .dropbtn:focus {
        filter: drop-shadow(5px 5px #21363a90);
      }
      
      .dropdown {
        position: relative;
        display: inline-block;
      }
      
      .dropdown-content {
        display: none;
        position: absolute;
        /*background-color: #608a7f;*/
        min-width: 160px;
        overflow: auto;
        z-index: 5;
      }
      
      .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
      }
      
      .dropdown a:hover {
        /*background-color: #a7b3b1;*/
        color: white;
    }
      
      .show {display: block;}