/* MysteryMounds.Com web.css */

:root {
	--pageclr:	white;
	--pagebg:	black;
}

@font-face {
	font-family:	ComicWhiteRabbit;
	src: url(fonts/Comic_White_Rabbit_.otf);
}
.ComicWhiteRabbit {
	font-family:	ComicWhiteRabbit;
	letter-spacing:	.08em;
	line-height:	1;
	padding:	.15em;
}

@font-face {
	font-family:	Font27;
	src: url(fonts/27.ttf);
}


body {
	margin:	0;
	padding:	0;
	font-size: 1.25vw;
	background-image:	url('glue/DaMounds-background.jpg');
	background-attachment:	fixed;
	background-position: top left;
	background-size:	cover;
	background-repeat: repeat;
}

a	{
	text-decoration:	none;
/*	margin:	10px;*/
}

a.plaintext	{
	text-decoration:	underline;
	color:	var(--pageclr);
/*	margin:	10px;*/
}

a.photo {
	text-decoration:	none;
}
a.photo:hover {
	scale:	125%;
}

a.teaser {
	background-color:	var(--pagebg);
	color:	var(--pageclr);
}
a.teaser:hover {
	background-color:	var(--pagebg);
	color:	white;
}

.textpicleft {
	margin: 0.5em;
	margin-right:   0.2em;
	margin-bottom:  0;
	border-radius:  0.5em;
	float:  left;
}
.textpicright {
	margin: 0.3em;
	margin-left:    0.5em;
	margin-bottom:  0;
	border-radius:  0.5em;
	filter:	drop-shadow(4px 4px 6px var(--shdwclr));
	float:  right;
}

.textimage {
	width:  100%;
/*	filter: drop-shadow(5px 5px 3px Navy);*/
}

p {
	margin-top:	0;
	margin-bottom:	0.5em;
/*	text-indent:	0.3em;*/
}

.icon {
	margin-top: 0.4em;
}

.EdgeDeco {
	position:	fixed;
	font-size:	9em;
	color:	#d4a25d;
	text-shadow: 4px 4px 6px var(--shdwclr);
}

.EdgeDecoImg {
	position:	fixed;
	width:	8em;
/*	color:	#d4a25d;*/
	filter: drop-shadow(4px 4px 6px var(--shdwclr));
}

.FakeEmo {
	height: 1em;
	filter:	drop-shadow(4px 4px 6px var(--shdwclr))	drop-shadow(4px 4px 6px var(--shdwclr));
	position:	relative;
	top:	+0.25em;
	margin-top:	-0.25em;
}

.logo {
	display:	inline-block;
	margin:	0.1em;
	font-size:	1.5em;
	color:	var(--pagebg);
	position:	fixed;
	text-shadow: 4px 4px 6px var(--shdwclr);
	white-space:	nowrap;
	border-style:	solid;
	border-radius:	0.5em;
}

.xxheader {
	text-shadow: 4px 4px 6px var(--shdwclr);
	display:	inline-block;
	background-color:	var(--pageclr);
	color:	var(--pagebg);
	box-shadow: 4px 4px 6px var(--shdwclr);
	border-style:	solid;
	border-radius:	0.5em;
	text-align:	center;
	vertical-align:	top;
	font-size: 3em;
	font-weight:	normal;
	padding:	0.2em;
	padding-bottom:	0.3em;
	white-space:	nowrap;
}

.miniheader {
	text-shadow: 4px 4px 6px var(--shdwclr);
	display:	inline-block;
	text-align:	center;
	vertical-align:	bottom;
	font-size: 3em;
	font-weight:	normal;
	padding:	0.2em;
	padding-top:	0.3em;
	white-space:	nowrap;
}

.title {
	display:	table-cell;
	margin-top:	0.75em;
	border-radius:	0.5em;
	border-style:	solid;
	border-width:	0.1em;
	background-color:	var(--textbg);
	opacity:	0.7;
	padding:	7px;
	font-size:	1.2em;
	font-weight:	bold;
}

.textbox {
	padding:	0.5em;
/*	padding-bottom:	0;*/
	background-color:	var(--pageclr);
	color:	var(--pagebg);
	box-shadow: 4px 4px 6px var(--shdwclr);
	font-family:	AlexBrush;
	font-size:	1.7em;
	font-weight:	bolder;
	text-align:	justify;
	border-radius:	0.5em;
	border-style:	solid;
	display: inline-block;
	max-width:	70%;
	margin-bottom: 0.5em;
}

.bottomlink {
	margin-bottom:	1.5em;
	float:	right;
	font-size:	inherit;
	font-style:	italic;
}

.backlink {
	display:	inline;
	float:	left;
}

.picframe {
	border-style:	solid;
	border-width:	1px;
	border-radius:	0.5em;
	width:	400px;
	padding:	10px;
	padding-bottom:	0.15em;
	margin-bottom:	0.25em;
	background-color:	var(--textbg);
	opacity:	0.7;
}

.picframes {
	border-style:	solid;
	border-width:	2px;
	border-radius:	10px;
	width:	400px;
	padding:	0;
	padding-bottom:	3px;
	margin-bottom:	5px;
	background-color:	white;
/*	opacity:	0.7;*/
}

.pic {
	margin-bottom:	2px;
	border-radius:	10px;"
}

.popup	{
	position:	absolute;
	padding:	5px;
	color:	navy;
/*	background-color:	none;*/
	border-style:	solid;
	border-width:	3px;
	font-size: 18px;
	font-weight:	bold;
	opacity:	0;
}

.popup:hover	{
	opacity:	1;
}

.popup-content	{
	position:	absolute;
	left:	5px;
	bottom:	110%;
	padding:	5px;
	color:	#acd9ed;
	background-color:	var(--menubg);
	border-style:	solid;
	border-width:	3px;
	font-size: 18px;
	font-weight:	bold;
	display: none;
}

.popup-content:hover	{
	display: none;
}

.popup:hover .popup-content	{
	display:	block;
}

.menu {
	overflow:	hidden;
	color:	#acd9ed;
	background-color:	var(--menubg);
	font-family:	Times;
	font-size:	18px;
	font-weight:	bold;
}

.menu a {
	color:	var(--menuclr);
	float:	left;
	font-size: 18px;
	text-align: center;
	padding-left:	5px;
	padding-right:	5px;
	text-decoration: none;
	padding-top: 4px;
	padding-bottom: 2px;
}

.dropdown {
	float:	left;
	overflow:	hidden;
}

.dropdown .dropbtn {
	font-family:	Times;
	font-size:	18px;
	font-weight:	bold;
	border:	none;
	outline:	none;
	color:	var(--menuclr);
	padding-left:	5px;
	padding-right:	5px;
/*	padding:	14px 16px; */
	background-color:	inherit;
	padding-top: 4px;
	padding-bottom: 2px;
}

.menu a:hover, .dropdown:hover .dropbtn {
    background-color:	var(--menuhilite);
    color:	var(--menuclr);
}

.dropdown-content {
    display: none;
    position: absolute;
    bottom:	26px;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index:	1;
}

.dropdown-content a {
	float: none;
	color:	#acd9ed;
	background-color: var(--menubg);
	font-size:	16px;
	font-weight:	bold;
/*	padding: 7px;*/
	padding-left:	5px;
	padding-right:	5px;
	padding-top: 4px;
	padding-bottom: 2px;
	text-decoration: none;
	display: block;
	text-align: left;
}

.dropdown-content a:hover {
    background-color: var(--menuhilite);
}

.dropdown:hover .dropdown-content {
/*	right:	right;*/
	display:	block;
}