@import "stars.css";

:root
{
	--body-max-width: 900px;
}

body
{
	display: flex;
  flex-direction: column;
  min-height: 100vh;
	max-width: var(--body-max-width);
  margin: auto;
}

header
{
	position: fixed;
  width: -webkit-fill-available;
  max-width: var(--body-max-width);
	background: linear-gradient(180deg, rgb(0 0 0) 0%, #1b7480 100%);
	display: flex;
	justify-content: space-between;
	overflow: auto;
}

header > div
{
	display: flex;
  align-items: center;
  color: white;
}

header > div > strong
{
	font-size: 2em;
  font-family: serif;
	white-space: nowrap;
}

#logo
{
	height: 85px;
	margin: 5px;
}

main
{
	flex-grow: 1;
	display: flex;
  flex-direction: column;
  padding: 0% 2%;
  background: radial-gradient(ellipse at center, #1b2735 10%, #090a0f 100%);
	
	color: lightgray;
  font-size: 1.3em;
	
	margin-top: 85px;
}

main > div:first-child
{
	margin: 15px;
}

main li
{
	margin: 3% 0%;
}

.btn-contener
{
	text-align: center;
	margin-top: 10px;
}

.btn-contener, .btn-contener a
{
	padding: 10px;
}

main .btn-contener a
{
	text-decoration: none;
	align-self: center;
	background-color: green;
  color: white;
}

main .btn-contener a:hover
{
	filter: brightness(1.3);
}

#rate, #features
{
	margin: 15px 0px;
}

#rate > div:first-child, #features > div:first-child
{
	text-align: center;
}

#rate td
{
	width: 50%;
	height: 50px;
}

#rate strong
{
	color: aqua;
}

main > div > span, #rate tfoot td
{
	font-style: italic;
	font-size: smaller;
}

#features td
{
	width: 33%;
	height: 50px;
}

table
{
	width: -webkit-fill-available;
}

thead tr
{
	background-color: green;
}

th, td
{
	border: 1px solid;
	text-align: center;
}

footer
{
	display: flex;
  align-items: center;
  justify-content: center;
  color: papayawhip;
	background: linear-gradient(0deg, rgb(0 0 0 / 35%) 0%, #00bcd485 20%, rgb(0 0 0 / 35%) 100%);
	min-height: 50px;
	text-align: center;
}

footer > div
{
	display: flex;
	flex-direction: column;
}

@media screen and (max-width: 620px)
{
	/* main, header > div > strong */
	header > div > strong
	{
		/* font-size: 2em; */
	}
	
	header
	{
		flex-direction: column;
	}
	
	#logo
	{
		height: 47px;
	}
}