:root {
	--main-bg-color: transparent;
	--main-text-color: #322601;
}

[data-theme="dark"] {
	--main-bg-color: transparent;
	--main-text-color: #956C00;
}

* {
	box-sizing: border-box;
	/* 		transition: all ease 0.2s; */
}

body {
	margin: 0;
	height: 100vh;
	overflow: hidden;
	position: relative;
	font-size: 16px;
    background-image: url("../afb/7a.jpg");
    
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	transition: all ease 0.2s;
}

.clock {
	position: fixed;
	/* 5px header + 35px titel-marge + 30px titel + 77px logo + 150px afstand */
	top: calc(55px + 35px + 30px + 25px + 65px);
    #top: calc(5px + 35px + 30px + 70px + 65px);
	left: 50%;
	min-height: 9em;
	min-width: 9em;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgb(0, 0, 0, 40%);
	backdrop-filter: blur(25px) brightness(150%) opacity(100%) contrast(100%) saturate(125%) !important;
	background-image: url("../assets/clock1.png");
	transform: translateX(-50%);
	background-position: center center;
	background-size: cover;
	border-radius: 50%;
	#border-radius: 25%;
    #border-radius: 10%; 
    #border-radius: 5%;
    #border-radius: 0%;
    border: 0px solid var(--main-bg-color);
    box-shadow: 0 -15px 15px rgba(125, 125, 125, 0.15),
    inset 0 -15px 15px rgba(255, 255, 255, 0.0), 0 15px 15px rgba(0, 0, 0, 0.25),
		inset 0 15px 15px rgba(0, 0, 0, 0.1);
	transition: all ease 0.2s;
}
.clock:before {
	content: "";
	height: 0.65rem;
	width: 0.75rem;
	background-color: rgb(24, 34, 69, 75%);
    
	border: 2px solid var(--main-bg-color);
    background-image: url("https://home.iwolk.eu/local/afb/anifun/vogel.gif");

	position: absolute;
	border-radius: 50%;
        border-radius: 50%;
	z-index: 1000;
	transition: all ease 0.2s;
}
.hour {
     background-image: url("https://home.iwolk.eu/local/afb/anifun/vogel.gif");
	position: absolute;
	display: flex;
	justify-content: center;
	border-radius: 40%;
	left: 50%;
	height: 80px;
	width: 50%;
	
	filter: blur(0px) brightness(100%) opacity(100%) contrast(125%) saturate(100%) !important;
	background-position: center center;
	background-size: cover;
	scale: 1.25;
}
.hour:before {
	content: "";
	position: absolute;
	height: 65px;
	width: 5px;
	background-color: rgb(24, 34, 69, 50%);
	border-radius: 5px;

}

.min,
.sec {
	position: absolute;
	display: flex;
	justify-content: center;
	border-radius: 50%;
    

        
}

.min {
	height: 10em;
	width: 10em;
}
.min:before {
	content: "";
	height: 80px;
	width: 5px;
	background-color: rgb(24, 34, 69, 25%);
	border-radius: 2.5px;
}
.sec {
	height: 11em;
	width: 11em;
}
.sec:before {
	content: "";
	height: 50%;
	width: 2px;
	background-color: rgb(24, 34, 69, 55%);
	border-radius: 2px;
}