@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@100..900&display=swap');


:root {
	--cor-primaria: #3a5dcb;
	--cor-primaria-escuro: #2c4dbb;
	--cor-secundaria: #8f47ee;

	--cor-fundo-primario: #ffffff;
	--cor-fundo-secundario: #eeeeee;
	--cor-fundo-escuro: #31333d;
	--cor-borda: #dddddd;

	--cor-texto-	: #eeeeee;
	--cor-texto-secundario: #31333d;
	--cor-texto-branco: #eeeeee;
	--cor-texto-preto: #31333d;

	--cor-success: rgb(53, 199, 59);
	--cor-error: rgb(255, 53, 80);
	
	--transition-color: 0.4s ease-in-out;
	--transition-hover: 0.2s ease-out;
	--transition-popup: 0.25s cubic-bezier(.13, .5, .25, 1.24);

	--spacing-small: 0.625rem;
	--spacing-medium: 1.25rem;
	--spacing-large: 1.875rem;
	--spacing-extralarge: 2.5rem;
}


.dark-theme {
	--cor-primaria: #6080E0;
	--cor-primaria-escuro: #3a5dcb;
	--cor-secundaria: #8f47ee;

	--cor-fundo-primario: #28283E;
	--cor-fundo-secundario: #1C1C2C;
	--cor-fundo-escuro: #6080E0;
	--cor-borda: #3f4250;

	--cor-texto-primario: #31333d;
	--cor-texto-secundario: #eeeeee;
	--cor-texto-branco: #eeeeee;
	--cor-texto-preto: #31333d;
}


* {
	font-family: "Geologica", sans-serif;
	line-height: 1.45;

	padding: 0;
	margin: 0;
	scroll-margin-top: 7.5rem;
	box-sizing: border-box;

	transition: color var(--transition-hover), background-color var(--transition-hover), bottom var(--transition-hover), filter var(--transition-hover);
}


p, strong, small {
	color: var(--cor-texto-secundario)
}


html {
	scroll-behavior: smooth;
	font-size: 100%;
}
body {
	display: flex;
	flex-direction: column;

	min-height: 100vh;

	background-color: var(--cor-fundo-secundario);
	color: var(--color-texto-secundario);
}


p, a {
	font-size: clamp(1rem, 0.8vw + 0.8rem, 1.25rem);
	font-weight: 300;
}
strong {
	font-size: clamp(1rem, 0.8vw + 0.8rem, 1.25rem);
}
h1 {
	font-size: clamp(2.5rem, 5vw + 1rem, 3rem);
}
h2 {
	font-size: clamp(1.75rem, 3vw + 1rem, 2rem);
}
h3 {
	font-size: clamp(1.25rem, 2vw + 1rem, 1.5rem);
	font-weight: 500;
}
small {
	font-size: clamp(0.9rem, 0.5vw + 0.5rem, 0.875rem);
}


button {
	position: relative;
	bottom: 0;

	cursor: pointer;
	font-weight: bold;

	border: none;

	padding: 0.75rem 2.0rem;
	border-radius: 0.625rem;
	font-size: clamp(1.1rem, 1vw + 0.5rem, 1.125rem);

	box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
	background-color: var(--cor-primaria);
	color: var(--cor-texto-branco);

	filter: brightness(1);
}
.botao-secundario {
	border: 1px solid var(--cor-borda);
	
	background-color: var(--cor-fundo-secundario);
	color: var(--cor-texto-secundario);
}
.cancelar {
	border: 1px solid var(--color-input-border);

	background-color: var(--color-button-cancelar-background);
	color: var(--color-button-cancelar-text);
}
button:hover {
	bottom: 0.125rem;
	filter: brightness(1.25);
}
button:active {
	bottom: -0.0625rem;
	filter: brightness(0.75);
}


label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 500;
	color: var(--cor-texto-secundario);
	transition: color var(--transition-hover);
}


input,
select {
	width: 100%;
	padding: 0.625rem;
	font-size: 1rem;

	border: 1px solid var(--cor-borda);
	border-radius: 0.625rem;

	background-color: var(--cor-fundo-secundario);
	color: var(--cor-texto-secundario);

	margin-bottom: var(--spacing-medium);

	box-sizing: border-box;
}
input:focus,
select:focus {
	outline: none;
	border-color: var(--cor-secundaria);
}


input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
	cursor: pointer;
}


img {
	cursor: pointer;

	position: relative;
	bottom: 0;
	border-radius: 0.625rem;

	height: auto;

	border: 0.125rem solid var(--cor-primaria);
	box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}
img:hover {
	bottom: 0.125rem;
	filter: brightness(1.075);
}
img:active {
	bottom: -0.0625rem;
	filter: brightness(0.75);
}


a {
	text-decoration: none;
	font-weight: bold;

	position: relative;
	bottom: 0.4rem;

	border-radius: 0.625rem;
	padding: 0.5rem 1rem;

	color: var(--cor-primaria);
	filter: brightness(1);
}
a:visited {
	text-decoration: underline;
	color: var(--cor-secundaria);
}
a:hover {
	bottom: 0.525rem;
	filter: brightness(1.25);
}
a:active {
	bottom: 0.3375rem;
	filter: brightness(0.75);
}


main {
	width: 100%;
	margin: 0 auto;

	display: flex;
	flex-direction: column;
	align-items: center;

	z-index: 1;

	background-color: var(--cor-fundo-secundario);
	color: var(--color-text-dark);
}
.main-conteudo {
	max-width: 75rem;
	margin-top: 2rem;
}


section {
	margin-bottom: var(--spacing-extralarge);
}


footer {
	text-align: center;

	padding: var(--spacing-large) 0.3875rem 0.1875rem 0.3875rem;
	margin-top: var(--spacing-extralarge);

	background-color: var(--cor-fundo-escuro);
	color: var(--cor-texto-branco);

	box-shadow: 0 0 2rem rgba(0, 0, 0, 0.25);
}
footer strong {
	display: block;
	margin-bottom: var(--spacing-small);
	font-size: clamp(1rem, 0.5vw + 0.5rem, 1rem);
}
footer p {
	font-size: clamp(0.9rem, 0.4vw + 0.4rem, 0.875rem);
}