@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	text-decoration: none;
	color: #ffff;
	font-family: 'Nunito', sans-serif;
}

body {
	background-color: #222;
	/* Background de estrellas */
	background-image: url('../Images/Background.webp');
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

header {
	background-color: #191919;
	padding: 0.8em;
	display: flex;
	align-items: center;
	justify-content: space-around;
	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);

	img {
		height: 2em;
	}

	h1 {
		font-size: 1.5em;
		color: #ffff;
	}
}

main {
	display: flex;
	margin: 0 30%;
	flex-grow: 1;
}

section {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 2em;
	min-height: 100%;
	gap: 3em;

	form {
		display: flex;
		flex-direction: column;
		gap: 1em;
		width: 50%;

		input {
			width: 100%;
			padding: 0.5em;
			border: none;
			border-radius: 0.5em;
			background-color: #191919;
			color: #ffff;
			border: 1px solid;
			border-color: #ffff;
			transition: all 0.2 ease-in-out;
		}

		input:hover {
			box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.5);
		}

		button {
			padding: 0.5em;
			border: none;
			border-radius: 0.5em;
			background-color: #191919;
			color: #ffff;
			cursor: pointer;
			transition: all 0.2s ease-in-out;
			border: 1px solid;
			border-color: #ffff;
		}

        button:hover {
            background-color: #222;
			box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.5);
        }
	}
}

footer {
	display: flex;
	justify-content: center;
	padding: 0.7em;
	background-color: #191919;
	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
}

@media screen and (max-width: 768px) {
    header {
        flex-direction: column;
        gap: 1em;

        img {
            height: 2em;
        }

        h1 {
            font-size: 1em;
        }
    }

    main {
        margin: 0 10%;
    }

    section {
        form {
            width: 100%;
        }
    }
    
}