:root {
	--w: 28rem;
}

body {
	background-color: hsl(200 50% 95%);
}

form#auth {
	width: var(--w);
	margin: calc((100vh - 32rem) / 2) auto 0 auto;
	background-color: white;
	border-radius: 25%;
	padding: 4rem;
	box-shadow: 0.3rem 0.3rem 0.5rem lightgray;

	display: flex;
	flex-direction: column;
	gap: 2rem;
	text-align: center;
	font-family: PFont, sans-serif;

	> div {
		input[type="text"], input[type="password"] {
			font-size: 1rem;
			background-color: transparent;
			border: 1px solid lightgrey;
			border-radius: 1rem;
			margin: 0 0.25rem;
			padding: 1rem;
			color: black;
			width: calc((100% - 6rem) / 2);
			text-align: center;
			font-family: inherit;

			&::placeholder {
				font-weight: lighter;
				font-size: 85%;
			}
		}

		&.logo img{
			max-width: calc(var(--w) * 0.75);
		}

		&.titre {
			color: darkslateblue;

			> div {
				&:nth-child(1) {
					font-size: 2rem;
					font-weight: bold;
					text-transform: uppercase;
				}
				&:nth-child(2) {
					font-size: 0.75rem;
					width: 67%;
					margin: 0 auto;
				}
			}
		}

		button {
			background-color: transparent;
			border: none;
			cursor: pointer;
			text-transform: uppercase;
			font-size: 1rem;
			font-weight: bold;
			color: grey;

			&:hover {
				color: black;
				transition-duration: 1s;
			}
		}
	}
}