body { 
	padding: 40px;
	background-color: var(--color-bg-default); 
        text-align: center;
}

h2 { 
	font-size: 28px; 
	font-weight: bold;
        text-align: center;
}

section {
	margin-top: 40px;
        text-align: center;
}

div.logoholder  {
	background-image:url("Townsite Tech Logo_Black-noBG.png");
	background-size: contain;
	background-repeat: no-repeat;
	min-height: 150px;
	min-width: 400px;
    background-position: center;
        

}

.theme_space_neoskeuo {
	--space-3xs: 2px;
	--space-2xs: 4px;
	--space-xs: 8px;
	--space-s: 12px;
	--space-m: 16px;
	--space-l: 20px;
	--space-xl: 24px;
	--space-2xl: 32px;
	--space-3xl: 40px;
	--space-4xl: 48px;
	--space-5xl: 72px;
	--space-6xl: 96px;
}

.theme { 
	--radius-default: 16px;
	--radius-s: 12px;
	--radius-xs: 6px;
}

.theme_font_neoskeuo {
	--font-primary: 'Montserrat', 'Helvetica', 'Helvetica Neue', 'Segoe UI', 'Arial', sans-serif;
	--font-digital: 'Digital', monospace;
	
	font-family: var(--font-primary);
}

.theme_color_neoskeuo {
	
	--color-bg-default: rgba(238,240,245,1);
	
	--color-typo-primary: rgba(48,52,84, 1);
	--color-typo-link: $color-base-project;
	
	--color-control-bg-default: rgba(240,242,247,1);
	--color-control-bg-action: hsla(220, 100%, 54%, 1);
	
	--color-shadow: 12,13,18;
	--color-light: 255, 255, 255;
	--color-glow: 0,150,255;
}

.button {
	/* display: inline-block; */
	display: flex;

	-webkit-appearance: none;
	appearance: none;
	padding: var(--space-xl) var(--space-4xl);
	font-size: 18px;
	font-family: var(--font-primary);
	color: var(--color-typo-primary);
	border: none;
	border-radius: var(--radius-default);
	background-color: var(--color-bg-default);
	cursor: default;
	outline: none;
	text-shadow: 
		0 -1px 0 rgba( var(--color-shadow), 0.08 ),
		0 1px 0 rgba( var(--color-light), 1 );
	box-shadow: 
		inset 1px 1px 1px rgba( var(--color-light), 1 ),
		-2px -2px 2px rgba( var(--color-light), 0.9),
		-4px -4px 6px rgba( var(--color-light), 0.9),
		-8px -8px 16px rgba( var(--color-light), 0.9),
		-12px -12px 24px rgba( var(--color-light), 0.9),
		inset -1px -1px 1px rgba( var(--color-shadow), 0.06 ),
		2px 2px 2px rgba( var(--color-shadow), 0.08),
		4px 4px 6px rgba( var(--color-shadow), 0.08),
		8px 8px 16px rgba( var(--color-shadow), 0.08),
		12px 12px 24px rgba( var(--color-shadow), 0.08);
	transition: 
		color 0.3s,
		text-shadow 0.3s,
		box-shadow 0.6s;
		
	
}



.embossed {
	display: flexbox;

	-webkit-appearance: none;
	appearance: none;
	padding: var(--space-xl) var(--space-4xl);
	font-size: 18px;
	font-family: var(--font-primary);
	color: var(--color-typo-primary);
	border: none;
	border-radius: var(--radius-default);
	background-color: var(--color-bg-default);
	cursor: default;
	outline: none;
	color: var(--color-typo-primary);
	background: var(--color-control-bg-default);
	box-shadow:
		inset 1px 1px 1px rgba( var(--color-light), 0.4 ),
		inset -1px -1px 1px rgba( var(--color-shadow), 0.04 ),
		
		inset 0 0 0 2px var(--color-bg-default),
		
		inset -2px -2px 2px 2px rgba( var(--color-light), 0.4), 
		inset -4px -4px 4px 2px rgba( var(--color-light), 0.4),
		-1px -1px 4px 0px rgba( var(--color-light), 0.4), 
		-2px -2px 8px 0px rgba( var(--color-light), 0.4),

		inset 2px 2px 2px 2px rgba( var(--color-shadow), 0.04),
		inset 4px 4px 4px 2px rgba( var(--color-shadow), 0.04),
		1px 1px 4px 0px rgba( var(--color-shadow), 0.04), 
		2px 2px 8px 0px rgba( var(--color-shadow), 0.04)
		;

	}
	
	
@font-face {
    font-family: 'Digital';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1329536/subset-Digital-7Mono.woff2') format('woff2'),
        url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1329536/subset-Digital-7Mono.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,400i,600,700,900&display=swap');