i've tried just about everything i can think of, i even posted my situation in the unofficial spacehey subreddit! twice!!
basically it works for a second then disappears, blinkies and an embedded video work but nothing to do with the body or main or anything that i want to look cool. here's the code, it's a mish-mash of layouts i've seen and yt tutorials and yeah.. might not be pretty:
<style>
body{
background-color: #e3e3e3;
background: url(https://cdn.discordapp.com/attachments/1081955884969775126/1326498667468685372/grungey_crissX.gif?ex=677fa5a7&is=677e5427&hm=ca9c724ee76c56dd0bb52cc649f17a71ea96f6e38843e6936a7a5f7fd3a29083&);
background-size: 1000px;
}
main{
background-color: #c0c0c0;
background-size: 1000px;
}
h1{
animation: type 3s steps(27);
color: white;
font-size: 10px;
font-family: courier;
white-space: nowrap;
overflow: hidden;
}
@keyframes type{
0%{
width:0ch;
}
100%{
width:27ch;
}
}
@keyframes blink{
0%{opacity:1;}
50%{opacity:0;}
100%{opacity:1;}
}
.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 8px);
}
100% {
transform: translate(0, -0px);
}
.online{
color: var(--links) !important;
text-transform: lowercase;
text-align: right;
}
.online img{
filter: brightness(0) saturate(100%) invert(50%) sepia(5%) saturate(326%) hue-rotate(174deg) brightness(92%) contrast(82%); !important;
}
</style>