@font-face { font-family: RustyHooks; src: url('fonts/RustyHooks.ttf'); } 

* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--fg: grey;
	--shade1: #727274;
	--shade2: #cccdd1;
	--shade3: #f3f4f8;
	--shade4: #ffffff;
	--dur1: 1s;
	--dur2: 6s;
	font-size: calc(16px + (32 - 16)*(100vw - 320px)/(2560 - 320));
}
body {
	
	color: var(--fg);
	font: 1em/1.5 Hind, sans-serif;
    font-family: RustyHooks, sans-serif;
    width: 100%;
    height: 100%;
    font-size: 10vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
main {
	margin: auto;
}

.status {
	text-align: center;
}
.status__dot {
	animation: appear1 var(--dur1) var(--dur1) steps(1,start) infinite;
	display: inline-block;
}
.status__dot:nth-child(2) {
	animation: appear2 var(--dur1) var(--dur1) steps(1,start) infinite;
}
.status__dot:nth-child(3) {
	animation: appear3 var(--dur1) var(--dur1) steps(1,start) infinite;
}


/* Animations */

@keyframes appear1 {
	from {
		visibility: hidden;
	}
	33%, to {
		visibility: visible;
	}
}
@keyframes appear2 {
	from, 33% {
		visibility: hidden;
	}
	67%, to {
		visibility: visible;
	}
}
@keyframes appear3 {
	from, 67% {
		visibility: hidden;
	}
	to {
		visibility: visible;
	}
}

.floating-credit {
    position: fixed;
    bottom: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.7); /* Slight transparency */
    color: white;
    font-size: 3.5vw;
    font-family: Arial, sans-serif;
    padding: 6px 10px;
    border-radius: 20px;
    text-decoration: none;
    transition: background 0.3s, opacity 0.3s;
    opacity: 0.4; /* Starts subtle */
  }
  
  .floating-credit:hover {
    background: rgba(0, 0, 0, 0.9);
    opacity: 0.6;
  }