:root {
	--blue: #3D405B;
	--green: #81B29A;
	--orange: #E07A5F;
	--yellow: #F2CC8F;
	--white: #F4F1DE;

	--font-sansserif: ariana-pro, Helvetica, sans-serif;
	--font-monospace: input-serif, monospace;
}

* {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	color: var(--white);
	font-family: var(--font-sansserif);
	background: var(--yellow);
	height: 100%;
}

a {
	color: var(--yellow);
}

h1 {
	margin: 1.5rem 0 0.5rem;
}

p {
	margin: 0 0 0.5rem;
}

ol li {
	margin: 0.5rem 0;
}

ol.paragraphs {
	list-style-type: lower-latin;
}

/*	========================================
	header
    ===================================== */

header { 
	width: 100%;
	height: 140px;
	background: var(--blue);
}

.logo {
	width: auto;
	height: calc(100% - 2rem);
	padding: 1rem;
	display: flex;
	float: left;
	align-items: center;
}

.logo svg {
	height: 50%;
	fill: var(--yellow);
	transition: 150ms;
}

.logo svg:hover {
	fill: var(--orange);
}

nav {
	height: 100%;
	float: right;
}

nav ul {
	height: 100%;
	display: flex;
	flex-wrap: nowrap;
	margin: 0;
	padding: 0;
	gap: 1rem;
	padding: 0 1rem;
}

nav ul li {
	height: 100%;
	list-style-type: none;
	display: flex;
	align-items: center;
	flex-grow: 0;
	font-size: 1.2rem;
}
nav a {
	text-decoration: none;
	font-weight: 500;
	transition: 150ms;
}

nav a:hover {
	color: var(--orange);
}

/*	========================================
	main
    ===================================== */

main {
	padding: 10vh 5rem 0 5rem;
	min-height: 50vh;
	background: var(--blue);
	clear: both;
}

.center-text {
	max-width: 960px;
	margin: auto;
	hyphens: auto;
	padding-bottom: 2rem;
}

.bt-container {
	display: grid;
	justify-content: center;
	padding: 3rem 2rem;
	gap: 1rem;
}

.bt-primary,
.bt-secondary {
	background: var(--green);
	color: var(--blue);
	text-decoration: none;
	font-size: 1.2rem;
	font-weight: 500;
	padding: 0.5rem 3rem;
	border-radius: calc(2 * 0.5rem + 1.2rem);
	flex-basis: 100%;
	border: none;
	text-align: center;
	transition: 150ms;
}

.bt-primary:hover {
	filter: brightness(1.1);
}

.bt-secondary {
	background: var(--white);
}

.bt-secondary:hover {
	opacity: 0.8;
}

.number-container {
	padding-top: 5vh;
	font-family: var(--font-monospace);
	font-size: 2.5rem;
	text-align: center;
}

.number-digits {
	margin: 0.3rem;
	padding: 0.2rem;
	border-bottom: 3px solid var(--white);
}

#digit-form {
	padding-top: 5vh;
	font-family: var(--font-monospace);
	text-align: center;
}

.flex-receive {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 0.5rem;
}

input,
textarea {
	background: var(--white);
	border: none;
	color: var(--blue);
	border-radius: 2px;
}

.check-digit {
	width: 1.8rem;
	height: 2.6rem;
	font-size: 1.8rem;
	font-family: var(--font-monospace);
	text-align: center;
}

.msg-field {
	display: block;
	box-sizing: border-box;
	max-width: 1080px;
	width: 100%;
	height: 36vh;
	padding: 1rem;
	margin: auto;
	font-size: 1.2rem;
}

.msg {
	box-sizing: border-box;
	width: 100%;
	height: 36vh;
	font-size: 1.2rem;
	border: 3px dashed var(--green);
}

.copy-field {
	padding: 0.8rem 1rem;
}

.icon {
	height: 2rem;
}

.copy {
	float: right;
	cursor: pointer;
	padding: 0.5rem;
}

.how-to {
	margin-top: 4vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	flex-wrap: wrap;
	max-width: 80%;
	margin: auto;
}

#send-msg .how-to {
	margin: 0 auto 1rem;
}

.info-icon {
	font-size: 1.4rem;
	font-weight: 500;
	padding-right: 0.5rem;
	border: 2px solid var(--white);
	border-radius: 100%;
	width: 1.1rem;
	height: 1.6rem;
	margin: 0.5rem;
}

.info-icon>span {
	position: relative;
	top: -0.25rem;
	left: 4px;
}

.timeline-container {
	width: 100%;
	overflow-x: hidden;
	background: var(--blue);
}

#timeline {
	position: relative;
	font-weight: 200;
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	padding: 0 0 1rem;
}

#timeline div {
	box-sizing: border-box;
	position: relative;
	padding: 0.25rem;
	width: 25%;
	flex-grow: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	border-bottom: 2px solid var(--white);
	padding: 0 1rem 0.25rem;
}

#timeline span {
	padding-right: 0.25rem;
}

#timeline .tl-active {
	font-weight: 700;
}

#systemMsg {
	height: 2rem;
	border-radius: 2rem;
	animation-duration: 4s;
	animation-fill-mode: forwards;
	background-color: var(--blue);
	color: var(--green);
	font-weight: 500;
	text-align: center;
	position: relative;
	top: -2rem;
	opacity: 0;
	padding: 0.25rem 1rem;
	line-height: 1.8rem;
	border: 2px solid var(--green);
}
.systemMsg-container {
	position: absolute;
	top: 20vh;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}


@keyframes systemMsg {
0% { top: -2rem; opacity: 0;}
10% { top: 0; opacity: 1;}
90% { top: 0; opacity: 1;}
100% { top: -2rem; opacity: 0;}
}


/*	========================================
	footer
    ===================================== */

footer {
	width: 100%;
	position: relative;
	box-sizing: border-box;
	padding: 1rem;
	color: var(--blue);
	border-top: 1rem solid var(--orange);
	z-index: 2;
}

.footer-links {
	display: flex;
	flex-wrap: nowrap;
	gap: 1rem;
}

footer a {
	color: inherit;
	text-decoration: none;
	font-weight: 500;
}

kbd {
	font-size: 1rem;
	margin: auto;
}

/*	========================================
	homepage
    ===================================== */

#homepage main {
	padding-top: 1.5rem;
	position: relative;
}

.splitscreen {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
	isolation: isolate;
	background: var(--blue);
	border-bottom: 5px solid var(--white);
}

.splitscreen section {
	flex-basis: 50%;
	box-sizing: border-box;
	min-height: 80vh;
}

.home-container {
	padding: 10vh 1rem 0 1rem;
	max-width: 650px;
	margin: auto;
	position: relative;
}

.secondary-screen {
	background-color: var(--green);
	display: flex;
	align-items: center;
	overflow: hidden;
}

.secondary-screen img {
	scale: 1;
	transition: scale .25s linear; 
}

blockquote {
	position: relative;
	max-width: 350px;
	text-align: left;
	font-family: var(--font-monospace);
	font-size: 1.5rem;
	color: var(--yellow);
	quotes: "“" "”";
	isolation: isolate;
	margin: 1.5rem 4rem;
}

blockquote .highlight {
	position: relative;
	color: var(--orange);
	font-weight: 700;
	text-decoration: underline;
}
blockquote::before {
	position: absolute;
	transform: translate(-2rem, -0.5rem);
	color: var(--orange);
	content: open-quote;
	font-size: 4em;
	line-height: 0.1em;
	z-index: -1;
  }
blockquote::after {
	position: absolute;
	transform: translate(0, 2.5rem);
	color: var(--orange);
	content: close-quote;
	font-size: 4em;
	line-height: 0.1em;
	z-index: -1;
}

.bt-home-container {
	padding: 8rem 2rem;
}

.bt-home {
	margin: 0.5rem;
}

.borders {
	position: absolute;
	top: -30%;
	left: -10%;
	border: 5px solid var(--green);
	width: 120%;
	height: 160%;
	rotate: 10deg;
	z-index: -2;
}

.borders:nth-child(2) {
	rotate: -5deg;
	border-width: 4px;
}

.scroll-down {
	display: block;
	width: fit-content;
	color: var(--white);
	text-decoration: none;
	font-size: 1.3rem;
	margin: auto;
	margin-bottom: 10.5vh;
}

.scroll-down img {
	position: relative;
	top: 0;
	display: block;
	width: 2rem;
	margin: 1rem auto;
	transition: 250ms;
}

.scroll-down:hover img {
	top: 0.5rem;
}

main section {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	padding-bottom: 5rem;
}

section .section-content {
	box-sizing: border-box;
	width: 70%;
	padding: 0 5rem;
}

section .section-aside {
	box-sizing: border-box;
	width: 30%;
	display: flex;
	justify-content: center;
}

.section-aside img {
	max-width: 220px;
}