@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap");

:root {
	--red: hsl(10, 97%, 49%);
	--red-bg: hsl(4, 79%, 54%);
	--green: hsl(134, 61%, 41%);
	--dark-green: hsl(134, 61%, 35%);
	--black: hsl(0, 0%, 10%);
	--gray: hsl(0, 0%, 50%);
	--light-gray: hsl(0, 0%, 70%);
	--white: hsl(0, 0%, 99.5%);
	--off-white: hsl(0, 0%, 95%);
	--pale-blue: hsl(215, 75%, 97%);
}

body {
	font-size: 1.25rem;
	font-family: "DM Sans", sans-serif;
	color: var(--black);
	background: var(--white);
	max-width: 75ch;
	margin-inline: auto;
}

/* Header */
header {
	margin-top: 3.5rem;
	padding-inline: 1.5rem;
}

.logos {
	display: flex;
	justify-content: center;
    align-items: center;
	gap: 0.5rem;
	margin-bottom: 2rem;
}

.logos span {
	font-size: 1.25rem;
	font-weight: 800;
}

.logos img {
	max-width: 9rem;
}

/* Main */
main {
	max-width: 65ch;
	margin-inline: auto;
	padding-inline: 1.5rem;
	margin-bottom: 3.5rem;
}

main figure {
	margin: 2.5rem auto;
}

main figure.small {
	max-width: 40ch;
}

hr {
	border: 0;
  	border-top: 1px solid var(--black);
	opacity: 25%;
	margin: 3.5rem 0;
}

.float-portrait {
	display: flex;
	gap: 1.5rem;
	align-items: center;
}

.float-portrait img {
	max-width: 8rem;
}

.float-portrait p:first-of-type {
	font-size: 1.5rem;
}

.greeting {
	text-align: center;
}

.greeting img {
	border-radius: 50%;
	border: 3px solid var(--light-gray);
	max-width: 8rem;
	margin-bottom: 1rem;
	margin-inline: auto;
}

@media (max-width: 768px) {
	.float-portrait {
		display: block;
	}

	.float-portrait img {
		margin-inline: auto;
		margin-bottom: 1rem;
	}

	.float-portrait p:first-of-type {
		text-align: center;
	}

	main img.small {
		max-width: 100%;
	}
}

/* Margins */
.embed {
	margin: 3.25rem 0;
}

.disclaimer {
	margin: 1.5rem 0 2rem 0;
}

.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mt-4 { margin-top: 4rem; }

.margin-none {
	margin: 0 !important;
}

/* Typography */
h1, h2, h3 {
	text-align: center;
	margin-bottom: 1.5rem;
}

h1, p.extra-large {
	font-size: 3.75rem;
    line-height: 1.2;
	font-weight: 600;
}

h2, p.large {
	font-size: 1.75rem;
	line-height: 1.25;
	font-weight: 500;
}

h3, p.very-large {
	font-size: 2.5rem;
	line-height: 1.25;
	font-weight: 600;
}

h3 {
	margin-top: 3.5rem;
}

.align-center {
	text-align: center;
}

.red {
	color: var(--red);
}

.green {
	color: var(--green);
}

p:not(:last-child) {
	margin-bottom: 1rem;
}

p.extra-large {
	text-align: center;
	margin-top: 3rem;
}

figcaption {
	font-size: 1rem;
	font-weight: 800;
	margin-top: 1rem;
}

/* Box */
.box {
    border-radius: 1rem;
    padding: 2rem 2.5rem;
	margin-top: 4rem;
    margin-bottom: 3.5rem;
}

.warning.box {
	color: var(--off-white);
	background: var(--red-bg);
}

.disclaimer.box {
	border: 2px solid var(--gray);
	margin-block: 2rem;
}

/* List */
ul {
	padding-left: 1rem;
}

ul li {
	list-style: none;
	padding-left: 1.5rem;
}

ul li::before {
	content: url(../img/check-circle-fill-green.svg);
	position: absolute;
    margin-top: 0.2rem;
    margin-left: -2rem;
}

ul li:not(:last-child) {
	margin-bottom: 0.5rem
}

/* Button */
.button {
	text-align: center;
}

.button a {
	display: inline-block;
	border-radius: 5rem;
    padding: 1.5rem 2rem;
	margin: 1rem 0 3rem 0;
	color: var(--off-white);
	background: var(--green);
	font-size: 2rem;
	text-decoration: none;
	word-break: break-all;
}

.button a:hover, .button a:focus {
	background: var(--dark-green);
}

/* Countdown */
.countdown {
	--text-color: hsl(0, 0%, 0%);
}