/* Variáveis */
:root {
	--cor-text: hsl(40, 33%, 7%);
	--cor-background: hsl(0, 0%, 99%);
	--cor-background-alt: hsl(0, 0%, 95%);
	--cor-link-externo: hsl(0, 0%, 97%);
	--cor-link-ori: hsl(225, 72%, 41%);
	--cor-link-vis: hsl(276, 100%, 25%);
	--cor-link-est: hsl(240, 63%, 27%);

	--cor-link-meta: hsl(0, 0%, 30%);
	--cor-link-meta-est: hsl(0, 0%, 50%);

	--ff-base: Georgia, "Noto Serif", ui-serif, serif;
	--ff-accent: "Helvetica Neue", Arial, ui-sans, sans-serif;
	--ff-mono: ui-monospace, monospace;

	--fs--1: clamp(0.9894rem, 0.9831rem + 0.0315vw, 1rem);
	--fs-0: clamp(1.1875rem, 1.1505rem + 0.1852vw, 1.25rem);
	--fs-1: clamp(1.425rem, 1.3435rem + 0.4074vw, 1.5625rem);
	--fs-2: clamp(1.71rem, 1.5659rem + 0.7204vw, 1.9531rem);
	--fs-3: clamp(2.0519rem, 1.8211rem + 1.1537vw, 2.4413rem);
	--fs-4: clamp(2.4625rem, 2.1132rem + 1.7463vw, 3.0519rem);

	--pos-margem-baixo: 1.25rem;
	--pos-grande-salto: 4rem;
	--pos-curvada: .4rem;
}

/* CSS reset */
*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

html {
	color-scheme: light dark;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

/* Gerais */

body {
	background-color: var(--cor-background);
	font-family: var(--ff-accent);
	color: var(--cor-text);
	font-size: var(--fs-0);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	word-wrap: break-word;
}

h1, h2, h3, h4 {
	clear: both;
	font-family: var(--ff-base);
	font-weight: 400;
	margin-bottom: var(--pos-margem-baixo);
}

p,
ul,
ol,
figure,
form {
	margin-bottom: var(--pos-margem-baixo);
}
li {
	margin-bottom: .6rem;
}

a {
	color: var(--cor-link-ori);
}

a:visited {
	color: var(--cor-link-vis);
}

a:hover,
a:focus {
	color: var(--cor-link-est);
}
a:focus { 
	outline: thin dotted; 
}

hr {
	margin: calc(var(--pos-margem-baixo) * 1.5) 0;
	height: 1px;
	border: none;
	background-color: var(--cor-background-alt);
}

code,
pre {
	font-family: var(--ff-mono);
	font-size: var(--fs--1);
	background-color: var(--cor-background-alt);
	border-radius: calc(var(--pos-curvada) / 3 );
	padding: .25rem .75rem;
	border-radius: 6px;
}

pre {
	overflow: auto;
	margin-bottom: var(--pos-margem-baixo);
	white-space: pre-wrap;
	line-height: 1.5;
}

input[type=email],
button[type=submit] {
	-webkit-appearance: none;
	word-wrap: break-word;
	border: 1px solid rgb(210, 210, 210);
	font-size: var(--fs-0);
	height: 2.5rem;
	padding: .25rem .5rem;
	border-radius: var(--pos-curvada);
	font-family: var(--ff-base);
}

input[type=email] {
	background-color: var(--cor-background-alt);
	margin-right: .5rem;
	width: 100%;
	margin-bottom: var(--pos-margem-baixo);
}
button[type=submit] {
	cursor: pointer;
	background-color: var(--cor-link-ori);
	background-color: var(--cor-link-ori);
	color: white;
	border-color: var(--cor-link-ori);
}
button[type=submit]:hover {
	background-color: var(--cor-link-est);
	border-color: var(--cor-link-est);
}

.entry blockquote {
	margin-left: 2rem;
	font-family: var(--ff-base);
}

/* Leiaute */
main,
header,
footer,
.paginacao,
.footer-newsletter,
.single article.entry,
.entry_page {
	width: min(100% - 1rem, 720px);
	margin-inline: auto;
}

main {
	margin: 0 auto var(--pos-grande-salto);
}

header {
	margin: 2rem auto var(--pos-grande-salto);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

header h1,
.logo h2 {
	font-size: var(--fs-3);
}

@media (prefers-color-scheme: dark) {
	header h1 img,
	.logo h2 img,
	.logo-escuro {
		filter: invert(1);
	}
}

.logo h1,
.logo h2,
.logo p,
.logo {
	margin: 0;
}
.logo p {
	font-size: var(--fs--1);
	margin-top: -.25rem;
}

nav ul {
	display: flex;
	align-items: center;
	list-style: none;
	column-gap: 1rem;
	margin-bottom: 0;
	line-height: 1;
	font-family: var(--ff-mono);
	font-size: var(--fs--1);
}
nav li {
	margin-bottom: 0;
}
nav a,
nav a:visited {
	color: var(--cor-link-meta);
}
nav a:hover {
	color: var(--cor-link-meta-est);
}

nav img {
	vertical-align: middle;
	width: 24px;
	height: auto;
}

article {
	margin: 0 auto var(--pos-grande-salto);
}

.single .pos-post {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.data {
	font-size: var(--fs--1);
	font-family: var(--ff-mono);
	color: var(--cor-link-meta);
}

.meta-cat {
	text-transform: capitalize;
}

.paginacao {
	margin: 0 auto min(var(--pos-grande-salto) + 6rem);
	display: flex;
	justify-content: space-between;
	column-gap: 2rem;
}

.paginacao_proxima,
.paginacao_numeros,
.paginacao_anterior {
	width: 30%;
}
.paginacao_numeros {
	text-align: center;
}

.paginacao_post_proxima,
.paginacao_proxima {
	text-align: right;
}

.footer-newsletter {
	text-align: center;
	margin-bottom: var(--pos-grande-salto);
}
.footer-newsletter form {
	display: flex;
}

footer {
	text-align: center;
	background-color: var(--cor-background-alt);
	padding: 1rem;
	border-radius: var(--pos-curvada);
}

footer img {
	width: 120px;
	height: auto;
	border-radius: 50%;
	margin-top: -4rem;
}

footer p:last-child {
	margin-bottom: 0;
}

/* Tipos de posts */
.single article h1 {
	font-size: var(--fs-3);
	line-height: 1.25;
}
article.entry h2 {
	font-size: var(--fs-2);
	margin-top: 2.5rem;
}
article.entry h3 {
	margin-top: 2rem;
}

.entry img {
	box-shadow: 4px 4px 16px hsl(0, 0%, 85%);
}

.full-img {
	left: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	max-width: 100vw;
	position: relative;
	right: 50%;
	width: 100vw;
	max-width: 1200px;
}

/* Capa */
.blocos-de-apps {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: 1rem;
	margin-bottom: var(--pos-grande-salto);
	align-items: center;
}

.bloco-app,
.exclusivos {
	width: 100%;
	border-radius: var(--pos-curvada);
	background-color: var(--cor-link-externo);
	border: 1px solid hsl(0, 0%, 93%);
}
.exclusivos {
	text-align: center;
	flex-grow: 2;
	margin-bottom: 0;
	padding: .5rem;
}

.bloco-app img {
	float: left;
	margin-right: 1rem;
}
.bloco-app h2 {
	display: flex;
	padding: 1rem;
	margin: 0;
	column-gap: .5rem;
}
.bloco-app p {
	font-size: var(--fs-0);
	line-height: 1.4;
	margin: 0;
	margin-inline: 1rem;
}
.bloco-app ul {
	list-style: none;
	display: flex;
	justify-content: space-around;
	padding: 0;
	margin: 0;
	border-top: 1px dashed hsl(0, 0%, 87%);
	margin-top: 1rem;
}
.bloco-app ul li {
	flex-basis: 50%;
	text-align: center;
	margin: 0;
	padding: 1rem .5rem;
	line-height: 1;
}

a.link-app {
	font-weight: bold;
}

ul.lista-noticias {
	list-style: none;
	padding-left: 0;
}

ul.lista-noticias li {
	display: flex;
	flex-direction: column;
	border-bottom: 1px dashed hsl(0, 0%, 87%);
	margin-bottom: 1rem;
	padding-bottom: 1rem;
}

ul.lista-noticias span {
	font-family: var(--ff-mono);
	color: var(--cor-link-meta);
	font-size: var(--fs--1);
}

/* Telas muito grandes */
@media only screen and (min-width: 1024px) {
	.full-img {
		left: 0;
		right: 0;
		margin: 0;
		max-width: 100%;
	}
}

/* Telas grandes */
@media only screen and (min-width: 480px) {
	:root {
		--pos-grande-salto: 8rem;
	}

	nav ul {
		column-gap: 1.5rem;
	}

	input[type=email] {
		width: 50%;
	}

	.bloco-app {
		flex-basis: calc(50% - .5rem);
	}

	ul.lista-noticias li {
		flex-direction: row;
		column-gap: 1rem;
		align-items: baseline;
	}
	ul.lista-noticias span {
		width: 100px;
		text-align: right;
	}

	.single .pos-post {
		flex-direction: row;
	}

	.footer-newsletter form {
		justify-content: center;
	}

	footer {
		margin: 0 auto 2rem;
		border-radius: var(--pos-curvada);
	}

	.entry_quote blockquote {
		padding-left: 1.5rem;
	}
}

/* Telas minúsculas */
@media only screen and (max-width: 350px) {
	body {
		font-size: var(--fs-0);
	}

	header {
		flex-direction:	column;
		align-items: start;
	}
	.logo {
		margin-bottom: var(--pos-margem-baixo);
	}

	nav ul {
		padding-left: 0;
	}

	.paginacao {
		font-size: var(--fs-0);
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--cor-text: hsl(60, 20%, 99%);
		--cor-background: hsl(40, 33%, 7%);
		--cor-background-alt: hsl(0, 0%, 12.16%);
		--cor-link-externo: hsl(0, 0%, 14%);
		--cor-link-ori: hsl(220, 32%, 26%);
		--cor-link-meta: rgb(194, 210, 255);
		--cor-link-meta-est: rgb(235, 240, 255);
		--cor-link-ori: rgb(108, 147, 255);
		--cor-link-vis: rgb(171, 136, 255);
		--cor-link-est: rgb(166, 189, 255);
	}
	.entry img {
		box-shadow: none;
	}

	.bloco-app,
	.exclusivos,
	.bloco-app ul,
	ul.lista-noticias li {
		border-color: hsl(0, 0%, 30%);
	}
}