@font-face {
  font-family: "Mona Sans";
  src: url("../font/Mona-Sans.woff2") format("woff2 supports variations"),
    url("../font/Mona-Sans.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-stretch: 75% 125%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Mona Sans", sans-serif;
}

body {
  background-color: #2c2c2c;
  color: #fff;
}

.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(50px);
}

.container {
  text-align: center;
  max-width: 333px;
  width: 100%;
}

.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.randomMusicLink {
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  background-color: #2c2c2c95;
  border: 1px solid #2c2c2c;
  padding: 10px 20px;
  border-radius: 5px;
  transition: 300ms;
}

.randomMusicLink {
  transition: box-shadow 0.3s ease;
}

.ashes:hover {
  box-shadow: 5px 5px 5px rgba(240, 63, 3, 0.4), 10px 10px rgba(240, 63, 3, 0.3),
    15px 15px rgba(240, 63, 3, 0.2), 20px 20px rgba(240, 63, 3, 0.1),
    25px 25px rgba(240, 63, 3, 0.05);
}

.awake:hover {
  box-shadow: 5px 5px 5px rgba(161, 97, 87, 0.4),
    10px 10px rgba(161, 97, 87, 0.3), 15px 15px rgba(161, 97, 87, 0.2),
    20px 20px rgba(161, 97, 87, 0.1), 25px 25px rgba(161, 97, 87, 0.05);
}

.ascend:hover {
  box-shadow: 5px 5px 5px rgba(190, 124, 115, 0.4),
    10px 10px rgba(190, 124, 115, 0.3), 15px 15px rgba(190, 124, 115, 0.2),
    20px 20px rgba(190, 124, 115, 0.1), 25px 25px rgba(190, 124, 115, 0.05);
}

.fallen_embers:hover {
  box-shadow: 5px 5px 5px rgba(252, 252, 252, 0.4),
    10px 10px rgba(252, 252, 252, 0.3), 15px 15px rgba(252, 252, 252, 0.2),
    20px 20px rgba(252, 252, 252, 0.1), 25px 25px rgba(252, 252, 252, 0.05);
}

.illenium:hover {
  box-shadow: 5px 5px 5px rgba(41, 54, 61, 0.4), 10px 10px rgba(41, 54, 61, 0.3),
    15px 15px rgba(41, 54, 61, 0.2), 20px 20px rgba(41, 54, 61, 0.1),
    25px 25px rgba(41, 54, 61, 0.05);
}

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 10px 0;
  color: #dcdcdc;
  opacity: 0.5;
}

footer a {
  color: #e7e7e7;
  text-decoration: none;
  font-weight: 600;
}

.randomText {
  font-size: 8px;
}