/* This file deals with general styles that are universal over the different dimensions  */

body {
	display: flex;
	/* always prefere min-height to height to prevent content loss */
	min-height: 100vh;
	background-color: var(--color-blue700);
}

.white {
	background-color: var(--color-white);
}

.email-btn,
.modal-btn {
	height: 3.5rem;
	background-color: var(--color-blue800);
	border: none;
	color: var(--color-white);
	font: var(--font-reg-bold);
	border-radius: 0.5rem;
}

main {
	color: var(--color-blue800);
	.cta-layout {
		h1 {
			font: var(--font-h1-mob);
		}
		ul {
			display: grid;
			gap: var(--space-100);
			list-style: none;
			li {
				position: relative;
			}
			li::before {
				position: absolute;
				content: "";
				background-image: url("../assets/images/icon-list.svg");
				height: 21px;
				width: 21px;
				top: 1.5px;
				left: -37px;
			}
		}
		p,
		li {
			font: var(--font-reg);
		}
	}
	.email-form {
		display: flex;
		flex-direction: column;
		gap: var(--space-300);
	}
	.email-input {
		display: grid;
		gap: var(--space-100);
		.email-label {
			display: block;
			font: var(--font-small);
		}
		input {
			height: 3.5rem;
			border-radius: 0.5rem;
			font: var(--font-reg);
			padding-inline: 1.5rem;
		}
		input::placeholder {
			color: var(--color-grey);
		}
	}
}

.modal {
	.wrapper {
		color: var(--color-blue800);
		h1 {
			font: var(--font-h1-mob);
		}
		p {
			font: var(--font-reg);
		}
	}
}