:root {
  --red: rgb(255, 0, 0);
  --main-black: #10100f;
  --main-darkest: #23231f;
  --main-dark: #2d2d2a;
  --main-darker: #5c5c59;
  --main-medium: #a1a19d;
  --main-light: #d4d3ce;
  --main-lightest: white;
}

.date14,
.date15,
.date16,
.date17,
.date18,
.date19,
.date20,
.date21,
.date22,
.date23,
.date24,
.date25 {
  border: black 1px solid;
  padding: 2px 4px;
  border-radius: 3px;
  color: var(--main-lightest);
}

.date14 {
  background-color: #86a215;
}

.date15 {
  background-color: #a26e15;
}

.date16 {
  background-color: #a24415;
}

.date17 {
  background-color: #a2151a;
}

.date18 {
  background-color: #a21591;
}

.date19 {
  background-color: #8615a2;
}

.date20 {
  background-color: #5c15a2;
}

.date21 {
  background-color: #3115a2;
}

.date22 {
  background-color: #1515a2;
}

.date23 {
  background-color: #1550a2;
}

.date24 {
  background-color: #1583a2;
}

.date25 {
  background-color: #15a28d;
}

#home-btn {
  color: #6ab410;
}
#home-btn:hover {
  color: #a6ff00;
}

#youtube-btn {
  color: #df2525;
}
#youtube-btn:hover {
  color: rgb(255, 0, 0);
}

#work-btn {
  color: #e8bd00;
}
#work-btn:hover {
  color: #fffb03;
}

#contact-btn {
  color: #d1850a;
}
#contact-btn:hover {
  color: #ff9d00;
}

#itch-io-btn {
  color: #d20c51;
}
#itch-io-btn:hover {
  color: #ff0059;
}

#twitter-btn {
  color: #00bae8;
}
#twitter-btn:hover {
  color: #00eeff;
}

#linkedin-btn {
  color: #2b78eb;
}
#linkedin-btn:hover {
  color: #00aaff;
}

#steam-btn {
  color: #5b70ae;
}
#steam-btn:hover {
  color: #006dd2;
}

a:not(.btn) {
  color: #ffffff;
  text-decoration: none;
  padding: 0px 4px;
  border-radius: 4px;
}

a:not(.btn):hover {
  background-color: #ffffff10;
}

.btn {
  display: inline-block;
  color: var(--main-medium);
  line-height: 0.9em;
  font-size: 2.5em;
  transition: all 0.2s;
  background-color: var(--main-lightest);
  border-radius: 8px;
  border: 1px solid black;
  padding: 0.2em;
  box-shadow: black 0px 5px 10px;
  margin-top: 4px;
  margin-bottom: 0px;
}

.btn:hover {
  box-shadow: black 0px 10px 10px;
  margin-top: 0px;
  margin-bottom: 4px;
  background-color: var(--main-lightest);
}

.centered {
  text-align: center;
}

.credits {
  font-size: medium;
  text-align: left;
}


.article_container {
  display: grid;
  grid-gap: 2em 0.5em;
  margin: auto;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
}

@media (max-width: 600px) {
  .article_container {
    grid-template-columns: 1fr;
  }
}