* {

	font-family: "Noto Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight:600;
	font-style: normal;
	font-variation-settings:
	  "wdth" 100;
}

body{
	width: 100%;
	height: 100%;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

h1{
	color: rgb(0, 0, 0);
	font-weight: 900;
	letter-spacing: 1vw;
	margin-bottom: 0;

	transition: ease-in-out .3s;
}

h4{
	margin: 0;
}

#main{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

#game{
	display: flex;
	flex-direction: column;
	align-items: center;
}

#resultsPanel{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.button{
	color:black;
	font-weight: 700;
	font-size: max(min(3.5vw,20px),12px);
	padding: 30px;
	margin:5px;

	display: flex;
	justify-content: center;
	text-align: center;

	width: 5vw;

	border-style: solid;
	border-width: 5%;
	border-radius: 10%;
	border-color: black;

	transition: ease-in-out .3s	;
}

.button:hover{
	cursor: pointer;
	background-color: rgb(232,75,57);
	color: white;

	transition: ease-in-out .3s;
}

.options{
	width: 5vw;
}

#dateHolder{
	color: black;
	font-weight: 800;
	font-size: 30px;
	display: flex;
	align-items: center;
	justify-content:center;
}


#datesOptions{
	width: fit-content;
	padding-left: auto;
	padding-right: auto;
	display: flex;
	flex-direction: column;
	align-items: center;

}

ul{
	display: flex;
	flex-direction: row;
	margin: 0;
	padding: 0;
}


#resultsText{
	font-size: 30px;
	font-weight: 800;
}


footer{
	font-size: 15px;

	position: absolute;
	bottom: 2px;
}

.link{
	text-decoration: none;
	color: rgb(232,75,57);
}