@import url('https://web.archive.org/web/20230821190811cs_/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:#ffffff;
font-family: 'Archivo Narrow', sans-serif;
font-size:16px;
margin:0px;
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;
}

.textonly{
background-color:#222222;
border-radius: 5px;
width:260px;
padding:8px;
font-weight: bold;
box-shadow: 0px 1px 5px 0px #221133;
margin:auto auto 16px auto;
border:2px solid #eeeeee;
}

.text2{
background-color:#222222;
border-radius: 5px;
width:760px;
padding:8px;
font-weight: bold;
box-shadow: 0px 1px 5px 0px #221133;
margin:auto auto 16px auto;
border:2px solid #eeeeee;
}

.container-border{
width:990px;
padding:4px;
margin: auto;
background-color:#222222;
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;
transition-timing-function: ease-out;
transition-duration: 0.3s;
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:#222222;
border-right:2px solid #eeeeee;
border-bottom:2px solid #eeeeee;
padding:2px 8px 6px 6px;
border-bottom-right-radius:12px;
font-size:22px;
}

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

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

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

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

.album:hover{
transform: translateY(-5px);
transition-timing-function: ease-out;
transition-duration: 0.1s;
filter: saturate(1) contrast(100%) brightness(1);
box-shadow: 0px 8px 10px 0px #00000077;
height:340px;
margin-bottom:-56px;
z-index:2;
border:1px solid #eeeeee;
}

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

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

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