@charset "UTF-8";
:root {
	--main-blue: #00008b;
	--main-green: #008b00;

	--row-gray: #bbbbbb; 
	--row-green: #bbeebb;
	--row-blue: #bbbbee;
}

@media screen and (min-width: 800px) {
	* {
		font-size: 1.2rem;
		color: black;
	}
	table caption {
		color: white;
		background-color: var(--main-green);
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
	}
	table {
		border: 3px solid var(--main-green);
		border-radius: 10px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}
	table tr:nth-child(even) {
		background-color:	var(--row-green);
	}
	table tr:last-child {
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}
	header {
		border: 3px solid var(--main-green);
		border-radius: 10px;
	}
}
@media screen and (max-width: 799px) {
	* {
		font-size: 1.4rem;
	}
	table caption {
		color: white;
		background-color: var(--main-blue);
	}
	table {
		border: 3px solid var(--main-blue);
	}
	table tr:nth-child(even) {
		background-color:	var(--row-blue);
	}
	header {
		border: none;
	}
	img {
		width: auto;
		height: auto;
		max-width: 75%;
	}
}

body {
	background-color:		white;
	font-family:			sans-serif;
	margin:			    	50px auto;
	padding: 1rem;
}

header {
	font-size: 150%;
	margin-left: auto;
	margin-right: auto;
	padding: 1rem;
	width: 35%;
}

h1 {
	font-size 2rem;
}
table {
	margin-left: auto;
	margin-right: auto;
}

header, h1 {
	white-space: nowrap;
}

th {
	font-size:			150%;
	margin-left:			100px;
	padding-left:			333px;
	padding-bottom:			10px;

}
.draggable {
	cursor: 			    move;
}

tr > td {
    border:             none; /*solid 3px lightgray;*/
    margin:		3px;
    margin-right:	0em;
    padding: 		0.2em 0.5em;
    white-space:	nowrap;
}


table { 
	border-collapse: collapse;
	margin: 0.5em auto;
	padding: 0px;
}

table caption {
	padding: 0.5em 0em;
}


.scarlet {
	color: #bb0000;
}

div {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1rem;
	width: 90%;
	display: block;
}


img {
	display: block;
}