:root{
	--kreis-Dim: 17.5vh;
}

html, body{
	background: #f5f5dc;
	font-family:Verdana;
	margin:0;
}

	#main-container{
		position:fixed;
		width:auto;
		bottom:0;
		left: calc(50vw - ((var(--kreis-Dim)*3*2.1)/2));
		transform:rotate(180deg);
	}

		.zehnerUndEinerContainer{
			height:auto;
			width:calc(var(--kreis-Dim) * 2.1);
			float:left;
			text-align:center;
		}

			.kreisContainer{
				width:50%;
				float:left;
				height:auto;
				text-align:center;
			}

				.kreis{
					width:var(--kreis-Dim);
					height:var(--kreis-Dim);
					margin-top:20px;
					margin-left:calc(50% - (var(--kreis-Dim)/2));
					background:grey;
					border-radius:100%;
				}
	
	#footer{
		position:fixed;
		left:0;
		bottom:0;
		font-size:12px;
		text-align:left;
		z-index:5;
		background:white;
	}

@media screen and (min-height: 90vw) {
	/* The height is greater than the width */

	:root{
		--kreis-Dim: 15vw;
	}
}