@charset "utf-8";

/* Global Styles */

@font-face {
    font-family: 'Papyrus';
        src: url('papyrus-webfont.woff2') format('woff2'),
             url('papyrus-webfont.woff') format('woff'),
             url('papyrus.ttf') format('ttf');
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: 'Packard Antique';
        src: url('PackardAntique.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Packard Antique Bold';
        src: url('PackardAntique-Bold.ttf') format('ttf');
    font-weight: bold;
    font-style: normal;
}

body {
    height: 100%;
    text-align: center;
	background-color: black;
	overflow-x: hidden;
}
body-w {
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	text-align: center;
	background-color: black;
	background-repeat: no-repeat;	
	background: url("../images/ACG_background_map_pc.png") no-repeat;
}
.clearfix {
	clear: both;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.wrapper {
	float: left;
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	align-content: center;
    overflow: hidden;
	z-index: 1;
}

/* HEADER */

.header {
	display: flex;
	margin: 0 auto;
	flex-direction: row;
	left: 0;
	right: 0;
	margin-bottom: -12px;
	background-image: url("../images/top_extender_bar-tile_mobile.png");
	background-repeat: repeat-x;
	z-index: 5;
}
.hcn {
	margin: 0 auto;
	top: 0;
	height: 67px;
	width: 380px;
	background-image: url("../images/top_menu_bar_mobile.png");
	z-index: 5;
}
.skull {
	float: left;
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	top: 65px;
	z-index: 4;
}
.compass {
	float: left;
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	z-index: 0;
}
.skulli {
	float: left;
	position: absolute;
	margin: 0 auto;
	top: 56px;
	bottom: 0;
	left: 0;
	right: 0;
    transition: transform 3s ease-in-out;
}
@keyframes rotate {
    from {transform: rotate(0deg);} to {transform: rotate(360deg);}
}
.planetary {
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	z-index: -1;
}
.planet-top {
	float: left;
	position: absolute;
	margin: 0 auto;
	left: 10px;
	right: 0;
	z-index: 0;
}
	
/* MENU */

.menu {
	width: 150px;
	height: 22px;
	margin-top: 18px;
	margin-left: 110px;
	z-index: 5;
}
.dropbtn {
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
	font-size: 1.2em;
	text-decoration: none;
	color: goldenrod;
	background-color: transparent;
	border: none;
}
.menu-content {
	display: none;
	position: relative;
	width: 120%;
	min-width: 160px;
	left: 40px;
	border: 1px solid darkolivegreen;
	padding: 10px;
	background-color: black;
    z-index: 5;
}
.menu li {
	list-style-type: none;
	padding: 5px;
	text-align: left;
}
.menu li a {
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
	font-size: 1.2em;
	text-decoration: none;
	color: goldenrod;
}
.menu:hover .menu-content {
	display: block;
}
.URHere {
	pointer-events: none;
	color: darkgoldenrod;
	text-decoration: overline underline;
}

/* MAIN PAGE */

.containment {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	min-height: 550px;
	background: url("../images/border_top_middle_tile_transparent_mobile.png") center top repeat-x;
	z-index: 0;
}

.left-column {
	flex: 1;
	float: left;
	position: relative;
	background: url("../images/border_left_top_transparent_mobile copy.png") left top no-repeat;
	z-index: 2;
}
.right-column {
	flex: 1;
	float: right;
	position: relative;
	background: url("../images/border_right_top_transparent_mobile.png") right top no-repeat;
	z-index: 2;
}
.bottom {
	flex: 1;
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 100%;
	background: url("../images/border_lower_left_mobile.png") left bottom no-repeat, url("../images/border_lower_right_mobile.png") right bottom no-repeat, url("../images/border_bottom_middle_tile_mobile.png") center bottom repeat-x, url("../images/border_left_tile_mobile copy.png") left top repeat-y, url("../images/border_right_tile_mobile copy.png") right top repeat-y, url("../images/paper_mid_tile_mobile.png") center top repeat;
}
.ctext {
    flex: 1;
	margin: 0 auto;
	margin-top: -140px;
	padding: 0px 60px 70px 60px;
	z-index: 3;
}
.ctext .c-head {
    font-family: Papyrus;
    font-weight: bold;
    text-shadow: 2px 2px 2px grey;
}
.ctext a:link {
    color: darkred;
    text-decoration: none;
}
.ctext a:visited {
    color: darkred;
    text-decoration: none;
}
.ctext a:hover {
    text-decoration: underline overline;
}
.center-title {
	margin: 0 auto;
	font-family: Papyrus;
	color: black;
	font-size: 1.5em;
	font-weight: bold;
	z-index: 3;
	text-shadow: 2px 2px 2px grey;	
}
.ctext p {
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
    font-size: 1.2em;
	margin: 0 auto;
	max-width: 80%;
	padding-bottom: 15px;
}
.ctext strong {
	font-size: 1.1em;
	font-family: IM Fell English, Architects Daughter, Shadows Into Light;
}
.ctext hr {
    left: 0px;
    border: 0;
    height: 60px;
	width: calc(100vw - 50px);
	min-width: 325px;
	max-width: 765px;
    background-image: url("../images/scaffold_hr_lf_pc.png"), url("../images/scaffold_hr_rt_pc.png"), url("../images/scaffold_hr_mid_pc.png");
    background-position: left, right, center;
    background-repeat: no-repeat, no-repeat, repeat-x;
    margin: -10px 0px 5px 0px;
    z-index: 3;
}
.map_tile {
	width: 80%;
    min-width: 200px;
    max-width: 400px;
}
.alt_map_tile {
    padding: 5px;
    width 50%;
    mind-width: 100px;
    max-width: 200px;
}

/* FORM */

form {
  	margin: 0px auto;
	display: flex;
	flex-direction: column;
    justify-content: space-around;
}
input, textarea {
    width: 250px;
    padding: 0.5rem;
    border: 1px solid darkred;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin: 5px 0;
    transition: none;
}
textarea {
    min-height: 200px;
    max-height: 500px;
}

input {
    margin-top: 7px;
}
.alabel {
    flex: 1;
    font-family: Packard Antique;
    padding: 5px;
}
.ainput {
    padding-bottom: 15px;
}
.hidden {
    visibility: hidden;
}
.formsubmit {
    margin: 0 auto;
    left: 0;
    right: 0;
}
.formsubmit input {
	    all: unset;
    width: 105px;
    padding: 0.5rem;
    border: 1px solid darkred;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    background-color: lightgray;    
    transition: none;
    pointer-events: auto;
}

/* FOOTER */

.footer {
	display: flex;
	max-width: 800px;
	margin: 0 auto;
	left: 0;
	right: 0;
	margin-top: -5px;
	z-index: 1;	
}
.footer::before {
	content: "";
	position: absolute;
	width: 1000px;
	height: 150px;
	background: url("../images/bottom_bar_sun-underlay_mobile.png") left bottom no-repeat;
	z-index: -1;
}
.ACG-gem {
	float: left;
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	margin-top: -50px;
	z-index: 3;
}
.bottomimg {
	min-width: 320px;
	max-width: 520px;
}

.copyright{
	flex: 1;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin: 0 auto;
	left: 0;
	right: 0;
	min-width: 320px;
	max-width: 800px;
	padding: 25px 0px 25px 0px;
	height: 120px;
	align-items: center;
}
.copy2 {
	padding: 5px;
    font-size: .9em;
	color: darkolivegreen;
}
.copy {
    padding: 5px;
    font-size: .9em;
    color: tan;
}
.copyright img {
	min-width: 25px;
	max-width: 85px;
}

/* End Global Styles */

										/* ------------------------------------------------------------- */
										/* ------------------------------------------------------------- */
/* ------------------------------------------------------------- */
/* ------------------------------------------------------------- */
/* */
/* Media query for UNSUPPORTED devices*/
@media only screen and (min-width : 0px) and (max-width : 359px) {

	.unsupported {
		display: initial;
	}
	.mobile {
		display: none;
	}
	.desktop {
		display: none;
	}    
	body {
		height: 95%;
		width: 92%;
        margin: 0 auto;
		background-color: black;
		background-image: url("../images/ACG_background_map_pc.png");
		background-repeat: no-repeat;
	}
	.oops {
		max-width: 300px;
		margin: 0 auto;
		top: 25px;
        padding-bottom: 50px;
        background: url("../images/ACG_skull_transparent_mobile.png") left top 25px no-repeat;
	}
	.oops p {
		color: darkgoldenrod;
		font-weight: bold;
		font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
		font-size: 1.3em;
        text-shadow: 3px 3px 2px black;

	}
    .sm_top img {
        max-width: 200px;
        padding-bottom: 25px;
    }
    
/* MAIN UN */
    
    .ctext_sm {
        background-color: tan;
        background: url("../images/border_mid_top_transparent_map.png") center top repeat-x, url("../images/border_bottom_middle_tile_mobile.png") center bottom repeat-x, url("../images/paper_mid_tile_mobile.png");
        color: black;
        font-weight: normal;
        padding: 5px 10px 15px 10px;
    }
    .ctext_sm p {
        font-size: 16px;
    }
    .ctext_sm strong {
        font-family: IM Fell English, Architects Daughter, Shadows Into Light;
    }
    .ctext_sm .center-title {
        color: black;
        padding: 15px 0px 0px 15px;
        font-size: 1.2em;
        font-weight: bold;
        text-shadow: 2px 2px 2px grey;
    }
    .ctext_sm .c-head {
        font-family: Papyrus;
        font-size: 1.2em;
        font-weight: bold;
        text-shadow: 2px 2px 2px grey;
        padding-top: 45px;
    }
    .ctext_sm a:link {
        color: darkred;
        text-decoration: none;
    }
    .ctext_sm a:hover {
    text-decoration: underline overline;
}
    .ctext_sm a:visited {
        color: darkred;
    }
    .ctext_sm strong{
        font-family: IM Fell English, Architects Daughter, Shadows Into Light;
    }
    .map_tile, .alt_map_tile {
        max-width: 250px;
    }
    .ctext_sm hr {
        border: 2px solid black;
    }

/* MEN UN */
    
    .menu {
        width: 120%;
        float: left;
        position: relative;
        margin: 0 auto;
        left: -25px;
        right: 0;
        height: 50px;
        background: url("../images/top_extender_bar-tile_mobile.png") repeat-x;        
    }
    .menu-content {
        display: none;
        position: relative;
        width: 50%;
        left: 80px;
        border: 1px solid darkolivegreen;
        padding: 10px;
        background-color: black;
        z-index: 5;
    }
    .ctext_sm .menu li {
        margin-left: 20px;
        color: goldenrod;
    }
    .ctext_sm .menu li a {
        font-size: 1em;
        color: goldenrod;
    }
    .dropbtn {
        margin: 0 auto;
        left: 0;
        right: 0;
        margin-top: 15px;
    }

/* FORM UN */
    
    form {
        min-width: 150px;
        max-width: 250px;
    }
    input, textarea {
        width: 150px;
    }

/* COPYRIGHT UN */    
    
    .copyright {
        flex: 1;
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-between;
        margin: 0 auto;
        left: 0;
        right: 0;
        margin-top: 275px;
        min-width: 200px;
        max-width: 380px;
        padding: 20px 0px 25px 0px;
        align-items: center;
        background-image: url("../images/planet_athas.png");
    }
    .copy {
        padding: 5px;
        font-size: .9em;
        color: tan;
    }
    .copyright img {
        min-width: 25px;
        max-width: 80px;
    }

}

										/* ------------------------------------------------------------- */
										/* ------------------------------------------------------------- */
/* ------------------------------------------------------------- */
/* ------------------------------------------------------------- */
/* */
/* Media query for MOBILE devices*/
@media only screen and (min-width : 360px) and (max-width : 520px) {

	.unsupported {
		display: none;
	}
	.mobile {
		display: initial;
	}
	.desktop {
		display: none;
	}
	body {
		min-width: 360px;
		max-width: 520px;
		background-image: url("../images/ACG_background_map_pc.png");
		background-repeat: no-repeat;
	}
	.wrapper {
		min-width: 360px;
		max-width: 520px;
	}

/* HEADER MOBILE  */

    .header {
		min-width: 360px;
		max-width: 520px;
	}
	.hlf {
		display: none;
	}
	.hrt {
		display: none;
	}
	.ctext {
		margin-top: -150px;
	}

/* MAIN MOBILE */    
    
    .ctext p {
        font-size: 1em;
    }
    .ctext strong {
        font-size: 1.1em;
    }
	.ctext .center-title {
		font-size: 1.5em;
		font-family: Papyrus;
	}
    .ctext .c-head {
        font-size: 1.5em;
    }

	/* MENU MOBILE */

	/* MAIN MOBILE */
    
	.containment {
		min-width: 360px;
		max-width: 800px;
	}

	/* FOOTER MOBILE */

    /* COPYRIGHT MOBILE */
    
    .copyright {
        flex: 1;
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-between;
        margin: 0 auto;
        left: 0;
        right: 0;
        margin-top: 200px;
        min-width: 200px;
        max-width: 380px;
        padding: 20px 0px 55px 0px;
        align-items: center;
        background-image: url("../images/planet_athas.png");
    }
    .gem_sm {
        visibility: hidden;
    }

/* FORM MOBILE */    
    
    form {
        position: relative;
        max-width: 360px;
        margin: 0px auto;
        display: flex;
        flex-direction: column;
        z-index: 5;
    }
    input, textarea {
        padding: 0.5rem;
        border: 1px solid #e5e7eb;
        max-width: 340px;
        border-radius: 0.375rem;
        font-size: 0.875rem;
        line-height: 1.25rem;	
    }
    textarea {
        min-height: 200px;
        max-height: 500px;
        max-width: 340px;
    }
    .h-captcha {
        max-width: 80%;
    }    
    .formsubmit {
        width: 105px;
    }
}
										/* ------------------------------------------------------------- */
										/* ------------------------------------------------------------- */
/* ------------------------------------------------------------- */
/* ------------------------------------------------------------- */
/* */
/* Media Query for TABLET devices */
@media only screen and (min-width : 521px) and (max-width : 1023px) {

	.unsupported {
		display: none;
	}
	.mobile {
		display: initial;
	}
	.desktop {
		display: none;
	}

	body {
		min-width: 420px;
		max-width: 1023px;
		background-image: url("../images/ACG_background_map_pc.png");
		background-repeat: no-repeat;
	}
	.wrapper {
		min-width: 420px;
		max-width: 1023px;
	}

/* HEADER TABLET */
    
	.header {
		min-width: 420px;
		max-width: 800px;
	}
	.hlf {
		z-index: 2;
	}
	.hrt {
		z-index: 2;
	}

/* MAIN TABLET */
    
	.containment {
		margin: 0 auto;
		left: 0;
		right: 0;
		max-width: 800px;
	}
	.ctext {
		margin-top: -155px;
	}
    .ctext p {
        font-size: 1em;
    }
	.ctext .center-title {
		font-size: 1.5em;
		font-family: Papyrus;
	}
    .ctext .c-head {
        padding: 5px 0px 25px 0px;
        font-size: 1.7em;
    }
	.bottom {
		margin: 0 auto;
		left: 0;
		right: 0;
		max-width: 800px;
	}

	/* FOOTER TABLET */

}
										/* ------------------------------------------------------------- */
										/* ------------------------------------------------------------- */
/* ------------------------------------------------------------- */
/* ------------------------------------------------------------- */
/* */
/* Media query for DESKTOP and LAPTOP devices */
@media only screen and (min-width: 1024px) {

	.unsupported {
		display: none;
	}
	.mobile {
		display: none;
	}
	.desktop {
		display: initial;
		margin: 0 auto;
		left: 0;
		right: 0;
	}
	html {
		height: 100%;
		margin: 0;
		padding: 0;
	}
	body {
		width: 100%;
		margin: 0 auto;
		position: relative;
	}
	.wrapper {
		max-width: 1100px;
		overflow: visible;
	}

/* HEADER DESK */
    
	.header {
		position: relative;
		justify-content: space-around;
		background-image: url("../images/top_bar_left_transparent_pc.png");
		background-repeat: repeat-x;
		z-index: 4;
	}
	.hlf {
		flex: 0;
		z-index: 2;
	}
	.hcn {
		flex: 1;
		max-width: 337px;
		background-image: none;
		z-index: 0;
	}
	.hcnr {
		flex: 1;
		margin: 0 auto;
		top: 0;
		height: 67px;
		width: 380px;
		background-image: url("../images/top_bar_transparent_pc.png");
		background-repeat: repeat-x;
		z-index: 0;
	}
	.hrt {
		flex: 0;
		z-index: 2;
	}

/* MENU DESK */
    
	.menu {
	    	all: revert;
		float: left;
		position: absolute;
		left: 130px;
		display: flex;
		flex-direction: row;
		z-index: 5;
		}
	.menu p {
		margin: 0 auto;
		color: goldenrod;
		margin-top: 19px;
		padding: 0 25px 0 25px;
		font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
		font-size: 1.2em;
		z-index: 4;
	}
	.menu p:hover {
		color: darkgoldenrod;
		text-decoration: underline overline;
	}
	.menu a {
		color: goldenrod;
		text-decoration: none;
	}
	.URHere {
		pointer-events: none;
		color: darkgoldenrod;
		text-decoration: overline underline;
	}

/*	MAIN DESK */
    
	.pc {
		display: flex;
		flex-direction: row;
		float: left;
		position: relative;
		min-width: 900px;
		min-height: 960px;
		width: 100%;
	}

/* LEFT COLUMN DESK */
    
	.left_pc {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin-top: 12px;
	}
	.pc::before {
		content: "";
		position: absolute;
		margin-left: -155px;
		margin-top: -85px;
		width: 1800px;
		height: 1600px;
		background-image: url("../images/ACG_background_pc.png");
		background-repeat: no-repeat;
		background-position: left top;
		z-index: -1;
	}
	.leftframe {
		float: left;
		position: relative;
		left: 0px;
		margin-top: -48px;
		z-index: 1;
	}
	.compass {
				all: revert;
	}
	.skull_pc {
		flex: 1;
		float: left;
		position: absolute;
		margin: 0 auto;
		left: 35px;
		top: 12px;
	}
	.skulli {
		flex: 1;
		float: left;
		position: absolute;
		margin: 0 auto;
		top: 56px;
		bottom: 0;
		left: 1.5px;
		right: 0;
		transition: transform 3s ease-in-out;
	}

	@keyframes rotate {
		from {transform: rotate(0deg);} to {transform: rotate(360deg);}
	}

	.textchamber {
		flex: 1;
		float: left;
		position: absolute;
		margin: 0 auto;
		left: 70px;
		top: 375px;
	}
	.strange_text {
		z-index: 0;
	}
	.textchamber::after {
		content: " ";
		position: absolute;
		height: 500px;
		width: 500px;
		background: url("../images/planet_athas.png") no-repeat, url("../images/alphabet_transparent_pc.png") no-repeat center top;
		background-blend-mode: screen;
		margin: 0 auto;
		left: -100px;
		top: 50px;
		z-index: 0;
	}
	.ACG-gem {
		flex: 1;
		width: 100px;
		float: left;
		position: relative;
		margin: 0 auto;
		left: -7px;
		right: 0;
		bottom: 45px;
		z-index: 4;
	}
    .updates {
        flex: 2;
        position: relative;
        margin-left: 15px;
        margin-top: -380px;
        width: 400px;
    }
    .updates .center-title {
        font-family: Papyrus;
		padding: 0px 15px 5px 15px;
        font-size: 1.5em;
        color: darkgoldenrod;
        background-color: transparent;
        text-shadow: 1px 1px 14px red;
    }
    .updates p {
        font-family: Packard Antique;
        padding-left: 35px;
		padding-right: 35px;
        font-size: 1.1em;
        color: rgba(255,55,0,.70);
        font-weight: bold;
        background-color: rgba(182,50,50,0.21);
    }

/* RIGHT COLUMN DESK */
    
	.right_pc {
		flex: 3;
		display: flex;
		flex-direction: column;
		margin-top: -35px;
	}
	.rightframe {
		flex: 1;
		display: flex;
		flex-direction: row;
		margin: 0 auto;
		left: 0;
		right: 0;
		width: 550px;
	}
	.textwrap {
		flex: 9;
		padding-top: 40px;
		position: relative;
		background-image: url("../images/scaffold_right_pc.png"), url("../images/scaffold_right_pc.png"), url("../images/paper_top_pc_tile.png"), url("../images/paper_bottom_pc_tile.png"), url("../images/paper_middle_pc_tile.png");
		background-position: top 80px left, top -55px right, top center, bottom center, center center;
		background-repeat: repeat-y, repeat-y, no-repeat, no-repeat, repeat-y;
		z-index: 1;
	}
	.ctext {
				all: revert;
		position: relative;
		margin: 0 auto;
		padding-bottom: 85px;
		z-index: 1;
	}
    .ctext p {
        padding-left: 35px;
		padding-right: 35px;
        font-size: 1.1em;
    }
    .ctext .center-title {
        font-family: Papyrus;
		padding: 0px 15px 20px 15px;
        font-size: 1.5em;
    }
    .ctext .c-head {
        font-family: Papyrus;
        padding: 25px 20px 25px 20px;
        font-size: 1.7em;
        text-shadow: 2px 2px 2px grey;
        font-weight: bold;
    }
	.ctext hr {
		left: 0;
		border: 0;
		height: 60px;
		width: 555px;
		background-image: url("../images/scaffold_hr_lf_pc.png"), url("../images/scaffold_hr_rt_pc.png"), url("../images/scaffold_hr_mid_pc.png");
		background-position: left, right, center;
		background-repeat: no-repeat, no-repeat, repeat-x;
		z-index: 3;
	}

/* FOOTER DESK */
    
	.footwrap {
		position: relative;
		top: -85px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		min-width: 900px;
		max-width: 1100px;
		z-index: 3;
	}
	.footer {
				all: revert;
		flex: 0;
		float: left;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: row;
		background-image: url("../images/bottom_bar_transparent_pc.png");
		background-repeat: repeat-x;
	}
	.footer::before {
				all: revert;
	}
	.flf {
		flex: 0;
		float: left;
		position: absolute;
		margin-left: -10px;
		z-index: 1;
	}
	.fcnr {
		flex: 3;
		float: center;
		position: relative;
		z-index: 1;
	}
	.fcnr p {
		margin-top: 13px;
		margin-left: 135px;
		color: goldenrod;
	}
	.frt {
		flex: 0;
		float: right;
		position: relative;
		margin-right: -10px;
		z-index: 1;
	}
	.bottom {
				all: revert;
		flex: 0;
		position: absolute;
		margin: 0 auto;
		left: 0;
		right: 0;
		width: 100%;
		margin-top: 38px;
		z-index: 0;
	}

/* DESKTOP INTERIOR and MAPS */
    
      body-w {
          height: 1400px;
          background: url("../images/ACG_background_map_pc.png") left top no-repeat;
      }
      .goldtext {
          float: left;
          position: absolute;
          margin-top: 16px;
          z-index: 4;
      }
      body-w .wrapper::before {
          content: " ";
          position: absolute;
          margin: 0 auto;
          left: -10px;
          right: 0;
          height: 500px;
          width: 500px;
          background: url("../images/planet_athas.png") left top no-repeat;
      }
      .hlf-w {
          flex: 0;
          background: url("../images/top_bar_transparent_pc.png") no-repeat left 25px top;
          z-index: 2;
      }
      .hcn-w {
          flex: 1;
          margin: 0 auto;
          top: 0;
          height: 67px;
          max-width: 337px;
          background: url("../images/top_bar_transparent_pc.png") repeat-x;
          z-index: 0;	
      }
      .mapcenter {
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          min-width: 600px;
          max-width: 1120px;
          width: 100%;
      }
      .worldmap {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          font-size: 1.3em;
          z-index: 1;
      }
      .worldmap p {
          flex: 1;
          color: goldenrod;
          font-family: papyrus;
          font-weight: bold;
          margin-bottom: -10px;
      }
      .map {
          flex: 1;
          float: center;
          position: relative;
          margin: 0 auto;
          left: 0;
          right: 0;
          min-width: 200px;
          width: 1000px;
          top: 10px;
      }
      .maplinks {
                  all: revert;
          flex: 1;
          width: 80%;
          margin: 0 auto;
          margin-top: 25px;
          margin-bottom: -25px;
          left: 90px;
          right: 90px;
          height: 50px;
          z-index: 1;			
      }
      .ctext-w {
          padding: 25px 120px 50px 120px;
          background: url("../images/border_left_top_transparent_map.png") left top no-repeat, url("../images/border_right_top_transparent_map.png") right top no-repeat, url("../images/border_lower_left_mobile.png") left bottom no-repeat, url("../images/border_mid_top_transparent_map.png") center top repeat-x, url("../images/border_lower_right_mobile.png") right bottom no-repeat, url("../images/border_bottom_middle_tile_mobile.png") center bottom repeat-x, url("../images/border_left_tile_mobile copy.png") left repeat-y, url("../images/border_right_tile_mobile copy.png") right repeat-y, url("../images/paper_mid_tile_mobile.png") center repeat;
      }
      .ctext-w p {
          font-size: 1.2em;
      }
      .ctext-w strong {
          font-family: IM Fell English, Architects Daughter, Shadows Into Light;
          font-size: 1.1em;
      }	
      .ctext-w .center-title {
          font-size: 1.5em;
          text-shadow: 2px 2px 2px grey;
          padding-top: 5px;
      }
      .ctext-w .c-head {
          font-family: Papyrus;
          font-size: 1.9em;
          text-shadow: 2px 2px 2px grey;
          font-weight: bold;
      }
      .ctext-w a:link {
          color: darkred;
          text-decoration: none;
      }
      .ctext-w a:visited {
          color: darkred;
          text-decoration: none;
      }

      .maplinks p {
          text-align: center;
          font-size: 1.15em;
      }
      .maplinks li {
          text-align: left;
          font-size: 1.15em;
      }
      .maplinks hr {
          border: 0;
          flex: 0;
          height: 28px;
          margin-left: -105px;
          margin-right: -105px;
          background-image: url("../images/scaffold_hr_lf_pc.png"), url("../images/scaffold_hr_rt_pc.png"), url("../images/scaffold_hr_mid_pc.png");
          background-position: left, right, center;
          background-repeat: no-repeat, no-repeat, repeat-x;
          z-index: 3;
      }
      hr.spear {
          flex: 0;
          height: 51px;
          margin: 0 auto;
          left: 0;
          right: 0;
          margin-bottom: -15px;
          max-width: 75%;
          background-image: url("../images/spaar-left.png"), url("../images/spaar-right.png"), url( "../images/spaar-middle.png");
          background-position: left center, right center, center;
          background-repeat: no-repeat, no-repeat, repeat-x;
          z-index: 2;
      }
      .footwrap2 {
          flex: 1;
          position: relative;
          top: 25px;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          min-width: 900px;
          max-width: 1100px;
          padding-bottom: 150px;
      }

      .map-container {
          position: relative;
          display: inline-block;
      }
      .map-image {
          display: block;
          height: auto;
          flex: 1;
          position: relative;
          margin: 0 auto;
          left: 0;
          right: 0;
          width: 1000px;
          top: 10px;
      }

      .grid-overlay {
          position: absolute;
          margin: 0 auto;
          left: -45px;
          right: 0;
          top: 85px;
          width: 485px;
          height: 380px;
          display: grid;
          grid-template-rows: repeat(8, 1fr); /* 8 rows */
          grid-template-columns: repeat(7, 1fr); /* 7 columns */
      }
      .grid-cell, .grid-cell-complete {
          border: 1px dashed rgba(145, 0, 0, 1);
          position: relative;
          cursor: pointer;
          display: flex;
          justify-content: center; /* Center horizontally */
          align-items: center; /* Center vertically */
          background-color: transparent; /* Default background */
          background-size: cover;
          background-position: center;
      }
      .grid-cell::before, .grid-cell-complete::before {
          content: attr(data-col) attr(data-row); /* Display the label from data attributes */
          opacity: 0; /* Hide by default */
          transition: opacity 0.2s ease-in-out; /* Smooth transition */
          color: rgba(97,0,0,1.00); /* Adjust text color as needed */
          font-weight: bold;
          font-family: Papyrus;
          text-shadow: -2px -2px 1px white;
          pointer-events: none; /* Ensure it doesn't interfere with clicks */
      }
      .grid-cell:hover, .grid-cell-complete:hover {
          opacity: 1; /* Increase opacity on hover */
      }
      .grid-cell:hover::before, .grid-cell-complete:hover::before {
          opacity: 1; /* Show text on hover */
      }
      .hover-image {
          z-index: 100; /* Ensure the image appears above other content */
          width: 100px; /* Adjust width */
          height: 100px; /* Adjust height */
          background-size: cover;
          background-repeat: no-repeat;
          transition: transform 0.2s ease-in-out; /* Smooth transition for scaling */
      }

/* END */

}