@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow&display=swap');

@keyframes huecycle {
  from { filter: hue-rotate(0deg) saturate(200%); }
  to   { filter: hue-rotate(360deg) saturate(200%); }
}

@keyframes gradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 0% 0%; }
  100% { background-position: 0% 50%; }
}

@keyframes wiremove {
  0%   { background-position: 0px 0px; }
  100% { background-position: 0px 1500px; }
}

body {
  color: #fff;
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 16px;
  margin: 0;
  background-color: #111;
}

.everything {
  height: 100%;
  display: flex;
  flex-flow: column;
}

.wires {
  background-image: url(" /img/Index/bg.png");
  background-attachment: fixed;
  padding: 64px;
  animation: wiremove 22s linear infinite;
  text-align: center;
  flex: 1 1 auto;
}

.container-border {
  width: 990px;
  padding: 4px;
  margin: auto;
  border-radius: 25px;
  background: linear-gradient(180deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  box-shadow: 0px 2px 10px 0px #221133;
  display: flex;
}

.container {
  width: 990px;
  background-color: #181818;
  padding: 24px;
  text-align: center;
  border-radius: 25px;
}

.cathead {
  margin-left: -10px;
  margin-top: -64px;
}

.goback {
  position: fixed;
  background-color: #222;
  border-right: 2px solid #eee;
  border-bottom: 2px solid #eee;
  padding: 2px 8px 6px 6px;
  border-bottom-right-radius: 12px;
  font-size: 22px;
}

a {
  color: #eee;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  color: #ee11aa;
}

.albumbox {
  width: 295px;
  height: 340px;
  position: relative;
  display: inline-block;
  margin: 0 4px -25px 4px;
}

.album {
  position: absolute;
  background-color: #2a2534;
  padding: 6px;
  border-radius: 16px;
  text-align: center;
  filter: saturate(0) contrast(75%) brightness(0.8);
  box-shadow: 0px 2px 4px #00000077;
  height: 281px;
  overflow: hidden;
  z-index: 1;
  border: 1px solid #2a2534;
  transition: all 0.3s ease-out;
}

.album:hover {
  transform: translateY(-5px);
  filter: saturate(1) contrast(100%) brightness(1);
  box-shadow: 0px 8px 10px #00000077;
  height: 340px;
  margin-bottom: -56px;
  z-index: 2;
  border: 1px solid #eee;
}

.albumimg {
  width: 280px;
  height: 280px;
  border-radius: 12px;
  margin-bottom: 6px;
}

.album a {
  font-size: 22px;
  margin: 0 6px;
}

.album a:hover {
  color: #ffc5b4;
  animation: huecycle 2s linear infinite;
  text-shadow: 0px 0px 12px #f00;
}