/**
 * Variables
 */
:root {
	--pico-block-spacing-vertical: 2rem;
	--pico-block-spacing-horizontal: 2rem;
	--pico-border-radius: .75rem;
	--pico-colorful-gradient: linear-gradient(to right, #799fec 25%, #da5c79 75%);
	--pico-h1-color: #F0F0FB;
	--pico-h2-color: #F0F0FB;
	--pico-h3-color: #F0F0FB;
	--pico-h4-color: #F0F0FB;
	--pico-h5-color: #F0F0FB;
	--pico-h6-color: #F0F0FB;
	--pico-font-family: "Inter", sans-serif;
}

/**
 * Html
 */
html {
	overflow-y: scroll;
	scroll-behavior: smooth;
	scroll-padding-top: var(--pico-block-spacing-vertical);
}

/*
 * Elements
 */
@media (min-width: 1280px) {
	.container {
		max-width: 1200px;
	}
}

@media (min-width: 768px) {
	.hero.container,
	#generator.container {
		max-width: 950px;
	}
}

body > header,
main > * > header,
main > * > footer,
main > header {
	text-align: center;
}

main > div > * > header {
	margin-bottom: var(--pico-block-spacing-vertical);
}

main > section,
main > article {
	margin-top: calc(var(--pico-block-spacing-vertical) * 2);
}

body > header {
	margin-top: var(--pico-block-spacing-vertical);
	padding-bottom: 0;
}

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

[role="button"], 
[type="button"], 
[type="file"]::file-selector-button, 
[type="reset"], 
[type="submit"], 
button {
	font-size: .875rem;
	font-weight: 600;
	border-radius: 8rem;
}

.card {
	margin-bottom: var(--pico-block-spacing-vertical);
	padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
	border-radius: var(--pico-border-radius);
	background: var(--pico-card-background-color);
	box-shadow: var(--pico-card-box-shadow);
}

.card > header {
	margin-top: calc(var(--pico-block-spacing-vertical) * -1);
	margin-bottom: var(--pico-block-spacing-vertical);
	border-bottom: var(--pico-border-width) solid var(--pico-card-border-color);
	border-top-right-radius: var(--pico-border-radius);
	border-top-left-radius: var(--pico-border-radius);
	margin-right: calc(var(--pico-block-spacing-horizontal) * -1);
	margin-left: calc(var(--pico-block-spacing-horizontal) * -1);
	padding: calc(var(--pico-block-spacing-vertical) * .66) var(--pico-block-spacing-horizontal);
	background-color: var(--pico-card-sectioning-background-color);
}

.card > footer {
	margin-top: var(--pico-block-spacing-vertical);
	margin-bottom: calc(var(--pico-block-spacing-vertical) * -1);
	border-top: var(--pico-border-width) solid var(--pico-card-border-color);
	border-bottom-right-radius: var(--pico-border-radius);
	border-bottom-left-radius: var(--pico-border-radius);
	margin-right: calc(var(--pico-block-spacing-horizontal) * -1);
	margin-left: calc(var(--pico-block-spacing-horizontal) * -1);
	padding: calc(var(--pico-block-spacing-vertical) * .66) var(--pico-block-spacing-horizontal);
	background-color: var(--pico-card-sectioning-background-color);
}

.card > header > *:last-child,
.card > footer > *:last-child {
	margin-bottom: 0;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.logo {
	font-size: 1.5rem;
	line-height: 1.175;
	color: var(--pico-h3-color);
	font-weight: 700;
	text-decoration: none;
}

main > header > h1 {
	line-height: inherit;
	background: linear-gradient(90deg, #21E299, #2384fc);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

@media (min-width: 576px) {
	main > header > h1 {
		font-size: 2.5rem;
	}
}

.hero .hero-meta {
	font-size: .875rem;
	color: var(--pico-muted-color);
}

.hero-cta a {
	margin-top: var(--pico-typography-spacing-vertical);
	text-decoration: none;
}

.intro-answers p:last-child {
	margin-bottom: 0;
}

.freq-info section {
	margin-bottom: 0;
}

.generator > .grid {
	margin-top: var(--pico-typography-spacing-vertical);
}

.hz-display {
	font-weight: 600;
}

#timerDisplay {
	display: block;
	color: var(--pico-muted-color);
}

#visualizer {
	width: 100%;
	height: 100px;
	margin-bottom: calc(var(--pico-grid-column-gap) * 2);
	background-color: #1c212c;
	border-radius: var(--pico-border-radius);
}

.displays {
	margin-bottom: calc(var(--pico-grid-column-gap) * 2);
	text-align: center;
}

.presets {
	margin-bottom: var(--pico-grid-column-gap);
}

.presets:first-of-type {
	margin-top: calc(var(--pico-grid-column-gap) * 2);
}

.presets button {
	padding: calc(var(--pico-form-element-spacing-vertical) / 2) calc(var(--pico-form-element-spacing-horizontal) / 2);
	text-transform: none;
}

.presets button span {
	display:block;
	font-size: .67rem;
	opacity: 0.7;
}

.about a {
	text-transform: none;
}

.support {
	margin-top: calc(var(--pico-form-element-spacing-vertical) * 2);
	text-align: center;
}

.support p:last-child {
	margin-bottom: 0;
}

@media only screen and (min-width: 768px) {
	
	.justify-self-start {
		justify-self: start;
	}

	.justify-self-center {
		justify-self: center;
	}

	.justify-self-end {
		justify-self: end;
	}
	
}

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

.footer-links a {
	text-decoration: none;
	font-size: .875rem;
}

body > footer {
	margin-top: calc(var(--pico-form-element-spacing-vertical) * 2);
	padding-top: calc(var(--pico-form-element-spacing-vertical) * 2);
	border-top: 1px solid var(--pico-muted-border-color);
}

.site-info {
	margin-top: calc(var(--pico-form-element-spacing-vertical) * 4);
}

.site-info p,
.site-info a {
	font-size: .765rem!important;
}

.site-info a {
	text-decoration: none;
}