a {
  color: #ffffff;
  text-decoration: none;
}

html {
  margin: auto;
}

body {
  font-family: "Noto Music", sans-serif;
  font-family: "Play", sans-serif;
}

.outer-container {
  font: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner-container {
  font-size: xx-large;
  padding: 20 10;
  background-color: black;
}

.outer-container-events {
  font: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20 0;
}

.inner-container-events {
  max-width: 550;
  font-size: xx-large;
  padding: 20 10;
  background-color: black;
}

.inner-container-links {
  max-width: 550;
  min-width: 550;
  font-size: xx-large;
  padding: 20 10;
  background-color: black;
}

.pink:hover {
  -webkit-text-stroke: 1px black;
  background-color: #fad5e6; // pink
}

.light-purple:hover {
  -webkit-text-stroke: 1px black;
  background-color: #c1c6e6; // light-purple
}

.yellow:hover {
  -webkit-text-stroke: 1px black;
  background-color: #fff798; // yellow
}

.orange:hover {
  -webkit-text-stroke: 1px black;
  background-color: #fcb131; // orange
}

.blue:hover {
  -webkit-text-stroke: 1px black;
  background-color: #c5dff6; // light blue
}

.purple:hover {
  -webkit-text-stroke: 1px black;
  background-color: #8c00fc; // purple
}

@media screen and (min-width: 820px) {
  #socials {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: row;
  }
}

@media only screen and (max-width: 820px) {
  #socials {
    display: none;
  }
}

article {
  font-size: x-large;
}

@media screen and (min-width: 820px) {
  #back-home {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    flex-direction: row;
    color: white;
  }
}

@media only screen and (max-width: 820px) {
  #back-home {
    display: none;
  }
}