@charset "UTF-8";

/*
   BillAsh_net.css
	v1.0 2021-01-04
	v1.1 2021-01-04 Compress graphics
*/

/* Webfont: ArdelaEdgeX03-Black */
@font-face {
  font-family: 'Ardela Edge X03 Black';
  src: url('ArdelaEdgeX03-Black.woff') format('woff'), /* Modern Browsers */
       url('ArdelaEdgeX03-Black.ttf') format('truetype'), /* Safari, Android, iOS */
       url('ArdelaEdgeX03-Black.svg#ArdelaEdgeX03-Black') format('svg'); /* Legacy iOS */
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

/* Webfont: ArdelaEdgeX03-BlackItalic */
@font-face {
  font-family: 'Ardela Edge X03 Black';
  src: url('ArdelaEdgeX03-BlackItalic.woff') format('woff'), /* Modern Browsers */
       url('ArdelaEdgeX03-BlackItalic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('ArdelaEdgeX03-BlackItalic.svg#ArdelaEdgeX03-BlackItalic') format('svg'); /* Legacy iOS */
  font-style: italic;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

/* CSS RESET */
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed, 
  figure, figcaption, footer, header, hgroup, 
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	box-sizing: border-box; 
  }

  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure, 
  footer, header, hgroup, main, mark, menu, nav, 
  section, summary, time {
	display: block;
  }

  body {
	line-height: 1;
  }

  /* ol, ul {
	list-style: none;
  } */

  blockquote, q {
	quotes: none;
  }

  blockquote:before, blockquote:after,
  q:before, q:after {
	content: '';
	content: none;
  }

  table {
	border-collapse: collapse;
	border-spacing: 0;
  }
/* END CSS RESET */


/* VARIABLES */

  :root { 

	/* Color Scheme 1*/
	--main-bg-color-low: #eeeeee;
	--main-bg-color-mid: #ffffff; 
	--main-bg-color-high: #ffffbb;
	--main-text-color-low: #335b7b;
	--main-text-color-mid: #005090; 
	--main-text-color-high: #0000ed; 
	--alt-bg-color-low: #ccaa99; 
	--alt-bg-color-mid: #ffccbb;
	--alt-bg-color-high: #fff7e6; 
	--contrast-bg-color-low: #c0c0c0;
	--contrast-bg-color-mid: #dddddd;
	--contrast-bg-color-high: #f0e8e0;
	--contrast-text-color: var(--main-bg-color-mid);
	--splash-color: #00aaaa;
	--splash-color-high: #aaffdd;

	/* Color Scheme 2 */
	--main-bg-color-low: #eeeeee;
	--main-bg-color-mid: #ffffff; 
	--main-bg-color-high: #aaffdd;
	--main-text-color-low: #335b7b;
	--main-text-color-mid: #005090; 
	--main-text-color-high: #0000ed; 
	--alt-bg-color-low: #5588cc; 
	--alt-bg-color-mid: #88b8e8; 
	--alt-bg-color-high: #aaccff; 
	--contrast-bg-color-low: #c0c0c0;
	--contrast-bg-color-mid: #dddddd;
	--contrast-bg-color-high: #f0e8e0;
	--contrast-text-color: var(--main-bg-color-mid);
	--splash-color: #009999;
	--splash-color-high: #aaffdd;
	--shadow-mid: rgba(51,91,123,0.8);
	--shadow-high: rgba(51,91,123,1);
	--shadow-size: 0.4rem 0.4rem 0.2rem;

	/* Fonts */
	--heading-font: "Ardela Edge X03 Black", "Verdana-Bold", "Futura-CondensedExtraBold", "Arial-BoldMT", "Arial Black", "Arial-Black", "Roboto-Black", sans-serif;
	--body-font: Verdana, Arial, HelveticaNeue, Helvetica, sans-serif;

	/* Content margins */
	--content-first-edge: 2rem;
	--content-second-edge: calc(100% - 2rem); 
	
	/* Animation timings */
	--sequence-time: 4s;
	--header-text-time: 4s;
  }
/* END VARIABLES */


/* ANIMATIONS */

@keyframes bannertext {
  0% {
	color: var(--main-text-color-mid);
	letter-spacing: normal;
	opacity: 0;
  }
  20% {
	opacity: 0.25;
  }
  40% {
	color: var(--main-text-color-high);
	letter-spacing: 0.05em; 
	opacity: 0.5;
  }
  60% {
	opacity: 0.75;
  }
  80% {
	color: var(--main-text-color-mid);
	opacity: 1;
  }
  100% {
	letter-spacing: normal;
  }
}

@keyframes tagline {
  0% {
	color: var(--main-text-color-mid);
	letter-spacing: normal;
	opacity: 0;
  }
  40% {
	color: var(--main-text-color-mid);
	letter-spacing: normal;
	opacity: 0.25;
  }
  60% {
	opacity: 0.5;
  }
  80% {
	color: var(--main-text-color-high);
	letter-spacing: 0.03em;
	opacity: 0.75;
  }
  100% {
	color: var(--main-text-color-mid);
	letter-spacing: normal;
	opacity: 1;
  }
}

@keyframes fade-in01 {
  0% {
	opacity: 0;
  }
  20% {
	opacity: 1;
  }
  100% {
	opacity: 1;
  }
}

@keyframes fade-in02 {
  0% {
	opacity: 0;
  }
  10% {
	opacity: 0;
  }
  40% {
	opacity: 1;
  }
  100% {
	opacity: 1;
  }
}

@keyframes fade-in03 {
  0% {
	opacity: 0;
  }
  20% {
	opacity: 0;
  }
  60% {
	opacity: 1;
  }
  100% {
	opacity: 1;
  }
}

@keyframes fade-in04 {
  0% {
	opacity: 0;
  }
  25% {
	opacity: 0;
  }
  80% {
	opacity: 1;
  }
  100% {
	opacity: 1;
  }
}

@keyframes fade-in05 {
  0% {
	opacity: 0;
  }
  40% {
	opacity: 0;
  }
  100% {
	opacity: 1;
  }
}

/* END ANIMATIONS */


/* STYLES */

/* Up to 36rem (576px): Portrait phones and defaults */

  body {
	color: var(--main-text-color-mid);
	background-color: var(--main-bg-color-mid); 
  }

  a {
	color: var(--main-text-color-high);
	border-bottom: 0.2rem solid var(--main-bg-color-high);
	text-decoration: none;
  }

  a .cover:hover, a .website:hover {
	box-shadow: var(--shadow-size) var(--splash-color);
  }

  main a:hover {
	background-color: var(--main-bg-color-high);
	color: var(--main-text-color-high);
	padding: 0.2em 0;
	border-bottom: none;
  }

  main .quiet a {
	border-bottom: none;
  }

  main .quiet a:hover {
	background-color: var(--main-bg-color-mid);
  }

  main a:active {
	background-color: var(--main-text-color-low);
	color: var(--main-bg-color-mid);
	border: 0.5rem 0 solid var(--main-bg-color-mid);
  }

  em {
    	font-style: italic;
  }

  footer {
	min-height: 2em;
	padding-top: 0.6em;
	padding-bottom: 0.6em;
	color: var(--main-bg-color-mid); 
	background-color: var(--splash-color-high); 
	background-image: linear-gradient(to right, var(--alt-bg-color-mid), var(--splash-color) var(--content-first-edge), 
	var(--splash-color) var(--content-second-edge), var(--alt-bg-color-mid));
/*	animation-name: fade-in04;
	animation-duration: var(--sequence-time);
*/  }

  footer p {
	font-size: 0.6em;
	text-align: center;
  }

  footer, header, main {
	padding-left: var(--content-first-edge);
	padding-right: var(--content-first-edge);
  }


  h1 {
	font-size: 2.5rem;
	font-family: var(--body-font);
	font-weight: bold;
	color: var(--splash-color); 
	padding-bottom: 0.5rem;
/*	animation-name: fade-in01;
	animation-duration: var(--sequence-time);
*/  }

  h2 {
	font-size: 1.5em;
	font-family: var(--heading-font);
	font-style: italic;
	margin: 1em 0 0.5em 0;
	border-bottom: var(--splash-color) solid 0.15rem;
/*	animation-name: fade-in02;
	animation-duration: var(--sequence-time);
*/  }
  
  h3 {
	clear: both;
	color: var(--splash-color);
	font-size: 1.3em;
	font-family: var(--heading-font);
	padding: 1em 0 0.5em 0;
/*	animation-name: fade-in03;
	animation-duration: var(--sequence-time);
*/  }

  header {
	top: 0;
	width: 100%;
	right: 0;
	padding-top: 1em;
	padding-bottom: 1em;
	background-color: var(--contrast-bg-color-mid); 
	color: var(--main-text-color-mid); 
	background-image: linear-gradient(to right, var(--alt-bg-color-mid), var(--contrast-bg-color-mid) var(--content-first-edge), 
		var(--contrast-bg-color-mid) var(--content-second-edge), var(--alt-bg-color-mid));
/*	animation-name: fade-in01; /* Make the hamburger menu appear quickly on small devices */
/*	animation-duration: var(--sequence-time);
*/  }
  
  html {
    	scroll-behavior: smooth; 
	font-kerning: normal;
  }

  img {
/*	animation-name: fade-in04;
	animation-duration: 0s /* var(--sequence-time) */ ; 
  }

  main {
	padding-top: 2em;
	padding-bottom: 1em; 
	background-image: linear-gradient(to right, var(--alt-bg-color-mid), var(--main-bg-color-mid) var(--content-first-edge), 
		var(--main-bg-color-mid) var(--content-second-edge), var(--alt-bg-color-mid));
  }

  nav {
	line-height: 1.8em;
	top: 100px; 
	width: 100%;
	color: var(--contrast-text-color);
  }

  nav:hover .navlink {
	display: block;
  }

  nav a {
	text-decoration: none;
	border-bottom: none;
  }
  
  nav a:hover {

  }

  p, li {
	font-family: var(--body-font); 
	line-height: 1.5;
	padding-bottom: 0.5em;
/*	animation-name: fade-in03;
	animation-duration: var(--sequence-time);
*/  }

  nav p {
/*	animation-duration: 0.35s; /* Snappy menu response on small devices */
  }

  ul {
	margin-left: 1.5em;
	padding: 0.5em 0 0.5em 0.5em;
  }

  .bannertext {
    	font-family: var(--heading-font);
    	font-style: italic;
    	font-size: 4rem;
    	line-height: 4rem;
    	margin: 0;
    	padding: 0;
  }

  .between-0-960 {
	display: block;
  }
  
  .between-960-5000 {
	display: none;
  }

  .block500 {
	width: auto;
	max-width: 500px;
  }

  .bold {
  	font-weight: bold;
  }

  .border {
	height: 0.2em;
	background-image: linear-gradient(to right, var(--alt-bg-color-mid), var(--splash-color) var(--content-first-edge), 
		var(--splash-color) var(--content-second-edge), var(--alt-bg-color-mid));
  }

  .border2 {
	height: 0.3em;
	background-image: linear-gradient(to right, var(--alt-bg-color-mid), var(--contrast-bg-color-low) var(--content-first-edge), 
		var(--contrast-bg-color-low) var(--content-second-edge), var(--alt-bg-color-mid));
  }

  .burger {
	background-color: var(--main-text-color-mid);
	width: 100%;
	height: 16%;
	margin: 0;
  }

  .burger-condiment {
	width: 100%;
	height: 16%;
	margin: 0;
  }

  .burger-box {
	width: 30px;
	height: 30px;
	margin: 0 0 0 1em;
  }

  .caption {
      	font-size: 80%;
      	color: var(--alt-text-color);
  }

  .center {
	text-align: center;
  }

  .columns {
	column-count: 1;
	column-width: 100%;
  }

  .cover {
	max-width: 150px;
	width: calc((99% - 2rem) / 2);
  }

  .ed {
	font-style: italic;
  }

  .h1b {
	line-height: 1.1;
	padding-bottom: 0.2em;
	margin-bottom: 1em;
	break-after: avoid;
	font-size: 1.8em; 
	font-family: var(--heading-font);
	font-style: italic;
	font-weight: normal;
	border-bottom: var(--splash-color) solid 0.2em;
  }

  .icon {
	width: 25%;
	max-width: 8em;
  }

  .left {
	float: left;
	margin-right: 0.5rem;
}

  .link-up {
	font-family: var(--heading-font);
	font-style: italic;
    	font-size: 80%;
	text-align: right;
  }

  .logo {
	max-width: calc(99% - 4rem);
  }

  .navlink {
	display: none;
	padding: 0.25rem;
	margin: 0.25rem;
	background-color: var(--contrast-bg-color-mid);
	color: var(--main-text-color-low);
	font-family: var(--heading-font);
	font-size: 100%;
	font-style: italic; 
  }

  .navlink:hover {
	background-color: var(--contrast-bg-color-high);
	color: var(--main-text-color-mid);  
  }

  .no-break {
	break-inside: avoid;
  }

  .outline {
	border: solid 0.1rem var(--main-text-color-low);
  }
  
  .quiet { /* Used in combination elsewhere to "quiet" the text-decoration of links in the portfolio */
  }

  .quote-attrib {
	margin: 0 1em 1em 50%;
	font-style: italic;
	text-align: right;
  }

  .right {
	float: right;
	margin-left: 0.5rem;
  }

  /* Use this to override other Sequence styles */
  .sequence00 {
	animation-duration: 0s;
  }

  .sequence01 {
	animation-name: fade-in01;
	animation-duration: var(--sequence-time);
  }

  .sequence02 {
	animation-name: fade-in02;
	animation-duration: var(--sequence-time);
  }

  .sequence03 {
	animation-name: fade-in03;
	animation-duration: var(--sequence-time);
  } 

  .sequence04 {
	animation-name: fade-in04;
	animation-duration: var(--sequence-time);
  } 

  /* Currently unused */
  .sequence05 {
	animation-name: fade-in05;
	animation-duration: var(--sequence-time);
  }

  /* Use this for consistent shadows wherever needed */
  .shadow {
	box-shadow: var(--shadow-size) var(--shadow-mid);
  }
	
  .side-by-side {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: flex-end;
  }

  .smaller {
    	font-size: 85%;
  }

  .tagline {
	font-family: var(--heading-font);
	font-size: 100%;
	font-style: italic;
	font-weight: bold;
	text-align: right;
  }

  .website {
	max-height: 250px;
	width: auto;
	max-width: calc(99% - 4rem);
  }

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

/* End Up to 46rem */


/* Kindle and Kindle Fire up to 599px */
@media only amzn-mobi, 
       only amzn-kf8 /* and (device-aspect-ratio:1280/800) */ { 
    body { color: #005090; }
    a { color: #0000ed; }
    footer { background-color: #009999; color: #ffffff; 
	border-top: #dddddd solid 0.2em; border-bottom: #dddddd solid 0.2em; }
    h1 { font-family: Impact, "Arial Black", "Arial-Black", sans-serif; }
    h2 { font-family: Impact, "Arial Black", "Arial-Black", sans-serif;
	border-bottom: #009999 solid 2px; }
    h2::before { height: auto; 
	margin-top: 0; }
    h3 { font-family: Impact, "Arial Black", "Arial-Black", sans-serif;
	color: #009999; }
    header { position: static;
	background-color: #dddddd; 
	color: #005090; 
	border-top: #009999 solid 0.2em; }
    main { background-color: #ffffff;
	color: #005090; }
/* Continue from here */
    nav { position: static;
	background-color: #005090;
	color: #bbbbbb;
	border-bottom: #770044 solid 0.2em; }
    p, li { font-family: Verdana, Arial, Helvetica, Helv, sans-serif; }
    .burger { background-color: #bbbbbb; }
    .h1b { border-bottom: #770044 solid 0.2em; }
    .navlink { background-color: #bbbbbb;
	color: #005090;
	font-family: Impact, "Arial Black", "Arial-Black", sans-serif;
	border: 1px solid #bbbbbb; }
    .navlink:hover { background-color: #ffffff;
	color: #0000ed; }
  } /* End Kindle and Kindle Fire to 599px */

  
/* 36-46rem (576-736px): Landscape small phones, portrait large phones */
@media only screen and (min-width: 36rem) {

  .wide-right {
	float: right;
	margin-left: 0.5rem;
  }

} /* End 36-46rem */


/* 46-60rem (736-960px): Landscape phones, portrait tablets */
@media only screen and (min-width: 46rem) {
  
  header {
  	display: flex;
  	flex-flow: row wrap;
  	justify-content: space-between;
  	align-items: baseline;
  }
      
  .bannertext {
	animation-name: bannertext;
	animation-duration: var(--header-text-time);
  }

  .cover, .website {
	margin: 0.5rem;
  }

  .tagline {
	font-size: 120%;
	text-align: right;
    	animation-name: tagline;
	animation-duration: var(--header-text-time);
  }
	
} /* End 46-60rem */


/* 60-79rem (960-1232px): Landscape tablets, portrait PCs */
@media only screen and (min-width: 60rem) {

  nav {
	text-align: center;
  }

  nav:hover .navlink {
	display: inline; 
  }

  nav p {
/*	animation-name: fade-in04;
	animation-duration: var(--sequence-time);
*/  }

  ul {
  }

  .bannerlogo {
  }

  .between-0-960 {
	display: none;
  }
  
  .between-960-5000 {
	display: block;
  }

  .burger {
	display: none;
  }
    
  .burger-box {
	display: none;
  }
    
  .columns {
	column-count: 2;
	column-width: auto;
  }

  .navlink {
	display: inline;
	padding: 0.25rem 0.8rem;
	margin: 0.25rem;
	background-color: var(--contrast-bg-color-high);
	border-radius: 40px 20px;
	color: var(--main-text-color-low);
	font-family: var(--heading-font);
	font-size: 100%;
	font-style: italic; 
	line-height: 2em;
	box-shadow: var(--shadow-size) var(--shadow-mid);
  }

  .navlink:hover {
	background-color: var(--main-bg-color-mid);
	color: var(--main-text-color-mid);  
	box-shadow: var(--shadow-size) var(--shadow-high);
  }

  .quote-attrib {
	margin-bottom: 2em;
  }

  .tagline {
	font-size: 140%;
  }
} /* End 60-79rem */


/* 79-125rem (1232-2000px): Landscape PCs 
   NB 75rem = 1200px. Using 79rem (1232px) to allow 2rem gradient on sides */
@media only screen and (min-width: 79rem) {

    :root { /* reset variables */
	--content-first-edge: calc((100% - 75rem) / 2);
	--content-second-edge: calc(75rem + ((100% - 75rem) / 2));
    }

    body {
	background-image: linear-gradient(to right, var(--alt-bg-color-mid), var(--main-bg-color-mid) var(--content-first-edge), 
		var(--main-bg-color-mid) var(--content-second-edge), var(--alt-bg-color-mid));
    }

    footer, header, main {
	padding-left: var(--content-first-edge); 
	padding-right: var(--content-first-edge); 
    }

    header {
	background-image: linear-gradient(to right, var(--alt-bg-color-mid), var(--contrast-bg-color-mid) var(--content-first-edge), 
		var(--contrast-bg-color-mid) var(--content-second-edge), var(--alt-bg-color-mid));
    }

    nav {
    }

  } /* End 79-125rem */


/* 125rem (2000px) up: Landscape TVs */
@media only screen and (min-width: 125rem) {

} /* End 125+rem */


/* Reduced motion */
@media (prefers-reduced-motion) {

  .bannertext, .tagline {
	animation-duration: 0s;
  }
}