@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Rubik+Mono+One&family=Press+Start+2P&display=swap');


/* GLOBAL EFFECTS */
* { box-sizing: border-box; }


@keyframes floaty {
0% { transform: translateY(0); }
50% { transform: translateY(-6px); }
100% { transform: translateY(0); }
}


@keyframes glitch {
0% { text-shadow: 2px 0 hotpink, -2px 0 cyan; }
20% { text-shadow: -2px 0 hotpink, 2px 0 cyan; }
40% { text-shadow: 2px 2px cyan, -2px -2px hotpink; }
60% { text-shadow: -2px 2px hotpink, 2px -2px cyan; }
100% { text-shadow: 2px 0 hotpink, -2px 0 cyan; }
}


/* HOME-ONLY  */
.home {
position: relative;
}


.home::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.03) 0 1px, rgba(0,0,0,0) 1px 3px);
mix-blend-mode: overlay;
opacity: 0.35;
}


.shake:hover {
animation: shake 0.3s infinite;
}


@keyframes shake {
0% { transform: translate(0,0); }
25% { transform: translate(2px,-2px); }
50% { transform: translate(-2px,2px); }
75% { transform: translate(2px,2px); }
100% { transform: translate(0,0); }
}


.top8 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 12px;
}


.top8 .card {
border-style: solid;
box-shadow: 0 0 20px cyan;
}


.comment {
background: #000;
border: 2px solid cyan;
padding: 10px;
margin-top: 10px;
}


.comment strong { color: hotpink; }
20% { text-shadow: -2px 0 hotpink, 2px 0 cyan; }
40% { text-shadow: 2px 2px cyan, -2px -2px hotpink; }
60% { text-shadow: -2px 2px hotpink, 2px -2px cyan; }
100% { text-shadow: 2px 0 hotpink, -2px 0 cyan; }
}