@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;600&display=swap');


body {
	background-color: #e5e8e8;
	color: #4e545c;
	margin: 0;
	font-family: 'Quicksand';
	height: 100vh;
}

main {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

a {
	text-decoration: none;
	color: white;
}

.voltar {
	width: 10%;
}

.row {
	display: flex;
	flex-direction: row;
}

#altura {
	margin-left: 50px;
}

#campoAltura {
	margin-left: 50px;
}

.resumo h2 {
	text-align: center;
	margin-top: -5px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input {
	border-radius: 40px;
	font-size: 1.5rem;
	height: 60px;
	border: none;
	background-color: #4e545c;
	color: #e5e8e8;
	text-align: center;
}

.info {
	width: 50%;
}

.container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.container .row {
	margin-top: -30px;
}

.top {
	margin-top: -30px;
}

#campoResultado {
	margin-left: 20px;
}

#conteudo {
	margin-top: -15px;
	line-height: 50px;
}

#calcular {
	margin-bottom: 40px;
	margin-top: 40px;
}

button {
	border-radius: 40px;
	font-size: 20px;
	height: 60px;
	width: 200px;
	background-color: #4e545c;
	color: #e5e8e8;
	transition: all 0.5s linear;
	cursor: pointer;
	border: none;
}

button:hover {
	background-color: #000401;
}

.github {
	color: #e5e8e8;
	text-decoration: none;
}

.github:hover {
	color: aqua;
}

footer {
	width: 100%;
	background-color: #4e545c;
	padding: 16px;
	position: fixed;
	bottom: 0;
	text-align: center;
	font-weight: 400;
}


/* SMARTPHONES */
@media only screen and (min-device-width: 360px) and (max-device-width: 900px) {
	main {
		font-size: 70%;
		text-align: center;
	}

	.container {
		padding: 10px;

	}

	#conteudo {
		padding: 6px;
		line-height: 35px;
	}

	#calcular {
		margin-top: 10px;
	}

	button {
		width: 100px;
		border: none;
	}

	.row {
		margin-top: -15px;
	}

	input {
		border-radius: 40px;
		font-size: 20px;
		height: 40px;
		width: 50px;
		background-color: #4e545c;
		color: #e5e8e8;
		border: none;
	}

	footer {
		margin-left: -20px;
	}
}

/* TABLETS */
@media only screen and (min-device-width: 768px) and (max-device-width: 1200px) {

	main {
		font-size: 100%;
		text-align: center;
	}


	button {
		width: 100px;
		font-size: 30px;
		height: 60px;
		width: 200px;
		border: none;
	}

	input {
		border-radius: 40px;
		font-size: 20px;
		height: 40px;
		width: 50px;
		background-color: #4e545c;
		color: #e5e8e8;
		border: none;
	}

	#conteudo {
		margin-top: -60px;
		line-height: 60px;
		padding: 50px;
	}

	footer {
		font-size: 30px;
		margin-left: -20px;
	}

}


@media only screen and (min-device-width: 768px) and (max-device-width: 1360px) {
	#title {
		margin-top: 10px;
	}

	button {
		width: 100px;
		font-size: 30px;
		height: 60px;
		width: 200px;
		border: none;
	}

	#calcular {
		margin-top: 20px;
	}

	input {
		border-radius: 40px;
		font-size: 20px;
		height: 40px;
		width: 50px;
		background-color: #4e545c;
		color: #e5e8e8;
		border: none;
	}

	#conteudo {
		margin-top: -60px;
		line-height: 50px;
		padding: 50px;
	}

	footer {
		font-size: 30px;
		margin-left: -20px;
	}
}