:root {

	--bg: #222 ;
	--fg: #ccc ;
	--behind: #121224 ;
	--behind: linear-gradient(rgb(28, 15, 37),rgb(63, 35, 87)) fixed ;
	--h1: lightblue ;
	--red: tomato ;
	--yellow: goldenrod ;
	--blue: deepskyblue ;
	--link: turquoise ;
	--linksec: paleturquoise ;
	--border: #333 ;
	--box: #444 ;

}

body {
	font-style: sans-serif ;
	background: var(--behind) ;
	color: var(--fg) ;
	margin-bottom: 200px ;
	font-family: "Open Sans" ;
	font-family: "Georgia", "Open Sans" ;
}

a:hover {
	color: var(--linksec) ;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Garamond" ;
}

.lw, p img,  li img, h1 img, h2 img, h3 img, h4 img, dt img, td img, button img {
	max-height: .8em;
	max-width: 1em;
	vertical-align: middle ;
}

img { max-width: 90% ; }

main {
	max-width: 800px ;
	margin: auto ;
}

header h1 {
	border-style: solid ;
	border-width: 0px 0px 2px 0px ;
	border-color: #000033 ;
	text-align: center ;
	font-size: xx-large ;
}

h1,h2,h3,h4,h5,h6 {
	text-align: center ;
}

.menuname {
	display: none ;
}

.buttonlist {
	display: none ;
	position: absolute ;
	bottom: 1em ;
}

footer {
	margin-top: 3em ;
	padding: 1em ;
	border-style: dashed ;
	border-width: 1px 0px 0px 0px ;
	border-color: beige ;
	text-align: center ;
	clear: both ;
}
.taglist {
	text-align: center ;
}

#tag_crypto:before { content: '💰' ; }
#tag_economics:before { content: "📈" ; }
#tag_lifestyle:before { content: "👨‍👩‍👦" ; }
#tag_language:before { content: "🗣️" ; }
#tag_linux:before { content: "🐃" ; }
#tag_personal:before { content: "😎" ; }
#tag_philosophy:before { content: "🎓" ; }
#tag_religion:before { content:"☦️" ; }
#tag_science:before { content:"🥼" ; }
#tag_software:before { content: "🖥️" ; }
#tag_technology:before { content: "⚙️" ; }
#tag_tutorial:before { content: "📖" ; }
#tag_tradition:before { content: "📜" ; }
#tag_updates:before { content: "🆕" ; }
#tag_politics:before { content: "👑" ; }
#tag_history:before { content: "⏳" ; }


.menuactive li {
	background: #111 ;
}

@media (min-width: 1400px) {
	.resright {
		position: absolute ;
	}
	.resright:nth-of-type(even) {
		right: 0;
		float: right ;
	}
	.resright:nth-of-type(odd) {
		left: 0;
		float: left ;
	}
}

@media (min-width: 1200px) {
	.buttonlist {
		display: block ;
	}

	.buttonlist img {
		max-height: inherit ;
		max-width: inherit ;
		vertical-align: middle ;
	}


	.resright, .profile{
		display: block ;
		float: right;
		padding: 10px ;
		clear: both ;
		max-width: 300px ;
	}
	.menuname {
		display: inline-block ;
	}

}

#tagcloud {
	clear: both ;
	padding: 0;
	background: #121212  ;
	border-radius: 10px ;
	text-align: center ;
	margin: 0 auto ;
	border: solid 1px ;
	border-style: dashed ;
	list-style: none ;
}

#tagcloud li {
	display: inline-block ;
}

#tagcloud a {
	display: block ;
	width: auto ;
	background: #323232 ;
	border-radius: 10px ;
	padding: .25em ;
	margin: 2px ;
}

#tagcloud a:hover {
	background: #222222 ;
	box-shadow: 2px 2px black ;
}

.titleimg {
	align: center ;
}

.titleimg img {
	margin: auto ;
	max-width: 90% ;
	max-height: 400px ;
	display: block ;
}

code {
	color: #00dd00 ;
	overflow-wrap: break-word ;
	font-size: 10pt ;
}

.resright {
    margin: auto ;
    display: block ;
    text-align: center ;
}

.resright img {
	max-height: 300px ;
}

.profile {
	text-align: center ;
	max-height: 250px ;
}
.profile img {
	max-height: inherit ;
}

figcaption {
	text-align: center ;
	display: inline ;
}

h1 { color: var(--h1) ; }

h2 { color: var(--yellow) ; }

/* h2 { */
/* 	background-color: var(--yellow) ; */
/* 	width: fit-content ; */
/* 	margin: auto ; */
/* 	border-radius: 1em ; */
/* 	padding-left: 1em ; */
/* 	padding-right: 1em ; */
/* 	color: black ; */
/* } */


h3 { color: var(--red) ; }

h4 { color: var(--blue) ; }

strong { color: white }

sup {
	vertical-align: top;
	font-size: 0.6em;
}

a {
	color: var(--link) ;
	/* text-decoration: underline dotted darkolivegreen ; */
	text-decoration: none ;
}
.qr { max-width: 150px ; padding: 10px }


li .summary {
	display: none;
}

li:hover .summary {
	display: block ;
	font-style: italic ;
}

input, textarea {
	background: #222 ;
	color: white ;
	margin: auto ;
	border-color: #333 ;
	font-size: large ;
}


#name {
	max-width: 25em ;
}
#amount {
	max-width: 25em ;
}
#message {
	width: 100% ;
}

form {
	margin: auto ;
	width: 30em ;
}

pre {
	border-radius: 20px ;
	padding: 1em ;
}

.loc {
	color: #777 ;
	display: none ;
}

.mainmenucont {
	position: relative ;
	text-align: center ;
	height: 100px ;
	width: 100px ;
	display: inline-block ;

}

.menulink {
	text-decoration: none ;
}

.mainmenucont:hover {
	background: darkmagenta ;
	border-radius: 20px ;
}

.mainmenuimg {
	height: 100px ;
	width: 100px ;
}

.mainmenutext {
	position: absolute ;
	top: 50% ;
	left: 50% ;
	transform: translate(-50%, -50%) ;
	font-size: 24px ;
	color: white ;
	text-shadow: 0px 0px 3px black ;
}

.mainmenucont:hover .mainmenutext {
	color: lime ;
}

article {
	background: var(--bg) ;
	border-radius: 20px ;
	margin: 1em ;
	padding: 1em ;
	box-shadow: 7px 7px var(--box) ;
	border: 1px solid var(--border) ;
}

.backforth {
	animation: bf .5s linear both infinite alternate ;
	position: absolute ;
}

@keyframes bf{
	from{transform: translateX(.25em);}
	to{transform: translateX(0em);}
}

time {
	font-family: monospace ;
	color: gray ;
}

.soy {
	animation: shake 0.4s ease-out;
	animation-iteration-count: infinite;
}

@keyframes shake {
	0% { transform: translate(1px, 1px) rotate(0deg); }
	10% { transform: translate(-1px, -2px) rotate(-1deg); }
	20% { transform: translate(-3px, 0px) rotate(1deg); }
	30% { transform: translate(3px, 2px) rotate(0deg); }
	40% { transform: translate(1px, -1px) rotate(1deg); }
	50% { transform: translate(-1px, 2px) rotate(-1deg); }
	60% { transform: translate(-3px, 1px) rotate(0deg); }
	70% { transform: translate(3px, 1px) rotate(-1deg); }
	80% { transform: translate(-1px, -1px) rotate(1deg); }
	90% { transform: translate(1px, 2px) rotate(0deg); }
	100% { transform: translate(1px, -2px) rotate(-1deg); }
	}

input, textarea {
	background: black ;
}