/* Define Vaiables for consistent styling here */
:root {
	--tum-blue-brand				: #3070B3;
	--tum-blue-dark					: #072140;
	--tum-blue-dark-1				: #0A2D57;
	--tum-blue-dark-2				: #0E396E;
	--tum-blue-dark-3				: #114584;
	--tum-blue-dark-4				: #14519A;
	--tum-blue-dark-5				: #165DB1;
	--tum-blue-light				: #5E94D4;
	--tum-blue-light-dark		: #9ABCE4;
	--tum-blue-light-2			: #C2D7EF;
	--tum-blue-light-3			: #D7E4F4;
	--tum-blue-light-4			: #E3EEFA;
	--tum-blue-light-5			: #F0F5FA;
	--tum-yellow						: #FED702;
	--tum-yellow-dark				: #CBAB01;
	--tum-yellow-1					: #FEDE34;
	--tum-yellow-2					: #FEE667;
	--tum-yellow-3					: #FEEE9A;
	--tum-yellow-4					: #FEF6CD;
	--tum-orange						: #F7811E;
	--tum-orange-dark				: #D99208;
	--tum-orange-1					: #F9BF4E;
	--tum-orange-2					: #FAD080;
	--tum-orange-3					: #FCE2B0;
	--tum-orange-4					: #FEF4E1;
	--tum-pink							: #B55CA5;
	--tum-pink-dark					: #9B468D;
	--tum-pink-1						: #C680BB;
	--tum-pink-2						: #D6A4CE;
	--tum-pink-3						: #E6C7E1;
	--tum-pink-4						: #F6EAF4;
	--tum-blue-bright				: #8F81EA;
	--tum-blue-bright-dark	: #6955E2;
	--tum-blue-bright-1			: #B6ACF1;
	--tum-blue-bright-2			: #C9C2F5;
	--tum-blue-bright-3			: #DCD8F9;
	--tum-blue-bright-4			: #EFEDFC;
	--tum-red								: #EA7237;
	--tum-red-dark					: #D95117;
	--tum-red-1							: #EF9067;
	--tum-red-2							: #F3B295;
	--tum-red-3							: #F6C2AC;
	--tum-red-4							: #FBEADA;
	--tum-green							: #9FBA36;
	--tum-green-dark				: #7D922A;
	--tum-green-1						: #B6CE55;
	--tum-green-2						: #C7D97D;
	--tum-green-3						: #D8E5A4;
	--tum-green-4						: #E9F1CB;
	--tum-grey-1						: #20252A;
	--tum-grey-2						: #333A41;
	--tum-grey-3						: #475058;
	--tum-grey-4						: #6A757E;
	--tum-grey-7						: #DDE2E6;
	--tum-grey-8						: #EBECEF;
	--tum-grey-9						: #FBF9FA;
	--tum-white							: #FFFFFF;

	--background						: #121416;
	--accent								: var(--tum-blue-dark-3);
	--highlight							: var(--tum-blue-light);
	--error									: #ee1111;
}
body {
	font-family: sans-serif;
	text-align: center;
	background-color: var(--background);
	color: var(--highlight);
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
	overflow-x: hidden;
}
p {
	color: white;
}
h1,h2,h3,h4,h5,h6 {
  color: var(--highlight);
}
a {
		color: var(--tum-blue-light);
}
a:visited {
		color: var(--tum-blue-bright);
}
button {
  cursor: pointer;
}
.scroll-enabled {
	overflow: auto;
	padding-bottom: 5rem;
}

header {
  background: var(--accent);
  color: white;
	max-width: 100%;
  padding: 0.4rem;
  display: flex;
  flex-wrap: wrap;
	align-items: center;
	position: relative;
}
.hamburger {
	display: none;
  font-size: 1.5rem;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}
.right {
  margin-left: auto;
}
@media (orientation: portrait) {
  header {
		align-items: center;
	}
  .hamburger {
    display: block;
    margin-left: auto;
  }
  .right {
    display: none;
    flex-direction: column;
    width: 100%;
    margin-top: 0.5rem;
  }
  .right.show {
		display:flex;
	}
}
.btn, .btn:visited {
		--idle-color: white;
		--idle-text-color: var(--accent);
		--hover-color: var(--accent);
		--hover-text-color: white;
		background-color: var(--idle-color);
		color: var(--idle-text-color);
		padding: 0.3rem 0.8rem;
		margin: 0 0.25rem;
		text-decoration: none;
		border-radius: 20px;
		display: inline-block;
		transition: transform 0.5s, background-color 0.05s ease, color 0.05s ease, border 0.05s ease;
		transparency: 0.5;
}
.btn:hover {
		background-color: var(--hover-color);
		color: var(--hover-text-color);
}
.home, .home:visited {
	color: white;
	font-size: 1.5rem;
  text-decoration: none;
}
.center {
  display: flex;
	flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  box-sizing: border-box;
	padding: 1.5rem;
}
.error {
	color: var(--error);
  justify-content: center;
	display: flex;
	padding: 5px;
	margin: 5px;
	font-size: 1.1em;
	border: 1px solid var(--error);
	border-radius: 5px;
}
.info {
	color: var(--accent);
  justify-content: center;
	display: flex;
	padding: 5px;
	margin: 5px;
	font-size: 1.1em;
	border: 1px solid var(--accent);
	border-radius: 5px;
	animation:
		fadeOut 2s 4s forwards,
		hide 0s 4s forwards;
}
@keyframes fadeOut {
  to {
    opacity: 0;
  }
}
@keyframes hide {
  to {
    display: none;
  }
}

form {
	padding: 10px;
	outline: 2px solid var(--accent);
	border-radius: 5px;
	outline-offset: 4px;
	text-align: center;
}
@media (orientation: portrait) {
  form {
    padding: 2px;
    outline-offset: 2px;
  }
}
.form-decent {
	padding: 0px;
	outline: 0px;
	border-radius: 0px;
	outline-offset: 0px;
}
input, textarea, button, select {
	color: white;
	padding: 5px;
	margin: 5px;
	font-size: 1.1em;
	background-color: var(--background);
	border: 1px solid var(--accent);
	border-radius: 5px;
}
input.disabled {
  pointer-events: none;
  opacity: 0.5;
}
input:hover .btn:hover {
	border-color: var(--highlight) 
}
input[type="submit"] {
	cursor: pointer;
}
input[type="submit"]:disabled {
	border-color: var(--error);
	cursor: not-allowed;
}
.nav-bar {
  display: flex;
  background-color: var(--background);
	align-items: center;
  padding: 0.5rem;
  justify-content: center;
}
.page-select-bar {
	display: flex;
	align-items: center;
}
.page-select-bar p,
.page-select-bar a {
  font-size: 1.3em;
	padding: 8px;
}
table {
  border-collapse: collapse;
	color: white;
  width: 60%;
  margin: 20px 0;
  font-family: Arial, sans-serif;
}
th, td {
  padding: 8px;
  text-align: left;
}
th {
  cursor: pointer;
  position: relative;
}
tr:nth-child(even) {
		background-color: #303030; 
}

tr:nth-child(odd) {
		background-color: #202020;
}
th {
		background-color: #101010;
}
th:hover {
}
th::after {
	content: "";
	position: absolute;
  right: 8px;
  color: #aaa;
}
th.asc::after {
  content: "▲";
} 
th.desc::after {
  content: "▼";
}

/* Index Page */
.carousel {
  position: relative;
  width: 100%;
	aspect-ratio: 32/9;
  display: flex;
  justify-content: center;
	margin-top: 2rem;
  overflow: hidden;
}
.card {
  position: absolute;
  width: 40%;
  aspect-ratio: 16 / 10;
  transition: transform 0.5s, z-index 0.25s;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	align-items: center;
}
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
	cursor: pointer;
}
.card h2 {
	position: absolute;
	top: 70%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 2vw;
	font-weight: bold;
	text-shadow: 3px 3px 5px rgba(0,0,0,0.7);
	z-index: 1;
}
@media (max-width: 600px) {
  .carousel {
    aspect-ratio: 24/9;
  }
  .card {
    width: 60%;
  }
	.card h2 {
		top: 60%;
		font-size: 4vw;
	}
}
.cleft {
  transform: translateX(-70%) scale(0.8);
  z-index: 1;
}
.ccenter {
  transform: translateX(0) scale(1);
  z-index: 2;
}
.cright {
  transform: translateX(70%) scale(0.8);
  z-index: 1;
}
img#disabled {
	filter: grayscale(100%);
}
progress {
	width: min(50vh, 80%);
	heigth: 30px;
	border-radius: 5px;
	background-color: var(--background);
	border: 1px solid var(--accent);
}
#spanprogress {
  height: 100%;
  display: block;
  width: 0;
  color: white;
  line-height: 30px;
  position: absolute;
  text-align: end;
  padding-right: 5px;
}

/* Photo View CSS */
.game-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 5vh;
}
#photoContainer {
	width: 100%;
	height: 90vh;
	overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (orientation: portrait) {
	#photoContainer {
		height: 45vh;
	}
}
.image-wrapper {
  position: absolute;
  cursor: grab;
}
#photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
	user-drag: none;
}

/* Map CSS */
#mapEmbed {
	width: 100vw;
	height: 65vh;
	margin-bottom: 1em;
}
@media (orientation: portrait) {
  #mapEmbed {
    height: 45vh;
  }
}
/* Do styling based on landscape/portrait modes using CSS media queries */
#mapContainer {
	position: fixed;
	bottom: 20px;
	right: 20px;
	height: 30%;
	max-width: 40%;
	aspect-ratio: 4 / 3;
	z-index: 999;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	cursor: crosshair;
	opacity: 0.4;

	transition: all 0.1s ease;
}

#resultMapContainer {
	height: 60vh;
	max-width: 80%;
	aspect-ratio: 4/3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	padding: 1rem;
}

@media (orientation: landscape) {
	#mapContainer:hover {
		height: 80%;
		max-width: 80%;
		aspect-ratio: 4 / 3;
		opacity: 1.0;
	}
}
@media (orientation: portrait) {
	#mapContainer {
		bottom: 0px;
		right: 0px;
		width: 100%;
		max-width: 100%;
		height: 45%;
		opacity: 1.0;
	}
}
#map {
	width: 100%;
	height: 100%;
}
#mapContainer #map {
	cursor: crosshair;
}
#mapEmbed #map {
  cursor: crosshair;
}
#mapContainer .leaflet-marker-icon {
  cursor: crosshair;
}
#guessButton {
	color: white;
  background-color: var(--accent);
	width: 100%;
	height: 10%;
	font-size: 16px;
	cursor: pointer;
}
#guessButton:disabled {
	background-color: grey;
	border-color: grey;
	cursor: default;
}
.clickMeButton {
	color: white;
  background-color: var(--accent);
	width: 100%;
	height: 10%;
	font-size: 16px;
	cursor: pointer;
}
.clickMeButton:disabled {
	background-color: grey;
	cursor: default;
}
.flagIcon {
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M5 4.797c1.517-.312 2.67-.33 3.626-.211c1.119.14 2.018.473 3.023.85l.03.012c.987.37 2.08.78 3.447.95c1.104.139 2.355.118 3.874-.158v8.963c-1.517.312-2.67.33-3.626.211c-1.119-.14-2.018-.473-3.023-.85l-.03-.012c-.987-.37-2.08-.78-3.447-.95c-1.104-.139-2.355-.118-3.874.158zm14.758-.767c-1.9.475-3.275.523-4.384.384c-1.119-.14-2.018-.473-3.023-.85l-.03-.012c-.987-.37-2.08-.78-3.447-.95c-1.387-.174-3.006-.098-5.096.423A1 1 0 0 0 3 4v17a1 1 0 1 0 2 0v-5.203c1.517-.312 2.67-.33 3.626-.211c1.119.14 2.018.473 3.023.85l.03.012c.987.37 2.08.78 3.447.95c1.391.174 3.017.097 5.117-.428A1 1 0 0 0 21 16V5a1 1 0 0 0-1.242-.97' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
#reportButton {
	position: absolute;
	left: 1rem;
}
#roundCounter {
	position: absolute;
	right: 1rem;
}
#timer {
	position: absolute;
}

/* Result Animation */
.distance {
  color: var(--accent);
  font-size: 1.5rem;
  margin-top: 10px;
  text-align: center;
}
.score {
  display: flex;
  color: var(--accent);
  font-size: 1.5rem;
  margin-bottom: 10px;
  text-align: center;
}