:root
{
	--choice_bg: #847e87;
	--hover_gray: #38373b;
	--grid_background: #847e8790;
	--choice_border: #444444;
    --checked_bg: #4b3861;
}

html
{
	background-image: url(../img/background.jpg);
	background-repeat: repeat-y;
	background-size: cover;
}

body
{
    color: white;
	font-size: 100%;
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	min-height: 95vh;
	max-height: 95vh;
	display: flex;
	flex-direction: column;

	/* background-color: black; */
}

/* .space_background
{
    position: fixed;
    top: 50%;
    left: 50%;
    height: 1px;
    width: 1px;
    background-color: white;
    border-radius: 50%;
    box-shadow: -10vw 29vh 3px 0px white,-1vw 23vh 1px 0px #ffd1fa,-42vw -25vh 3px 1px #f0ffd1,19vw -24vh 0px 3px white,-39vw 33vh 0px 1px #ffd1fa,-10vw -33vh 3px 2px white,-22vw -24vh 0px 2px white,-3vw -28vh 0px 3px white,26vw -41vh 1px 3px #d1ffdb,21vw 38vh 2px 1px #f0ffd1,-34vw -47vh 0px 3px white,-21vw 37vh 2px 0px #ffd1fa,26vw 18vh 3px 0px white,4vw 48vh 2px 1px #ffd1fa,42vw 21vh 2px 2px #ffd1fa,34vw 35vh 2px 1px white,-22vw 4vh 0px 3px white,-1vw 19vh 1px 3px #ffd1fa,11vw -15vh 0px 3px #ebd1ff,30vw 49vh 0px 1px #ffd1fa,29vw 42vh 3px 1px white,-29vw 14vh 0px 1px #fff4b5,9vw -40vh 1px 3px #f0ffd1,-37vw 9vh 2px 3px #ebd1ff,11vw -13vh 3px 3px #ffd5d1,-2vw -27vh 2px 3px #fff4b5,-48vw 39vh 3px 2px #fff4b5,35vw -19vh 1px 1px white,-43vw 50vh 0px 0px #fff4b5,-49vw -42vh 0px 1px white,-43vw -45vh 1px 2px #ebd1ff,-26vw 46vh 1px 2px white,27vw -14vh 1px 2px #fff4b5,37vw 33vh 2px 2px #fff4b5,8vw -12vh 2px 3px #d1f4ff,-5vw 13vh 3px 3px white,28vw -13vh 1px 1px #ffd1fa,44vw -40vh 2px 3px white,-33vw -44vh 2px 2px white,-37vw 45vh 2px 3px white,50vw -18vh 1px 0px #f0ffd1,-48vw -49vh 0px 2px #ffd5d1,30vw 21vh 0px 1px white,23vw -26vh 0px 3px white,49vw -44vh 1px 3px #d1f4ff,29vw -13vh 1px 1px #ebd1ff,38vw 37vh 1px 0px white,46vw -12vh 0px 1px white,18vw -4vh 0px 3px white,-39vw -27vh 0px 0px white,49vw -34vh 2px 1px #fff4b5,-16vw 30vh 1px 0px #fff4b5,45vw -19vh 2px 0px white,34vw 10vh 3px 2px #ffd5d1,-16vw -7vh 1px 0px white,4vw -9vh 2px 0px white,-13vw 27vh 2px 0px white,-9vw -20vh 3px 3px #ffd5d1,38vw -39vh 3px 2px #d1f4ff,39vw 36vh 0px 2px #ffd5d1,2vw -40vh 2px 3px #f0ffd1,5vw 8vh 1px 2px white,10vw -38vh 3px 3px white,-12vw -23vh 2px 0px #f0ffd1,22vw -36vh 2px 3px #f0ffd1,10vw 5vh 2px 2px #f0ffd1,-3vw -38vh 3px 1px #d1f4ff,-17vw -29vh 1px 0px #ffd1fa,26vw -32vh 0px 0px white,37vw -41vh 2px 2px white,1vw 25vh 2px 2px white,-10vw -37vh 1px 0px #d1f4ff,-19vw -27vh 3px 2px #ebd1ff,-12vw -14vh 2px 3px white,44vw 33vh 1px 1px #d1f4ff,15vw 3vh 3px 0px white,-50vw 0vh 1px 0px white,11vw -45vh 1px 1px #f0ffd1,22vw -39vh 0px 2px white,49vw 40vh 1px 1px white,-4vw -44vh 0px 3px white,-29vw 0vh 1px 1px #ffd5d1,-29vw 38vh 0px 1px white,27vw 38vh 1px 1px white,31vw 29vh 1px 3px white,32vw -41vh 2px 3px white,-5vw 30vh 0px 1px #d1f4ff,12vw 31vh 2px 0px #ebd1ff,-17vw 35vh 2px 2px white,10vw -39vh 3px 0px #d1ffdb,0vw 16vh 3px 0px white,10vw 41vh 0px 0px #d1f4ff,-20vw 15vh 1px 0px white,-6vw 25vh 2px 3px #d1f4ff,-43vw 43vh 2px 1px white,-23vw 14vh 2px 3px #ebd1ff,28vw 10vh 3px 2px white,8vw 48vh 1px 2px #ebd1ff,25vw -1vh 1px 1px #ffd1fa,-40vw -49vh 0px 1px #fff4b5;
    animation: zoom 90s alternate infinite;
} */


/* @keyframes zoom
{
    0%
    {
        transform: scale(1);
    }
    100%
    {
        transform: scale(1.5);
    }
} */

.text_block {
	width: 80%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: max(3vw, 20px);
	top: 5%;
	text-align: center;
}


.text_block2 {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: max(3vw, 25px);
	margin-top: 20px;
}

.start {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	margin-top: 10vh;
	max-width: 1200px;
	margin: auto;
}

@media (max-width: 700px) {
	.text_block {
		width: 70%;
		top: 10%;
	}

	.start {
		margin-top: max(10vh, 150px);
	}

	#img_new_row {
		flex-basis: 100%;
		height: 0;
	}
}

#score {
	display: flex;
	justify-content: center;
	align-items: center;
}

img
{
	width: 100%;
	max-height: auto;
	transition: transform .3s ease;
    z-index: 1;
    margin-bottom: 5px;
}

@media (hover: hover) {
	img:hover
	{
		filter: opacity(80%);
		transform: scale(105%);
		z-index: 0;
	}
}

a
{
    color: white;
    text-decoration: none;
}

a:visited
{
    color: white;
    text-decoration: none;
}

#select_quiz {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-evenly;
	height: 95vh;
}

.set_choice {
	border-radius: 10%;
	width: 100%;
	min-width: 114px;
	/* max-width: 100%; */
	height: auto;
	/* justify-content: center; */
}

#active_set {
	border: 3px solid #00ff80;
 	border-radius: 10%;
  	box-shadow: 
    0 0 5px #00ff80,
    0 0 10px #00ff80,
    0 0 20px #00ff80,
    0 0 40px #00ff80;
  	transition: 0.3s ease;
}

#img_new_row {
	display: none;
}

@media (max-width: 700px) {
	#select_quiz {
		display: grid;
		grid-template-columns: 45% 45%;
		/* flex-wrap: wrap; */
		max-height: 70vh;
		margin-top: 10vh;
	}

	#select_quiz a {
		display: block;
	}

	figure {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center; /* sorgt dafür, dass die Beschriftung zentriert ist */
	}

	.set_choice {
		width: 45%; 
		padding: 10px; 
		border-radius: 20%;
	}

	.set_choice img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}

	#img_new_row {
		flex-basis: 100%;
		height: 0;
	}
}

figcaption {
	background: rgba(0,0,0,0);
	text-align: center;
	color: white;
	font-size: max(2vw, 20px);
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

span
{
    float: left;
    width: 100%;
    z-index: 1;
}

#scoreButton
{
    width: 240px;
    height: 80px;
    font-size: 25px;
    background-color: var(--hover_gray);
    color: white;
    border: 2px solid white;
	border-radius: 5px;
}

#scoreButton:hover
{
	background-color: var(--checked_bg);
}

/* footer {
	margin-top: auto;	
	font-size: max(0.5vw, 12px);
	color: rgb(148, 144, 144);
	position: relative;
	bottom: 0;
	left: 37.5%;
	transform: translateX(-25%);
	background-color:rgba(0, 0, 0, 0.5);
	z-index: -1;
} */

footer {
    position: fixed; /* Fixiert den Footer am unteren Rand des Viewports */
    bottom: 0; /* Sorgt dafür, dass der Footer immer am unteren Rand bleibt */
    left: 0; /* Positioniert den Footer am linken Rand */
    width: 100%; /* Setzt die Breite des Footers auf die gesamte Viewport-Breite */
    font-size: max(0.5vw, 12px);
    color: rgb(148, 144, 144);
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -1; /* Stellt sicher, dass der Footer nicht unter den anderen Inhalten liegt */
    text-align: center; /* Zentriert den Text im Footer */
    padding: 10px 0; /* Fügt etwas Abstand oben und unten hinzu */
}

@media (max-width: 700px) {
	footer{
		display: flex;
		justify-content: center;
	}
}

/* @media (max-width: 400px) {
	#select_quiz {
		display: flex;
		flex-wrap: wrap;
		max-height: 100%;
		margin-top: 10vh;
		justify-content: space-evenly;
		font-size: max(1vw, 15px);
	}

	.set_choice {
		width: 80%;
		max-width: 30vw;
		box-sizing: border-box; 
	}

	#img_new_row {
		flex-basis: 100%;
		height: 0;
	}
} */