html,
body,
h1 {
	font-family: "Noto Sans", sans-serif;
}

html {
	background-color: var(--grey);
}

body {
	background: 
		linear-gradient(rgba(255,255,255,0.65), rgba(255,255,255,0.65)), /* darken */
		url('img/squares-bg.jpg') center/cover no-repeat;
	background-attachment: fixed;
}

:root {
	--gap: 21px;
	--green: #2d6a4f;
	--grey: #3a3844;
	--pink: #a92a86;
	--purple: #332d68;
	--red: #b02a37;
	--wa-color-danger-fill-loud: #b02a37;
	--wa-color-success-fill-loud: #2d6a4f;

	@media (max-width: 767px) {
		--gap: 12px;
	}
}

.folder-open  {
	display: block;
}

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

.icon {
	color: var(--pink);
}

body {
	color: var(--purple);
	display: flex;
	flex-direction: column;
}

header,
footer {
	background-color: rgba(255,255,255,.15);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

header {
	border-bottom: 1px solid rgba(255,255,255,.30);
	padding: var(--gap);
	position: fixed;
	text-align: center;
	top: 0;
	width: 100%;
	z-index: 9;
	
	h1 {
		margin-bottom: .39rem;
		
		@media (max-width: 767px) {
			font-size: 1.8rem;
		}
	}
	
	@media (max-width: 767px) {
		p {
			font-size: .85rem;
			text-wrap: balance;
		}	
	}
}

main {
	display: grid;
	place-items: center;
	flex: 1;
	margin-right: var(--gap);
	margin-left: var(--gap);
	padding-top: 126px;

			
	@media (max-width: 767px) {
		padding-top: 144px;
	}
}

#steps {
	display: flex;
	gap: var(--gap);
	flex-direction: column;
	justify-content: center;
	margin-right: auto;
	margin-left: auto;
	max-width: 1170px;
	position: relative;
	width: 100%;
	
	@media (max-width: 767px) {
		flex-direction: column;	
	}
}



	#upload {
		text-align: center;

		h4 {
			margin-bottom: 0;
			padding-bottom: 15px;
		}
	}



	#col-2 {
		flex: 1;
		padding-bottom: var(--gap);
	}

	.card,
	.callout {
		background: rgba(255, 255, 255, 0.39);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		
		.icon-lrg {
			display: block;
			font-size: 3rem;
			margin-right: auto;
			margin-bottom: .52rem;
			margin-left: auto;
			text-align: center;
		}
	}
	
	wa-tree-item i + span {
		font-size: .9rem;
		margin-left: 3px;
	}

.result-title {
	display: inline-block;
	margin: 0 .33rem;
}

.kb {
	font-size: .58rem;
	margin-left: .33rem;
	opacity: .76;
}

.drop-zone {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 180px;
	transition: all .3s ease; cursor:pointer;
}
.drop-zone.drag-over{background:var(--wa-color-brand-50); border-color:var(--wa-color-brand-600);} 

.toast {
	position:fixed;
	inset-inline:0;
	display:flex;
	justify-content: right;
	z-index:9999;
	right: var(--gap);
	bottom: var(--gap);
} 
.toast > wa-callout { box-shadow: var(--wa-shadow-3); }

.results-exist {
	main {
		padding-top: 147px;

		@media (max-width: 767px) {
			display: block; 
			padding-top: 159px;
		}
	}

	#upload {
		margin-bottom: var(--gap);
	}
}

footer {
	border-top: 1px solid rgba(255,255,255,.30);
	display: flex;
	justify-content: space-between;
	font-size: .67rem;
	padding: .18rem .69rem;
	
	p {
		line-height: 1.56;
	}
	
	a {
		color: var(--purple);
	}
	
	@media (max-width: 767px) {
		flex-direction: column;
		text-align: center;
	}
}