* {
  box-sizing: border-box;
  font-family: 'Source Serif 4', sans-serif;
  font-size: large;
}
/* Set the background color of body to tan */
body {
  background-color: rgb(253, 250, 253);
  margin: 0;
}

#main-section {
  margin: auto;
  width: 50%;
}

@media screen and (max-width: 1300px) {
  #main-section {
    width: 65%;
  }
}

@media screen and (max-width: 992px) {
  #main-section {
    width: 85%;
  }
}
@media screen and (max-width: 600px) {
  #main-section {
    width: 120%;
  }
}

header {
  margin: 28px 0;
  padding: 0px 20px;
  font-size: 28px;
  color: #212324;
}
.app-type {
  margin-top: 10px;
}
.app-container {
  display: flex;
  transition: background-color 0.3s ease-in;
  background-color: rgb(255, 255, 255);
}

.app-container:hover {
  background-color: rgb(223 239 242);
}
.app-container:hover .app-img {
  transform: scale(1.3);
}

.img-holder {
  height: 100px;
  min-width: 100px;
  margin: 15px;
  border-radius: 15px;
  overflow: hidden;
}

.app-img {
  transition: 0.4s ease-in-out;
  width: 100px;
  height: 100px;
}

.app-type-name {
  background-image: linear-gradient(
    -2deg,
    rgba(255, 255, 255) 40%,
    rgb(228 236 245)
  );
  padding: 10px 16px;
  font-weight: bold;
  font-size: 1.2em;
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -o-sticky;
  position: -ms-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.app-name {
  font-weight: bold;
  font-size: 1.1em;
  text-decoration: none;
  color: rgb(36, 33, 33);
}
.app-description-holder {
  padding: 10px;
}

.app-description {
  font-size: 0.95em;
}
.app-description-link {
  text-decoration: none;
}
.app-description-link:hover {
  background-color: khaki;
}