/* body { */
/*     min-height: 100vh; */
/*     display: flex; */
/*     flex-direction: column; */
/* } */

/* nav { */
/*     height: 3rem; */
/* } */
/* Home Page */
/* #home-div { */
/*     align-items: center; */
/*     display: block; */
/*     flex: 1; */
/*     height: calc(100vh - 10rem); */
/*     /* margin + nav + footer */
/* } */

#home-feed {
  height: calc(100vh - 12rem);
  overflow-y: auto;
}

/* Blog Index */
#categories {
  position: sticky;
  height: 100vh;
  overflow-y: auto;
}

html,
body {
  box-sizing: border-box;
  height: 100vh !important;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
  border: 0px none;
  max-width: 100vw;
}

/* #blur-img { */
/*   filter: blur(1px) brightness(0.8); */
/*   -webkit-filter: blur(1px) brightness(0.8); */
/* } */

#img-overlay-text {
  text-shadow: 2px 2px 20px #000000;
}

a {
  text-decoration: none; /* Remove Underlines */
}

/* Tags */
/* TODO: Need to find a more procedural way to do this in code. */
#id_tags {
  padding: 0%;
}

/* Grid Sizing */
.grid-item {
  width: 20vw;
  border-radius: 10px;
  border: 3px solid transparent;
  transition: 0.3s;
}

.grid-item:hover, .grid-item:focus {
  position: block;
  border: 3px solid gold;
  border-radius: 10px;
}

.grid-item--width1 {
  width: 22vw;
}

.grid-item--width2 {
  width: 24vw;
}

.grid-item--width3 {
  width: 27vw;
}

.grid-item--width4 {
  width: 34vw;
}


@media (hover: none) or (max-width: 768px) {
  .grid-item {
    width: 100%;
  }
  #no-hover {
    display: none;
  }
}