@font-face {
	font-family: "Product Sans";
	src: url(./Product\ Sans\ Regular.ttf);
}

* {
	box-sizing: border-box;
}

:root {
	--blue: #004aad;
	--light-blue: rgb(209, 245, 255);
	--text: #454545;
}

body {
	font-family: "Product Sans", sans-serif;
	color: var(--text);
	padding: 0;
}

body,
h1 {
	margin: 0;
}

button,
h1 span {
	width: fit-content;
	color: var(--blue);
}

button {
	border: 0;
	border-radius: 0.25rem;
	padding: 0.75rem 1.25rem;
	font: inherit;
	font-size: 1.25rem;
	background-color: var(--light-blue);
	color: var(--blue);
	cursor: pointer;
}

main {
	margin: 0 12rem;
	display: flex;
	flex-direction: column;
	height: 100vh;
}

@media screen and (max-width: 800px) {
	main {
		margin: 0 5rem;
	}
}

@media screen and (max-width: 600px) {
	main {
		margin: 0 2rem;
	}
}

@media screen and (max-width: 400px) {
	main {
		margin: 0 1.5rem;
	}
}

.button-div,
.logo {
	flex: 1;
	display: flex;
}

.logo {
	align-items: flex-end;
}

.tagline {
	padding: 2.25rem 0;
}

.tagline h1 {
	font-weight: 500;
}

.button-div {
	align-items: flex-start;
}