@media (min-width: 1296px) {

  body {
  
		column-count: 4;
  
  }
  
}

@media (max-width: 1296px) {

  body {
  
		column-count: 3;
  
  }
  
}

@media (max-width: 972px) {

  body {
  
		column-count: 2;
  
  }
  
}

@media (max-width: 648px) {

  body {
  
		column-count: 1;
  
  }
  
}



:root {

	--primary_color: #038;
    	--primary_color2: #012;
	--secondary_color: #ffffff;	
	--accent_color: #0F0F0F;
	--text_color: #ffccff;
	--background_color: #dddddd;


}


#multimeter, #lauftext {

    position: absolute;
    top:0;
    left:0;

	margin:0;
	padding:0;
	width: 100vw;
	height: 100vh;

	z-index: 2;
}

#graph {

    position: fixed;
    top:0;
    left:0;

	background-color: var(--background_color);

	margin:0;
	padding:0;
	width: 100%;
	height: 100%;
	
	opacity: 0;
	
	transition: opacity 500ms;
	
	z-index: 1;

}


.pointer {

	color: var(--secondary_color);

     cursor:pointer;

}


body {

    background-color: var(--background_color);

	font-family: Helvetica;

	text-align: center;
	
	color: var(--text_color);

	break-inside: avoid;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	overscroll-behavior: none;
}


#multimeter>div, #lauftext>div {

	vertical-align: top;

    word-wrap: break-word;

	padding: 16px 0 16px 0;
	margin: 0 12px 0 12px;
	margin-top: 16px;
	margin-bottom: 16px;
	
	border-radius: 32px;
	
    background-image: linear-gradient(to bottom, var(--primary_color), var(--primary_color2));
		
	border-style: solid;
	border-width: 4px;
	
	border-color: var(--accent_color);

	display: inline-block;

	width: 300px;

	box-shadow: 5px 10px 15px var(--accent_color),
				5px 10px 25px var(--accent_color);

}


#multimeter>div>p, #lauftext>div>p {

	color: var(--text_color);
	font-size: 1.5em;

}


.data {

	color: var(--secondary_color);
	font-weight: bold;
	font-size: 1.5em;
	font-family: Helvetica;
	
	vertical-align: middle;

}

.unit {
	vertical-align: middle;
	margin-left: 6px;
	font-weight: normal;
	font-size: 1.0em;

}


a {

	text-decoration: none;
	
	color: var(--secondary_color);
	
	font-weight: bold;

}




table {

	margin:auto;

}


button {
	
	border-color: var(--accent_color);
	
	border-style: solid;
		
	color: black;
	
	font-size: 1.3em;
	
	background-color: white;

	border-radius: 16px;
	padding: 16px;
	margin: 16px;
	min-width: 160px;

}

input, select {

	background-color: white;
	border-style: solid;
	border-color: var(--accent_color);
	margin:0.5em; padding: 0.5em;
	color: black;

}


td {

	padding: 0.8em;
	padding-top: 1.3em;
	padding-bottom: 1.3em;
	text-align: center;

}

th {

	font-weight: normal;

}


.date {

	font-size: small;

}


#colors {

	display: none;

}

polygon {

	fill: var(--secondary_color);
	stroke: var(--accent_color);
	stroke-width:1;

}

svg {

	margin-top: 5px;

}



.foot {

	margin-top: 1em;
	font-size: small;

}