/*
 * (c) 2023 by Prince - prins1032@gmail.com
 */

:root {
  --grey-lite: #2e3135;
  --grey-dark: #212429;
  --white: #f0f0f0;
  --corner-radius: 16px;
}

* {
  border: none;
  font-family: 'Roboto', sans-serif;
}

*:not(dialog) {
  margin: 0;
}

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--white);
}


main{

	background: var(--grey-dark);
	width: 90vw;
	height: 90vh;
	border-radius: 32px;
	overflow: hidden;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;


	>header{
		background: var(--grey-lite);
		height: 56px;
		padding: 0 24px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: var(--white);

		& h4{
		font-size: 13px;
		}

		& nav{

		height: inherit;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 24px;

		& a{
			width: 36px;
			height: 36px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			overflow: hidden;
			border-radius: 50%;
			transition: all 150ms linear;

			&:hover{
			background-color: #ffffff2a;
			}

			& svg{
			width: 28px;
			height: 28px;
			}

		}

		}

	}

	>div{

		padding: 24px;
		height: calc(100% - 56px);
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(2, 1fr);
		gap: 24px;
		box-sizing: border-box;

		>section{
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 7px;

			& h3{
				color: var(--white);
				font-size: 12px;
			}

			& div{
				background: var(--grey-lite);
				flex: 1;
				border-radius: var(--corner-radius);
				overflow: hidden;
				padding: 7px;

				>canvas{
					width: 100%;
					height: 100%;
				}

			}

			&.container--map{
				grid-column: 1 / 3;

				>div{
					background: url("map.jpg") no-repeat center;
					background-size: cover;
				}
			}

		}




	}


}

.text--stats{
	color: var(--white);
	font-size: 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;

	& span{
		font-weight: bold;
	}

}