@import url('reset.css');

/* Not sure that this CSS import is needed */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

/* Remote server hosted fonts */
@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Brawler:ital,wght@0,400;0,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jura:ital,wght@0,400;0,700&display=swap');

/****
Code from Basic.css https://vladocar.github.io/Basic.css/
****/

/****
  Box-sizing needed for responsive design. Ensures that padding and border are included in the total width and height of all elements.
****/
* { box-sizing: border-box; }

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

/* Clickable items get the click-pointer cursor */
*[onclick] {
	cursor: pointer;
}

/* Rounded Corners */

/* pre, code, button { border-radius: var(--rc); } */

/* Forms */
button, input[type=submit], input[type=reset], input[type="button"] { 
	-webkit-appearance: none; 
	font-size: 1em; 
	display: inline-block; 
	border: 0; 
	margin: 4px;  
	padding: 0.6em; 
	cursor: pointer; 
	text-align: center;
}
/* button:hover, button:focus, input:hover, textarea:hover, select:hover { opacity: 0.8; } */

/****
 Text styles
****/

body, iframe, textarea {
    margin: 0;
    font-family: var(--sans);
    font-weight: 400;
    font-style: normal;
    font-size: 14pt;
	line-height: 1.35;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    /* background-color: var(--c3); */
    /* color: var(--c4); */
}

i.fa-linkedin { color: gray; }
i.fa-linkedin:hover { color: var(--linkedin-blue); }

/****
  Headers, paragraphs, and text
****/

h1, h2, h3 {
	font-family: var(--serif);
	-webkit-hyphens: none;
	hyphens: none;
	margin: 0.6em 0;
	line-height: 1.2;
}

h1 {
	font-size: 26pt;
	text-align: center;
	margin-top: 26pt;
}

h2 { font-size: 17pt; }

h3 { font-size: 14pt; }

pre { font: 1em/1.6 var(--mono); background: var(--c2); padding: 1em; overflow: auto }

code { font: 1em/1.6 var(--mono); }

blockquote { border-left: 5px solid var(--pale-color); padding: 1em 1.5em; margin: 0 }

hr { border: 0; border-bottom: 1px solid var(--strong-color) }

p { margin: 6pt 0pt; }

ol, ul { list-style-position: inside; }

figcaption p { 
	font-size: 90%;
	margin-top: 0;
}

/* Table */

table { border-collapse: collapse; border-spacing: 0; margin:1em 0 }

th, td { text-align: left; vertical-align: top; border: 1px solid; padding: 0.4em }

thead,tfoot { background: var(--c2) }

/*
span.para_head {
	font-weight: bold;
}
*/

mark {
	background-color: inherit;
	color: orange;
	text-shadow: 1px 1px var(--border-color);
}

/*
main ul {
	margin-left: 1.3em;
	margin-top: .5rem;
}
*/

/****
  Company name and logo in top nav bar.
****/

/*
div.logo-type {
	display: inline-block;
	width: 13rem;
	font-size: 18pt;
	margin-top: 1rem;
}
*/

/* Logo only appears when screen-width is wide enough.
header img {
	display: none;
}
*/
/*
a:hover div.logo-type img {
	content: url(/images/scribble_final-01_color_with_white.png);
}
*/

/****
  When the screen is wide enough, company name gets larger and includes logo.
****/

@media only screen and (min-width: 500px) {
	/*
	div.logo-type {
		width: 21rem;
		font-size: 24pt;
		margin-top: 4pt;
	}
	div.logo-type img {
		vertical-align: middle;
		height: var(--logo-height);
		width: auto;
	}
	*/
	/* header { padding: 1rem 2rem 2rem 2rem; } */
	/* header img { display: inline-block; } */
	/* nav button { font-size: 24pt; } /* Menu button becomes bigger tap target. */
}

/****
  When the screen is wide enough, adjust layout.
****

@media only screen and (min-width: 680px) {
	/* Asides and figures float right 
	aside, figure {
		max-width: 22rem;
		float: right;
		margin: 1rem;
	}
	#selected_clients { margin-top: 0; }
	.doormat { width: 48%; } /* Doormats display side-by-side
	.dek { 	
		margin-top: 7rem;
		font-size: 20pt;
	}
	.splash { height: 22rem; }
	h1 { 
		font-size: 22pt; 
		margin-right: 5rem;
		margin-left: 5rem;
	}
	h2 {font-size: 18pt; }
}

/****
  When the screen is wide enough, show nav menu as permanent horizontal list.
****

@media only screen and (min-width: 960px) {
	nav button { display: none; }
	nav ul {
		display: inline-block;
 		padding: none;
 		border: none;
		box-shadow: none;
		font-size: 18pt;
		margin-top: 1pt;
		text-align: right;
		width: 38rem;
	}
	nav li {
		display: inline-block;
		margin-left: .5rem;
	}
	nav li:first-child { margin-left: 0 }
}
/* Reduce width and position of menu when its font size is smaller. */
@media only screen and (min-width: 960px) and (any-hover: hover) {
/*
	nav ul {
		width: 32rem;
		margin-top: 3pt;
	}
*/
}

/****
  When a mouse-pointer is present, adjust clickable items.
***

@media only screen and (any-hover: hover) {
	.doormat {
		box-shadow: none;
		background: none;
	}
	.doormat:hover {
		box-shadow: 2px 2px 4px rgba(0, 0, 0, .25);
		background-color: var(--pale-color);
	}
	.doormat:hover h2 {
		color: var(--strong-color);
		opacity: 1;
		border-bottom: 3px solid var(--complement-color);
	}
	nav button { font-size: 18pt; }
	nav ul {
		font-size: 15pt;
	}
}
*/