body{
	background-color:#29292f;
	color:#dfdddf;
	font-size:100%;

	text-align: center;
	vertical-align: middle;

}

/*
* {
  box-sizing: border-box;
}
*/
h1{

	text-shadow: -1px 0px #777666,  0px -1px 1px #AAAA99, 1px 0px  #222222,  0px 1px #111111;
    margin-left: auto;
    margin-right: auto;
	
	font-size:420%;

	margin:auto;

	/*position: -webkit-sticky; /* Safari */*/
/*  	position: sticky;*/
/*	top:0;*/

}


p {
    margin-left: auto;
    margin-right: auto;
}

img {
	max-width:100%;
	width:auto;
	margin:1%;
	border-radius:25px 50px 35px 15px;	
}

ul{
	text-align:left;
	margin:0.25%;
	
	/*padding-bottom:0.5%;*/
	border-radius:25px;


/*
	position:relative;
	animation-name: fadein;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
*/
}
/*
ul:hover{
	box-shadow: 0 2px 10px black ;	
	transition: width 2s ease-in-out 0.5s;
}*/

ol{
	list-style-type:upper-roman;
}


a:link {
  color: #CcCCe7;	/*#88AAcc;*/
}


a:visited {
  color: #aaAAaa;	/*#7799cc;*/



  text-decoration-color: #22222a; 
	text-shadow:2px 2px 5px;
	text-shadow:-2px -2px 5px; 
	
}


a:hover {
  color: #DDEEFF;	/*#6688EE;*/

	font-height:101%;
	text-shadow:2px 2px 5px;

text-decoration-color: #22222a; 
	animation-name: glow;
	animation-duration: .75s;

  animation-iteration-count: 1;

  animation-timing-function: ease-in-out;

  animation-fill-mode: forwards;



  text-decoration-color: #22222a; 
	text-shadow:2px 2px 5px;
	text-shadow:-2px -2px 5px; 
}
a:hover.anguille {
  color: #6666EE;

	font-height:101%;
	text-shadow:2px 2px 5px;
position:relative;
animation-name: shake;
	animation-duration: .25s;
	animation-iteration-count: 42;
}


a:active {
  color: #FFffFF	/*#3333EE;*/

	position:relative;
	animation-name: press;
	animation-duration: .125s;
	animation-iteration-count: 1;
}



summary:hover {
	color:#11FFee;
	position:relative;
	/*animation-name: shake;
	animation-duration: .125s;
	animation-iteration-count: 1;

	font-weight: bold;*/
}

summary:active {
	color:#ABFFBA;
	position:relative;
	animation-name: press;
	animation-duration: .125s;
	animation-iteration-count: 1;

	
	/*font-weight: bold;*/
}
/*
summary {
	font-size:1em;
}*/

details summary { 
	cursor: pointer;
}

details summary > * {
	display: inline;
}

/*
details
{
    transition: opacity 0.5s ease-in-out, font-size 0.25s ease-in-out;
    
}*/

details:not([open])
{
	font-size:100%;/*
    	opacity: 0.80;*/

	color:#d0E0f0;
}

details[open]
{
	font-size:1.05em;
	opacity: 1;
}

section {
	maximum-width:96%;
	display: inline-block;
	/*text-align:left;*/

	resize: both;
	overflow: auto;
	font-size: 1em;

	width:96%

	display-style:block;
	margin-left: auto;
	margin-right: auto;

	align-content: space-evenly;
}
/*
section:hover{
	font-size:110%;
}*/

@media only screen and (max-width: 1279px){

section { width:100%; }

.youtube { max-width:100%; width:100%; }

li, ul, details { padding-bottom:2%; }

}




/* 4K screen, embiggen the text */
@media only screen and (min-width: 3800px) {
  body {
    font-size: 200%;
  }
}
@media only screen and (min-width: 2800px) and (max-width: 3799px) {
  body {
    font-size: 150%;
  }
}

@keyframes shakeIt{
	from {left: 0px;}
	to {left: 100px;}
}

@keyframes shake {
	0%	{left:0px; top:0px; color: #00ffff;}
	12.5%	{left:2px; top:2px;}
	25%	{left:0px; top:0px;}
	37.5%	{left:-2px; top:-2px;}
	50%	{left:0px; top:0px; color: inherit;}
	62.5%	{left:1px; top:-3px;}
	75%	{left:0px; top:0px;}
	87.5%	{left:-1px; top:2px;}
	100% 	{left:0px; top:0px; color: }
}

@keyframes press {
	0%	{left:0px; top:0px; color: #00ffff;}
	37.5%	{left:2px; top:2px;
		text-shadow: 	1px 1px  #eeeeff,-1px -1px  #000001;}
	100% 	{left:0px; top:0px;  }
}

@keyframes glow {
	0% 	{	text-shadow: 
	1px 1px  #111111,  

	-1px 0px 20px #11DDFF,  
	0px -1px 20px #11DDFF, 
	1px 0px  20px #11DDFF,  
	0px 1px  20px #11DDFF,

	-1px 0px 5px #11eeFF,  
	0px -1px 5px #11eeFF, 
	1px 0px  5px #11eeFF,  
	0px 1px  5px #11eeFF;}

	100%	{	text-shadow: 
	1px 1px  #000001,  

	-1px 0px 5px #11DDFF,  
	0px -1px 5px #11DDFF, 
	1px 0px  5px #11DDFF,  
	0px 1px  5px #11DDFF,

	-1px 0px 2px #11DDFF,  
	0px -1px 2px #11DDFF, 
	1px 0px  2px #11DDFF,  
	0px 1px  2px #11DDFF;}
}

@keyframes vert {
	0% { color: #ABFFBA }
	25% { color: #11DD88 }
	100% { color: #11ff66 }
}

@keyframes grow {
	0%   { font-size:80%}
	100% {font-size :100%}

}

@keyframes fadein {
	0%   { opacity: 0;}
	33%  { opacity: 0;}
	100% { opacity: 1}
}

.fadein {
	position:relative;
	animation-name: fadein;
	/*animation-duration: .33s;*/
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
}

.phasing {
	animation-name: fadein;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: jump-both;
}

.grow {

	position:relative;
	animation-name: grow;
	/*animation-duration: .33s;*/
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
}

.anguille:hover {
	position:relative;
	animation-name: shake;
	animation-duration: .125s;
	animation-iteration-count: 1;
	
}

.shake {
	position:relative;
	animation-name: shake;
	animation-duration: .125s;
	animation-iteration-count: 1;
	
}

.luminescent:hover {
	animation: glow 1.618s infinite alternate ease-in-out;
}

.glowy {
	animation: glow 1.618s infinite alternate ease-in-out;
}


.pop-in {
	
	position:relative;
	animation-name: grow;
	animation-duration: .33s;
	animation-iteration-count: 1;
	
	animation-timing-function: ease-out;
}

.morph:hover {
	font-style: oblique;
	font-weight: bold;
	
}

.photosynthese:hover {
	animation: vert 2s infinite alternate ;
}

.bordure, details {
	margin:0.75%;
	
	/*padding-bottom:1%;*/
	border-radius:25px;

	box-shadow: 0 2px 10px black ;	
	transition: width 2s ease-in-out 0.5s;
}

.nobullet li::marker{
	content:none;
}
.yesbullet li::marker{
	content:normal;
}

.notriangle summary::marker{
	content:none;
}
.yestriangle summary::marker{
	content:normal;
}

.nocontent *::marker{
	content:none;
}


.steam {
	display:block;

	/*width:33%;*/

	border-radius:25px;	

	vertical-align: text-top;
		
	border: 0px solid #666666;

	padding:.75%;

	background-color: #282e39;


	overflow: visible;	

}

.logos{
	float:right;
	overflow:hidden;
}

.install {
	text-align:right; 
	align:relative; 
	float:right; 
	bottom:0;
	padding:0.75%;
	background-color:#558836;
	
	text-decoration-line: none; 
	
	border-radius:2px 2px 2px 2px;	
	border-style:solid;
	border-color:#77AA58;
	border-bottom-color: #336614;
}

.install:link {
  color: #FFFFBA;
}


.install:visited {
  color: #FFFFBA;
	
}


.install:active {
  background-color: #FFFFBA;

	border-color:#77AA58;
	border-top-color: #336614;
	
}

.install :hover {
  color: #6666EE;

	font-height:101%;
	text-shadow:2px 2px 5px;
}

.code {
	color:LightGreen;
}

.code:hover {
	animation: vert 5s ease-in-out;
}

.youtube {
	
	
    transition: opacity 0.5s ease-in-out, font-size 0.33s ease-in-out;
}

.bigSummary {
	font-size:162%; 
	padding:0.69%; 
	width:96%;
}

details.coloring[open] {background-color:#FFf; color:#000;}


/*summary::after {
	content: " (Click to open or close the " attr(id) " section)";
	
	opacity:0;
}
summary:hover::after {
  display: inline;
opacity:1;

	animation-name: fadein;
	animation-duration: .5s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
}

a::after{
	content:"(" attr(href) ")";
	display:none;

}
a#Fred::after{
	display:none;

}

a:hover::after {
	display:inherit;

	animation-name: fadein;
	animation-duration: .5s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
}*/

a#Fred:hover::after
{
	display:inherit;
	font-size:1rem;
	content:" on linkedin";
}

.spoiler::before{
	content:attr(title);
}
.spoiler::after{
	content:" (spoiler)";
}
.spoiler:active::before{
	content:attr(id);
}
.spoiler:hover::after{
	content:" (click & hold to reveal)";
}
.spoiler:active::after{
	content:"";
}
.spoiler:hover{
	cursor: pointer;
}





}