/* index
*     _____   ______  _______  __
*    /  _/ | / / __ \/ ____/ |/ /
*    / //  |/ / / / / __/  |   / 
*  _/ // /|  / /_/ / /___ /   |  
* /___/_/ |_/_____/_____//_/|_|  
*
*/

.guestpic {
  margin-left: 2%;
  margin-bottom: 2%;
  float: right;
  height: 200px;
  max-width: 50%;
  object-fit: cover;
  border-radius: 20px;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.726));
  transition: transform 0.2s;
}
.rightcolumn section h2{
  margin-top:10px;
  font-size: 24pt;
}
.leftcolumn section h2{
  font-size: 24pt;
}

.guestpic:hover {
  transform: scale(1.05);
}

#recentposts .post .postsubtitle {
  text-align: right;
  font-style: italic;
  margin-bottom: 5pt;
}

.sixty-fourty {
  display: grid;
  grid-template-rows: auto auto;
}

@media screen and (min-width: 750px) {
  .sixty-fourty {
    grid-template-columns: 60% 40%;
  }

  #recentposts {
    max-height: calc(var(--content-height) - 100px);
    overflow-y: scroll;
  }

  #content {
    /* so that the function that sets the height of the posts
  isn't just grabbing the container height */
    height: max-content !important;
  }
}