/*
Theme Name: Insure Landing Page
Theme URI: https://github.com/ferfalcon/insure-landing-page
Author: Fernando Falcon
Author URI: https://ferfalcon.com/
Description: Block theme implementation of the Frontend Mentor Insure landing page challenge.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: insure-landing-page
*/

:root {
	--insure-blue-950: hsl(256 26% 20%);
	--insure-blue-500: hsl(216 30% 68%);
	--insure-gray-950: hsl(270 9% 17%);
	--insure-gray-700: hsl(273 4% 51%);
	--insure-gray-50: hsl(0 0% 98%);
	--insure-white: hsl(0 0% 100%);
	--insure-border: hsl(276 4% 51% / 0.35);
	--insure-content: min(100% - 3rem, 69.375rem);
	--insure-heading: "DM Serif Display", Georgia, serif;
	--insure-body: Karla, Arial, sans-serif;
}

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--insure-white);
	color: var(--insure-gray-700);
	font-family: var(--insure-body);
	font-size: 1rem;
	line-height: 1.6;
}

img,
picture {
	display: block;
	max-width: 100%;
}

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

.insure-landing-page ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.insure-container {
	width: var(--insure-content);
	margin-inline: auto;
}

.insure-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.5rem;
	padding: 0.45rem 1.75rem;
	border: 0.125rem solid currentColor;
	color: var(--insure-white);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	line-height: 1;
	text-transform: uppercase;
	transition: background-color 180ms ease, color 180ms ease;
}

.insure-button:hover,
.insure-button:focus-visible {
	background: var(--insure-white);
	color: var(--insure-blue-950);
}

.insure-logo {
	width: 7rem;
}