@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;
	z-index: 100;
}

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

header > div > strong
{
	font-size: 3em;
  font-family: serif;
}

#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: 10% 0%;
}

h1
{
	text-align: center;
}

.site-presentation-contener
{
	text-align: center;
}

img.site-presentation
{
	width: 80%;
	border-radius: 15px;
	filter: brightness(0.8);
}

img.site-presentation:hover
{
	filter: brightness(1.0);
}

.btn-contener
{
	display: flex;
  justify-content: center;
	margin-top: 10px;
}

.btn-contener, .btn-contener button
{
	/* padding: 10px; */
}

main .btn-contener button
{
	/* background-color: green; */
  /* color: white; */
}

main .btn-contener button:hover
{
	/* filter: brightness(1.3); */
	/* cursor: pointer; */
}

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

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

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

#rate strong
{
	color: aqua;
}

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

#features th,
#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-device-width: 700px)
{
	main, header > div > strong
	{
		font-size: 1.2em;
	}
}

/*****************************************************************/

h2
{
	text-align: center;
	color: cyan;
}

section h2
{
	margin: 10%;
}

section img
{
	width: 50%;
	height: fit-content;
  box-shadow: 0px 0px 8px 4px;
  transform: perspective(100vw) rotatey(24deg);
	border-radius: 5px;
	transition: all 1s;
}

section img.right
{
  transform: perspective(100vw) rotatey(-24deg);
}

section img:hover
{
	transform: revert;
}

section article div
{
	display: flex;
	justify-content: space-between;
}

button {
  width: 200px;
  height: 50px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(to right,#77530a,#ffd277,#77530a,#77530a,#ffd277,#77530a);
  background-size: 250%;
  background-position: left;
  color: #ffd277;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition-duration: 1s;
  overflow: hidden;
}

button::before {
  position: absolute;
  content: "Lancer l'application";
  color: #ffd277;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 97%;
  height: 90%;
  border-radius: 8px;
  transition-duration: 1s;
  background-color: rgba(0, 0, 0, 0.842);
  background-size: 200%;
	font-size: larger;
}

button:hover {
  background-position: right;
  transition-duration: 1s;
}

button:hover::before {
  background-position: right;
  transition-duration: 1s;
}

button:active {
  transform: scale(0.95);
}