@import url("https://fonts.googleapis.com/css2?family=Exo:wght@100&display=swap");
/* make space for navbar */
* {
  transition: all 0.3s ease-in-out 0s;
  }

.homeContent {
  position: relative;
  top: 100px;
}

/* grid layout for home page */
.grid {
  display: grid;
  height: 600px;
  /* border: 1px solid red; */
  grid-template-rows: 1fr;
  grid-template-columns: 350px 4fr;
  grid-template-areas: "sidebar content";
  padding-left: 20px;
}

.grid__section {
  padding-left: 65px;
}

.sidebar {
  grid-area: sidebar;
  /* sidebar borders */
  background-color: transparent;
  border-right: 2px solid rgba(67, 83, 112, 0.2);
  border-right-width: 2px;
  border-right-style: solid;
  border-right-color: rgba(255, 255, 255, 0.2);
  border-left: 2px solid rgba(67, 83, 112, 0.2);
  border-left-width: 2px;
  border-left-style: solid;
  border-left-color: rgba(255, 255, 255, 0.2);
  border-top: 2px solid rgba(67, 83, 112, 0.2);
  border-top-width: 2px;
  border-top-style: solid;
  border-top-color: rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(67, 83, 112, 0.2);
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: rgba(255, 255, 255, 0.2);
  padding-left: 10px;
}

.content {
  grid-area: content;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}


.grid__image {
    width: 200px;
    height: 300px;
    margin: 10px;
  /* padding-left: 5px; */
}

.grid__image-title,
.grid__image-publisher {
  display: block;
  margin: 4px;
}

.grid__image-title {
  color: #fff;
  text-align: center;
}
.grid__image-title:link {
  text-decoration: none;
  /* color: #9ba8c700; */
}

/* .grid__image--active:hover {
  cursor: pointer;
  transform: translateY(-0.5rem);
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
} */

.grid__title-text {
  font-size: medium;
  margin-top: auto;
  margin-bottom: 50px;
  padding-left: 100px;
  padding-top: 70px;
  padding-bottom: 25px;
  font-size: 3em;
  color: #fff;
  font-family: "Exo", sans-serif;
  border-bottom: 2px solid rgba(186,210,255,.08);
}

body {
  font-family: sans-serif;
  background-color: rgba(8, 15, 31, 1);
  color: #9ba8c7;
}

/* space between div and establishing size of image container */
#div__container {
  margin: 10px;
  width: 250px;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid rgba(67, 83, 112, 0);
}

#div__container:hover {
  cursor: pointer;
  transform: translateY(-0.5rem);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.678);
  box-sizing: border-box;
  background-color: transparent;
  border: 2px solid rgba(67, 83, 112, .2);
}

/* media queries */
/* Mobile */
/* Small Desktops */
@media (min-width: 768px) and (max-width: 1096px) {
  .grid {
    grid-area: content;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    grid-template-rows: 1fr;
    grid-template-areas: "content content";
  }
}
/* Small Tablets */
@media (min-width: 321px) and (max-width: 767px) {
  .grid {
    grid-area: content;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    grid-template-rows: 1fr;
    grid-template-areas: "content content";
  }
}

/* Mobile */
@media (max-width: 320px) {
  .grid {
    grid-area: content;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    grid-template-rows: 1fr;
    grid-template-areas: "content content";
  }
}