h1,
h2,
h3,
p,
a,
button,
textarea,
span,
ul,
label,
footer {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
		Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	margin: 0px;
	padding: 0px;
}

body {
	background-color: #f6f7fb;
}

/* Small & medium screens */
@media screen and (max-width: 654px) {
	.gridContainer {
		display: grid;
		gap: 16px 0px;
		grid-template-columns: 8px 0px 1fr 1fr 96px 0px 8px;
		grid-template-rows: 1em auto auto 46px auto;
	}

	.characterCountLabel {
		font-size: 18px;
	}

	.numberCount {
		font-size: 48px;
		justify-content: left;
	}

	.pageDescription {
		width: 100%;
	}

	.textAreaBox {
		height: 200px !important;
	}

	.mobileSticky {
		position: -webkit-sticky;
		position: sticky;
		top: 16px;
	}

	.stickyBackground {
		background-color: #f6f7fb;
	}
}

/* Big screens */
@media screen and (min-width: 655px) {
	.gridContainer {
		display: grid;
		grid-gap: 24px;
		grid-template-columns: 1fr 1fr 1fr 1fr 216px 1fr 1fr;
		grid-template-rows: 3em auto auto 36px auto;
	}

	.characterCountLabel {
		font-size: 36px;
	}

	.numberCount {
		font-size: 48px;
		justify-content: left;
	}

	.pageDescription {
		width: 80%;
	}
}

.mainTitle {
	grid-column: 2 / span 5;
	grid-row-start: 1;

	font-style: normal;
	font-weight: 900;
	line-height: 36px;
	font-size: 36px;
	letter-spacing: 0.03em;

	color: #262626;
}

.pageDescription {
	grid-column: 3 / span 3;
	grid-row-start: 2;

	display: grid;
	align-items: center;
	justify-items: center;

	line-height: 26px;
	font-size: 18px;

	color: #262626;
}

.characterCountLabel {
	grid-column-start: 3;
	grid-row-start: 4;

	display: grid;
	align-items: center;

	font-style: normal;
	font-weight: 900;
	line-height: 18px;

	letter-spacing: 0.03em;

	color: #262626;
}

.numberCount {
	grid-column-start: 4;
	grid-row-start: 4;
	display: grid;
	align-items: center;

	font-feature-settings: 'tnum';
	font-variant-numeric: slashed-zero !important;

	font-weight: bold;
	line-height: 29px;

	letter-spacing: 0.03em;

	color: #2445c6;
}

.textBoxLabel {
	font-weight: 500;
	color: #262626;

	font-size: 16px;
	padding: 4px 24px 4px 24px;
	border-radius: 6px 6px 0px 0px;
	background-color: #e5e5e5;
	border: 1px #e5e5e5 solid;
	line-height: 160%;
	margin: 0px;
}

.textAreaStyle {
	grid-column: 1 / span 12;
	grid-row-start: 1;
}

textarea::placeholder {
	color: #838383;
	font-weight: 400;
}

/* Styling for the text area itself */
.textAreaBox {
	width: 100%;
	resize: vertical;
	height: auto;

	padding: 16px;
	font-size: 18px;
	line-height: 130%;

	color: #262626;

	background: #ffffff;
	border: 2px solid #e5e5e5;
	box-sizing: border-box;
	box-shadow: 0px 12px 16px rgba(229, 229, 229, 0.9);
}

.featureGroup {
	grid-column-start: 5;
	grid-row-start: 3;
}

.featureTitle {
	font-weight: bold;
	font-size: 18px;
	letter-spacing: 0.03em;
	text-decoration-line: underline;
	padding-bottom: 2px;

	color: #545454;
}

.featureList {
	padding-left: 16px;

	line-height: 110%;
	font-size: 16px;
	letter-spacing: 0.005em;
	text-transform: uppercase;

	color: #545454;
}

.copyText {
	grid-column-start: 5;
	grid-row-start: 3;
}

/* Styling for button */
.copyTextLayout {
	grid-column: 5 / 6;

	/* Text styling */
	font-size: 16px;
	text-align: center;
	color: #ffffff;
	margin-bottom: 20px;

	/* Button styling */
	background: #2445c6;
	border: 1px solid #2445c6;
	border-radius: 4px;

	height: 100%;
	width: 100%;
	padding: 5px;
}

a.download:link, a.download:active, a.download:hover, a.download:visited {
	/* Text styling */
	font-size: 16px;
	text-align: center;
	color: #ffffff;
	margin-bottom: 20px;

	/* Button styling */
	background: #2445c6;
	border: 1px solid #2445c6;
	border-radius: 4px;

	height: 100%;
	width: 100%;
}

.siteFooter {
	grid-column: 3 / span 3;
	grid-row-start: 7;

	line-height: 200%;
	font-size: 18px;

	color: #262626;
}

.platformThanks {
	grid-column: 3 / 2;
	grid-row-start: 7;
}

.thanksStyling {
	font-weight: bold;
}

a:link,
a:active,
a:hover,
a:visited {
	color: #262626;
	text-decoration: none;
	border-bottom: 3px #2445c6 solid;
}

@media only screen and (max-width: 576px) {
	h1.mainTitle {
	  font-size: 16px;
  }
  }

  button#downloadbutton a {
	border-bottom: none !important;
    grid-column: 5 / 6;
    font-size: 14px;
    text-align: center;
    color: #ffffff;
    margin-bottom: 20px;
    background: #2445c6;
    border: 1px solid #2445c6;
    border-radius: 4px;
    height: 100%;
    width: 216px;
	padding: 10px;
	margin: 0 auto;
}

button#downloadbutton {
	margin: 0;
    padding: 0;
    border: none;
    font: inherit;
    color: inherit;
	background: none;
	width: 100%;
}