/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Special+Elite&display=swap');
:root {
  --bg-color: #efefef;
  --bg-color-2: #dadada;
  --primary-color:black;
  --secondary-color:white;
  --text-color:black;
  --text-color-2:#efefef;
  --different-bg:#F34F4C;
}

html {
		padding:0;
		margin:0;
		scroll-behavior: smooth;
	}
	body {
		font: normal normal normal 18px/1.4em helvetica, arial, sans-serif;
		height:100%;
		padding:0;
		margin:0;
		position:relative;
		display:grid;
		grid-template-areas:
		'header'
		'main'
		'sideBar'
		'footer';
		grid-template-rows: 1fr auto auto minmax(6em, 1fr);
		background:var(--bg-color) fixed url("../img/bg-dieux-pat-godfrey.png") no-repeat right bottom;
		overflow-x: hidden;
	}
	header {
		grid-area:header;
		height:auto;
		background:var(--primary-color);
		margin:0;
	}
	main {
		grid-area:main;
		width:90%;
		max-width:1000px;
		margin:0 auto;
		padding-bottom:2em;
	}
	footer {
	grid-area:footer;
	background:var(--primary-color);
	color:var(--text-color-2);
	padding:0.5em;
	border-top:1px solid var(--bg-color-2);
	}
	.nav-footer {
		list-style-type:none;
	}
	.nav-footer li {
		display:inline-block;
	}
	footer a,
	footer a:visited {
	color:#efefef;
	text-decoration:none;
	border-bottom:1px solid #efefef;
	}
	.skipLink {
	
	}
	.skipLink a,
	.skipLink a:visited {
	display:block;
	position:absolute;
	top:0;
	left:-20em;
	width:15em;
	padding:0.5em;
	background:yellow;
	color:black;
	font-weight:700;
	transition: left ease-in-out 0.3s;
	text-decoration:none;
	}
	.skipLink a:hover,
	.skipLink a:focus {
	left:0;
	}
	
	h1 {line-height:1.0em;margin:0;padding:1rem;color:var(--secondary-color);font-size:3em;}
	.break {display:block;font-size:0.6em;font-weight:300;}
	h2 {font-family: 'Anton', sans-serif;font-size:3em;font-weight:100;line-height:1.2em;color:var(--primary-color);}
	.dieUX {
		font-family: 'Anton', sans-serif;
		letter-spacing: 0.06rem;
		font-weight:100;
	}
	img {
		display:block;
		width:100%;
		max-width:350px;
		height:auto;
		margin:2em auto 1em auto;
	}
	button {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		border-radius:0;
	}
	#sideBar {
		grid-area:sideBar;
		background:var(--bg-color-2);
		color:var(--text-color);
		padding:0.5em;
	}
	#sideBar ul {
		list-style-type:none;
		margin-left:-2.4rem;
	}
	#sideBar ul li {
		display:block;
		margin-bottom:0.2rem;
	}
	#sideBar li a:link,
	#sideBar li a:visited {
		display:block;
		height:auto;
		padding:0.5rem;
		background:black;
		color:white;
		text-decoration:none;
		transition: all ease 0.2s;
	}

	#sideBar li a:hover,
	#sideBar li a:focus {
		background:yellow;
		color:black;
	}
	#sideBar li a:active {
		background:yellow;
		color:black;
	}
	

	@media screen and (min-width:760px){		
		img {
		width:100%;
		max-width:inherit;
		height:auto;
		margin:4em 0 1em 0;
		}
	}
	@media screen and (min-width:968px){
		body {
		display:grid;
		grid-template-areas:
		'header header header'
		'sideBar main main'
		'sideBar footer footer';
		grid-template-rows: 1fr auto  minmax(6em, 1fr);
		grid-template-columns: minmax(15%,16rem) 1fr 1fr;
		}
		main {
		/*min-height:100%;*/
		min-height:calc(100vh - 18em);
		}
		footer {
		background:inherit;
		color:black;
		}
		footer a,
		footer a:visited {
		color:blue;
		border-bottom:1px solid blue;
		}
		#sideBar nav{
		position:sticky!important;
		top:0;
		height:auto;
		}
		#sideBar li a.active {
		background:yellow;
		color:black;
		}
	}

.breadcrumbs ol {
	margin:1rem 0 -2rem 0 ;
	padding:0;
	list-style-type:none;
}
.breadcrumbs li {
	display:inline-block;
}
.breadcrumbs li:last-child a{
	font-weight:bold;
	color:black;
}
.breadcrumbs li:not(:first-of-type):before {
	content:"";
	display:inline-block;
	width:2px;
	height:1.5em;
	margin:0 0.5rem;
	background: black;
	transform:skew(-10deg);
	vertical-align: bottom;

}
.code {
	background:#333	;
	color:#dadada;
	padding:0.1rem 0.3rem;
	border-radius:2px;
}
cite {
	display:block;
	text-align:right;
	font-style:normal;
}

dl {
	display:block;
}
dt {
	background:var(--primary-color);
	border:2px solid var(--primary-color);
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	padding:0.5rem;
	color:var(--text-color-2);
	font-weight:700;
	font-size:1.2em;
}
dd {
	padding:0.5rem;
	border:2px solid var(--primary-color);
	margin:0 0 1rem 0;
	background:var(--secondary-color);
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}
.ribbon {
	position:absolute;
	top:0;
	right:0;	
	display:flex;
	align-items: center;
	justify-content:center;
	overflow:hidden;
	height:16em;
	width:16em;
}
.ribbon p {
	/**/position:absolute;
	top:1em;
	right:-4em;
	background:yellow;
	color:black;
	transform: rotate(45deg);
	padding:0.5rem 0;
	width:16em;
	height:auto;
	max-height:2em;
	text-align:center;
	font-size:1rem;
	font-weight:700;
	text-transform:uppercase;
	line-height:1em;
	overflow:hidden;
}
.hidden {
	position:absolute;
	left:-9999px;
	width:1px;
	height:1px;
	overflow:hidden;
}
figure {
	padding:0;
	width:100%;
	position:relative;
	margin:0;
}
figcaption,
figcaption.showCaption {
	position:relative;
	background:var(--contrast-color);
	padding:1em;
	margin:0 auto 2rem auto;
	max-width:350px;
	font-size:0.95em;
	border-radius:2px;
	border:2px solid black;
}
figcaption:before {
	content:"";
	position:absolute;
	top:-20px;
	right:72px;
	width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 20px solid black;
	
}
@media screen and (min-width:760px){
	figcaption,
	figcaption.showCaption{
		max-width:100%;
		}
}
/* SHAPES */
/*STAR*/
.starAward {
	position:absolute;
	top:-40px;
	right:0;
	text-align:right;
}
    .starShape {
      margin:0px 0;
      position: relative;
      display: inline-block;
      color: black;
      width: 0px;
      height: 0px;
      border-right: 12.5px solid transparent;
      border-bottom: 8.5px solid black;
      border-left: 12.5px solid transparent;
      transform: rotate(35deg);
    }
    .starShape:before {
      border-bottom: 10px solid black;
      border-left: 3.25px solid transparent;
      border-right: 3.25px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -5.5px;
      left: -8.0px;
      display: block;
      content: '';
      transform: rotate(-35deg);
    }
    .starShape:after {
      position: absolute;
      display: block;
      color: red;
      top: 1px;
      left: -13px;
      width: 0px;
      height: 0px;
      border-right: 12.5px solid transparent;
      border-bottom: 8.5px solid black;
      border-left: 12.5px solid transparent;
      transform: rotate(-70deg);
      content: '';
    }
	.starShape.fill {
	
	}
noscript {
	padding:0.5em;
	background:var(--different-bg);
	color:var(--contrast-color);
}
noscript p {
	text-align:center;
}
blockquote {
margin:2em auto 0 auto;
width:80%;
	font-family: 'Special Elite', cursive;
	font-size:1.5rem;
	line-height:1.5em;
}
.bigQuote {font-size:1.2em;}/*enlarge quotes*/
.right {
	text-align:right;
}
abbr,abbr:hover {
text-decoration:none !important;/*Bug Fix: Over-ride W3C's CSS*/
	border-bottom:2px dotted #31851B !important;
	cursor:help;
}
/* Caption Toggle button */
    .talkbubble {
	display:block;
	position: relative;
	margin:-1rem 0 0.5rem 1rem;
    width: auto;
    font-size:0.8em;
	padding:0.2rem 0.5rem;
    background: black;
	border:0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
	color:white;
	z-index:50;
    }
    .talkbubble:after {
      content: "";
      position: absolute;
      right: -0.18rem;
      top: -0.22rem;
      width: 0;
      height: 0;
      border-top: 8px solid transparent;
      border-right: 16px solid black;
      border-bottom: 8px solid transparent;
	  transform: rotate(20deg);
	  z-index:49;
    }
	.talkbubble:hover,
	.talkbubble:focus {
	background: yellow;
	color:black;
	cursor:pointer;
	}
	.talkbubble:hover:after,
	.talkbubble:focus:after {
	border-top: 8px solid transparent;
      border-right: 16px solid yellow;
      border-bottom: 8px solid transparent;
	}
/*BACK TO THE TOP - called by jQuery on scroll - px for font to avoid overtaking UI on increasing font*/
#topper.bttNone	{ /*start state */
	visibility:hidden;
	opacity:0;
}
#topper.btt	{ /*on scroll down */
	position:fixed;
	bottom:30px;
	right:5rem;
	width:2rem;
	height:2rem;
	margin-left:-2rem;
	font-size:1rem;
	text-align:center;
	opacity:1;
	z-index:100;
}
#topper.btt a,
#topper.btt a:visited	{
	display:inline-block;
	width:2rem;
	height:2rem;
	text-align:center;
	border:none;
	border-radius:50%;
	padding:10px;
	
	background-color:rgba(10,10,10,0.3);
	color:#FFFFFF;
	font-size:18px;
	text-decoration:none;
}
#topper.btt a:hover	{
	background-color:#F7931E;
	text-decoration:none;
	cursor:pointer;
}
#topper.bttNone,
#topper.btt {
		-webkit-transition:opacity 0.5s linear;
		transition:opacity 0.5s linear;
}