#social-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
  width: min(95%, 1000px);
  margin: auto;
}

.social-box {
  width: min(70%, 220px);
  margin: 15px 5px;

  -webkit-box-shadow: var(--title-background) 1px 1px 10px;
  box-shadow: var(--title-background) 1px 1px 10px;

  -webkit-transition: ease-out 200ms;
  -o-transition: ease-out 200ms;
  transition: ease-out 200ms;
}
.social-box a:hover img {
  -webkit-filter: drop-shadow(var(--accent) 5px 5px 0);
  filter: drop-shadow(var(--accent) 5px 5px 0);
}
.social-box a:hover p {
  color: var(--accent-focus) !important;
}
.social-box:hover {
  -webkit-box-shadow: var(--title-background) 5px 5px 15px;
  box-shadow: var(--title-background) 5px 5px 15px;
  background-color: var(--blog-box);
}
.social-box h1 {
  text-justify: distribute;
  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
  font-family: "mono", monospace;
  font-weight: bold;
  text-transform: uppercase;

  margin: 5px 0;
  padding: 0 20px;
}
.social-box h2 {
  text-justify: distribute;
  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
  font-size: 1.125rem;
  font-weight: lighter;
  padding: 0 5px;
  margin-bottom: 5px;
  margin-top: -5px;
  color: var(--load-light);
  background-color: var(--title-background);
}
.social-box p {
  margin: 5px 0;
  color: var(--light);
  padding: 5px 25px 15px 25px;
  text-shadow: var(--max-dark) 1px 1px 1px;
}
.social-box img {
  -o-object-fit: contain;
  object-fit: contain;
  margin: 20px auto;
  width: min(100%, 220px);
  height: 180px;

  -webkit-transition: ease-out 200ms;
  -o-transition: ease-out 200ms;
  transition: ease-out 200ms;
}