body {
	margin: 0px 0px 0px 0px;
	font-family: Arial;
	background-color: white;
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: black;
		color: greenyellow;
	}
}

#field {
    background-color: transparent;
    float: left;
    height: 100vh;
    width: 100vw;
    margin: 0px 0px 0px 0px;
    overflow: hidden;
}

#header {
    padding: 2vw 2vw 2vw 1vw;
    color: orange;
    height: fit-content;
    width: 100%;
    font-weight: bold;
    display: inline-block;
    position: relative;
}

#filter {
	display: block;
	margin: 3vw auto 3vw auto;
	padding: 1vw 1vw 1vw 1vw;
}
 	#filter input {
		background-color: white;
		font-size: 5vw;
	}
	#filter input[type=text] {
		font-weight: 600;
		border-style: solid;
		border-width: 0.5vw;
		border-color: orange;
		width: inherit;
	}
	#filter input[type=button] {
		border-style: none;
		position: absolute;
		top: 1.4vw;
		right: 1.4vw;
		background: transparent;
		color:  red;
		font-size: 4.7vw;
	}

.logo {
    display: inline-block;
    float: left;
}

.logo img {
    width: 100%;
}

.error input {
	width: 35vw;
	font-size: 4vw;
	background-color: ghostwhite;
	margin-top: 3vw;
	padding: 1vw;
	margin: 1vw;
}

#progress {
	font-size: 3vw;
	color: orange;
	text-align: center;
	margin: 1vh;
}


@media screen and (orientation:portrait) {
    #header {
        width: 100vw;
		height: 6vh;
    }
		#header .logo {
			width: 13vw;
			padding-right: 1vw;
		}
		#header .text {
			font-size: 6vw;
		}

	#content {
		display: flex;
		overflow-y: scroll;
		flex-direction: column;
		font-size: 15vw;
		height: 80vh;
	}

		#content .truck {
			display: inline-flex;
			flex-flow: row nowrap;
			justify-content: center;
			margin: 1vw 1vw 1vw 1vw;
			font-weight: 600;
		}

		#content .cell {
			overflow: hidden;
			color: white;
			width: 82vw;
			padding: 1vw 1vw 1vw 1vw;
		}

		#content .scale {
			padding-left: 1vw;
			width: 8vw;
			padding: 1vw 0vw 1vw 1vw;
		}

	#filter {
	    width: 50vw;
	    margin: 3vw auto 3vw auto;
	    padding: 1vw 1vw 1vw 1vw;
	}
	    #filter input {
			font-size: 8vw;
	    }
		
		#content .share {
			font-size: 4vw;
			text-align: center;
			margin: 5vw;			
		}
			.share img {
				width: 100%;
			}
	.error input {
		font-size: 6vw;
	}
}

@media screen and (orientation:landscape) {
	#header {
		width: 56vw;
	}

	#content {
		display: flex;
		overflow-y: auto;
		flex-direction: row;
		font-size: 13vh;
		flex-wrap: wrap;
		justify-content: center;
		max-height: 65vh;
	}

		#content > div {
			/*max-width: 33vw;*/
			max-block-size:fit-content;
			display: inline-flex;
			flex-flow: row nowrap;
			justify-content: center;
			margin: 1vw 1vw 1vw 1vw;
			font-weight: 600;
		}

		#content .cell {
			overflow: hidden;
			color: white;
			width: 82vh;
			padding: 1vw 1vw 1vw 1vw;
		}

		#content .scale {
			padding-left: 1vh;
			width: 8vh;
			padding: 1vw 0vw 1vw 1vw;
		}

	.logo {
		width: 9vw;
		padding-right: 1vw;
	}

	.text {
		font-size: 4vw;
	}

	#filter {
		width: 35vw;
		margin: 2.2vw 1vw 1vw 1vw;
		padding: 1vw 1vw 1vw 1vw;
		display: inline-block;
		vertical-align: top;
	}

	#content .share {
		display: none;
	}

	#content .error input {
		font-size: 4vw;
	}
}
#content .cell.c1 { background-color: darkgreen; }
#content .cell.c2 { background-color: darkblue; }
#content .cell.c3 {	background-color: darkred; }
#content .cell.n1 {	background-color: greenyellow; color: black; }

.error {
    background-color: red;
    width: 80vw;
    margin: 3vw auto 3vw auto;
    padding: 5vw 5vw 5vw 5vw;
    text-align: center;
    color: white;
    font-size: 4vw;
    font-weight: 600;
    border-radius: 3vw;
}