:root {
	--white: #fbfbfb;
	--black: #0c0c0c;
	--ligth-gray: #F0F1F5;
	--green: #1A7320;
	--font-size-small: 15px;
	--font-size-normal: 16px;
	--font-size-large: 17px;
	--font-size-big-1: 22px;
	--font-size-big-2: 24px;
	--font-size-big-3: 32px;
	--font-size-big-4: 46px;
	--font-size-big-5: 52px;
	--fg: black;
	--bg: white;
	--prebg: #eee;
	--navlink: #333;
	--navlink-visited: #222;
	--separator: darkslategray;

	color:            var(--fg);
	background-color: var(--bg);
}

@media(prefers-color-scheme: dark) {
	:root {
		--fg: white;
		--bg: black;
		--prebg: #111;
		--navlink: #aaa;
		--navlink-visited: #bbb;
		--separator: ghostwhite;
	}

	a {
		color: hsl(211, 100%, 60%);
		&:visited {
			color: hsl(242, 100%, 80%);
		}
	}
}

main {
	margin: 0px auto;
	padding: 1%;
	line-height: 1.6;
}

hr {
	color:            var(--separator);
	background-color: var(--separator);
	height: 1px;
}

pre, code {
	background-color: var(--prebg);
	border-radius: 5px;
	padding: 5px;
}

.icon {
	width: 40px;
	vertical-align: middle;
}

header > nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
	padding: 1%;

	& > a > img {
		width: 120px;
	}

	& > ol {
		display: flex;
		list-style: none;

		& > li > a {
			color: var(--navlink);
			margin: 0 1rem;
			text-decoration: none;
			font-size: 1rem;

			&:visited {
				color: var(--navlink-visited);
			}

			&:hover {
				text-decoration: underline;
			}
		}
	}
}

.basic-button {
	height: 2rem;
	font-family: "Open Sans", sans-serif;
	border-radius: 3px;
	cursor: pointer;
	padding: 0 10px;
	margin: 0 .2rem;
}

.big_button {
	height: 3rem;
	width: 15rem;
	margin-top: 2rem;
	border-radius: 2rem;
	font-size: var(--font-size-large);
	align-self: center;
	text-transform: uppercase;
}

.login {
	color: var(--black);
	border: 1px solid var(--green);
	background-color: #fbfbfb;
}

.sign-up, .big_button {
	border: none;
	background-color: var(--green);
	color: var(--white);
}

.basic-button:hover {
	text-decoration: underline;
}

.banner {
	margin: 100px 0;
	text-align: center;
	color: var(--black);

	h1 {
		font-size: var(--font-size-big-5);
	}

	p {
		font-size: var(--font-size-big-2);
		margin-top: 8px;
		margin-bottom: 1px;
	}
}

.why_papo {
	background-color: var(--ligth-gray);
	padding-bottom: 1.2rem;

	h2 {
		font-size: var(--font-size-big-3);
	}

	h3 {
		font-size: var(--font-size-big-1);
		margin-top: .5rem;
	}
}

.why_papo-container {
	margin-right: auto;
	margin-left: auto;
	padding-top: 1rem;
	padding-bottom: 3rem;
	max-width: 1200px;
	display: flex;
	flex-direction: column;
}

.why_papo-cards-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 1.3rem 0;
}

.why_papo-card {
	margin: 0 1rem;
	width: 25%;
	padding: 1.5rem;
	background-color: var(--white);
	border-radius: 15px;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.features-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
}

.features {
	h2 {
		font-size: var(--font-size-big-3);
		margin-bottom: 0;
	}

	h3 {
		font-size: 20px;
		font-weight: 500;
		margin-top: .5rem;
	}
}

footer {
	margin-top: 200px;
}

body {
	font-family: "Open Sans", sans-serif;
	line-height: 1.6;
}