/* styles.css */

@keyframes color-change {
	0% { color: red; }
	50% { color: blue; }
	100% { color: red; }
}

@keyframes up-down {
	0% { transform: translateY(200px); }
	100% { transform: translateY(100%); }
}

@keyframes left-right {
	0% { transform: translateX(200px); }
	100% { transform: translateX(100%); }
}

html, body {
	font-family: 'Roboto', sans-serif;
	height: 100%;
	max-height: 100vh;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#center_text {
	font-size: 72px;
	color: white;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;  
	animation: color-change 1s infinite;
}

img {
	position: absolute;
	left: 0;
	top: 0;
	width: fixed 200px; /* This should be 'width: 200px;' */
	height: fixed 200px; /* This should be 'height: 200px;' */
	clip-path: circle(35% at 50% 50%);
}

#freek {
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	animation: up-down 1.56s linear infinite alternate;
}

#container {
	width: 100%;
	height: 100%;
	overflow: visible;
	position: absolute;
	right: 200px;
	bottom: 200px;
}

#leftrighter {
	position: absolute;
	width: 100vw;
	height: 100vh;
	top: 0;
	overflow: visible;
	animation: left-right 6.04s linear infinite alternate;
}

#credits {
	font-size: 12px;
	color: whitesmoke;
	position: absolute;
	bottom: 22px;
	left: 10px;
}
#timer {
	font-size: 12px;
	color: whitesmoke;
	position: absolute;
	bottom: 22px;
	right: 10px;
}
#clickCountDisplay {
	font-size: 12px;
	color: whitesmoke;
	position: absolute;
	top: 10px;
	left: 10px;
}