html {
	background-color: black;
	color: white;
	font-family: "Comic Sans MS";
	font-size: 20px;
	line-height: 1;
}

.wrap {
	background-image: url("bg.gif");
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	filter: saturate(20%);
}

body {
	background-image: url("fire.gif");
	background-repeat: repeat-x;
	background-position: bottom;
	padding-bottom: 2.5rem;
	padding-left: 15px;
	padding-right: 15px;
	margin: 10px;
	border: 20px solid transparent;
	border-image: url("METAL7.jpg");
	border-image-repeat: repeat;
	border-image-slice: 10;
}

header {
	text-align: center;
}

.overlay {
	background-image: url("wizard.gif");
	background-repeat: no-repeat;
	background-position-x: right -100px;
	background-size: cover;
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 999;
	height: 500px;
	width: 500px;
	pointer-events: none;
	margin: 0;
	rotate: -3deg;
}

.wavy span {
	display: inline-flex; 
	animation: wavy 2s infinite linear;
	background: linear-gradient(180deg, red, orange, yellow, darkcyan, purple, violet);
	background-clip: text;
	color: transparent;
	font-weight: 900;
}

.wavy span:nth-of-type(2) { animation-delay: 100ms; }
.wavy span:nth-of-type(3) { animation-delay: 200ms; }
.wavy span:nth-of-type(4) { animation-delay: 300ms; }
.wavy span:nth-of-type(5) { animation-delay: 400ms; }
.wavy span:nth-of-type(6) { animation-delay: 500ms; }
.wavy span:nth-of-type(7) { animation-delay: 600ms; }
.wavy span:nth-of-type(8) { animation-delay: 700ms; }
.wavy span:nth-of-type(9) { animation-delay: 800ms; }
.wavy span:nth-of-type(10) { animation-delay: 900ms; }
.wavy span:nth-of-type(11) { animation-delay: 1000ms; }
.wavy span:nth-of-type(12) { animation-delay: 1100ms; }
.wavy span:nth-of-type(13) { animation-delay: 1200ms; }
.wavy span:nth-of-type(14) { animation-delay: 1300ms; }
.wavy span:nth-of-type(15) { animation-delay: 1400ms; }
.wavy span:nth-of-type(16) { animation-delay: 1500ms; }
.wavy span:nth-of-type(17) { animation-delay: 1600ms; }
.wavy span:nth-of-type(18) { animation-delay: 1700ms; }
.wavy span:nth-of-type(19) { animation-delay: 1800ms; }
.wavy span:nth-of-type(20) { animation-delay: 1900ms; }
.wavy span:nth-of-type(21) { animation-delay: 2000ms; }
.wavy span:nth-of-type(22) { animation-delay: 2100ms; }
.wavy span:nth-of-type(23) { animation-delay: 2200ms; }
.wavy span:nth-of-type(24) { animation-delay: 2300ms; }
.wavy span:nth-of-type(25) { animation-delay: 2400ms; }
.wavy span:nth-of-type(26) { animation-delay: 2500ms; }
.wavy span:nth-of-type(27) { animation-delay: 2600ms; }
.wavy span:nth-of-type(28) { animation-delay: 2700ms; }
.wavy span:nth-of-type(29) { animation-delay: 2800ms; }

@keyframes wavy {
    from {
        transform: translateY(-15px);
    }
    50% {
        transform: translateY(0);
    }
    to {
        transform: translateY(-15px);
    }
}



ul {
	list-style-type: none;
}

li {
	display: flex;
	align-items: center;
	line-height: .2;
}

li::before {
	content: url("star.gif");
	padding-top: 10px;
}

.site {
	text-align: center;
	margin-top: 50px;
	margin-left: auto;
	margin-right: auto;
	width: 420px;
	
	figure {
		display: flex;
		align-items: center;
		margin-left: auto;
		margin-right: auto;
		width: 420px;
		margin-bottom: 0;
		gap: 10px;
	}
}

.buttons {
	overflow: hidden;
}

.buttons span {
	animation-duration: 30s;
	animation-iteration-count: infinite;
	animation-name: marquee;
	animation-timing-function: linear;
	width: max-content;	
	will-change: transform;
	display: inline-block;
	padding-left: 100%;
}

@keyframes marquee {
	0% {transform: translateX(0);}
	100% {transform: translateX(-100%);}
}

.buttons span:hover {
	animation-play-state: paused
}