html 
{
height: 100vh; 
min-height: 100%; 
}

body
{
background-color: #000;
margin: 0;
padding: 0;
height: 100%;
}

* {
    box-sizing: border-box;
}



ul
{
font-family: "courier", serif;
font-weight: bold;
font-size: 1.1rem;
list-style-type: circle;
color: #28524D;
margin: 0;
padding-top: 2.2rem;
padding-bottom: 1.6rem;
}

li
{
padding: .2rem;
}



h1
{
font-family: "courier", serif;
font-size: 1.1em;
font-weight: bold;
margin: 0;
text-align: center;
color: #000;
padding-top: 1.5rem;
clear: both;
}

h2
{
font-family: "courier", serif;
font-weight: 100;
font-size: 1.1em;
margin-left: 1rem;
margin-right: 1rem;
text-align: left;
color: #28524D;
line-height: 1.2em;
}

h3
{
font-family: "courier", serif;
font-size: 1.1em;
font-weight: bold;
margin-top: 1em;
margin-left: 0.3em;
margin-right: 0.3em;
text-align: center;
color: #000;
}

h4
{
font-family: "verdana ref", arial, sans-serif;
font-size: .8em;
font-weight: normal;
font-variant: small-caps;
text-align: center;
margin-left: 0.3em;
margin-right: 0.3em;
color: #000;
}


p
{
font-family: "courier", serif;
text-indent: 0;
color: #28524D;
margin-left: 1rem;
margin-right: 1rem;
line-height: 1.2em;
}

span.bold
{
font-family: "courier", serif;
font-size: 1em;
font-weight: bold;
color: #000;
}

span.bigger
{
font-size: 2em;    
}


a
{
color: #28524D;
text-decoration: none;
}

a:hover 
{
color: #000;
}


div.index
{
background-color: #000000;
min-height: 100vh;
width: 100%;
}

div.logobox
{
padding-top: 40%;
}

img.logo
{
display: block;
margin-left: auto;
margin-right: auto;
width:90%;  
}

div.about
{
background-color: #F4C1C1;
min-height: 100vh;
width: 100%;
padding-left: .3em;
padding-right: .3em;
display: inline-block;
}

p.contact
{
text-indent: 0;   
}

p.contact img
{
display: inline-block;
vertical-align: bottom;
margin-right: .7em;
width: 2.2em;
opacity: 1;   
}

p.contact img:hover
{
opacity: .7;
}

p.contact a
{
color: #000;
text-decoration: none;
}

p.contact a:hover 
{
color: #28524d;
}


img.buttonabt
{
float: left;
height: 2.5rem;
width: 2.5rem;
margin: .8rem;
}

img.button
{
position: fixed;
top: 1rem;
left: 1rem;
height: 2.5rem;
width: 2.5rem;
}


div.artcontainer
{ 
position: relative;
overflow: scroll;
padding: 0;
margin: 0;
}

g
{
fill:rgb(242, 241, 237);
stroke: #ffcc00;
stroke-width: 6px;
stroke-dasharray: 5,10,5,8,5,7;
stroke-opacity: 0.7;
opacity: 0.4;    
}



div.wellcontainer
{
background-image: url(mobile_art/m.landofthewell.jpg);
width: 1400px;
height: 1103px;   
}

#wellworld
{
width: 1400px;
height:1103px;
fill: none;
}

div.tunnelcontainer
{
background-image: url(mobile_art/m.23tr8Ldt43ze87i.jpg);
width: 1430px;
height: 1061px;   
}

#tunnel
{
width: 1430px;
height: 1061px;
fill: none;   
}

#tunnelmap
{
fill:rgb(242, 241, 237);
stroke: #ffcc00;
stroke-width: 6px;
stroke-dasharray: 5,10,5,8,5,7;
stroke-opacity: 0.4;
opacity: 0.1;    
}

div.staircontainer
{
background-image: url(mobile_art/m.36n4TSw30Rw4s22.jpg);
width: 1430px;
height: 1061px;   
}

#twostairs
{
width: 1430px;
height: 1061px;   
fill: none;
}

#stairmap
{
fill:rgb(242, 241, 237);
stroke: #ffcc00;
stroke-width: 6px;
stroke-dasharray: 5,10,5,8,5,7;
stroke-opacity: 0.4;
opacity: 0.5;    
}

div.marketplacecontainer
{
background-image: url(mobile_art/m.45cXtMP33vR7ya.jpg);
width: 1408px;
height: 1061px;   
}

#marketplace
{
width: 1408px;
height: 1061px;
fill: none;   
}

div.keycitycontainer
{
background-image: url(mobile_art/m.57SaFtKC33rV3Rh.jpg);
width: 1430px;
height: 1070px;   
}

#keycity
{
width: 1430px;
height: 1070px;
fill: none;   
}

div.scarabcontainer
{
background-image: url(mobile_art/m.53lrFgSl83nX4aC.jpg);
width: 1430px;
height: 1063px;   
}

#goldenscarab
{
width: 1430px;
height: 1063px;
fill: none;   
}

#scarabmap
{
fill:rgb(242, 241, 237);
stroke: #ffcc00;
stroke-width: 6px;
stroke-dasharray: 5,10,5,8,5,7;
stroke-opacity: 0.4;
opacity: 0.3;    
}


div.fountaincontainer
{
background-image: url(mobile_art/m.65crRynF48pQ5tv.jpg);
width: 1400px;
height: 1811px;   
}

#fountain
{
width: 1400px;
height: 1811px;
fill: none;   
}

#fountainmap
{
fill:rgb(242, 241, 237);
stroke: #c7f707;
stroke-width: 5px;
stroke-dasharray: none;
stroke-opacity: 1.0;
opacity: 0.3;    
}

div.zgdcontainer
{
background-image: url(mobile_art/m.29a6zGD00ta3txL.jpg);
width: 1430px;
height: 1061px;   
}

#zenday
{
width: 1430px;
height: 1061px;
fill: none;
}

#zendaymap
{
fill:rgb(242, 241, 237);
stroke: #c7f707;
stroke-width: 5px;
stroke-dasharray: none;
stroke-opacity: 0.4;
opacity: 0.4;    
}

div.zgnightcontainer
{
background-image: url(mobile_art/m.33a8Zgn63ra43Y.jpg);
width: 1430px;
height: 1061px;   
}

#zennight
{
width: 1430px;
height: 1061px;
fill: none;
}

#zennightmap
{
fill:rgb(242, 241, 237);
stroke: #ffcc00;
stroke-width: 6px;
stroke-dasharray: 5,10,5,8,5,7;
stroke-opacity: 0.6;
opacity: 0.3;    
}

#zendaymap
{
fill:rgb(242, 241, 237);
stroke: #c7f707;
stroke-width: 5px;
stroke-dasharray: none;
stroke-opacity: 0.4;
opacity: 0.4;    
}

div.moonpalacecontainer
{
background-image: url(mobile_art/m.39rV0pOm9aLX3v.jpg);
width: 1430px;
height: 1061px;   
}

#moonpalace
{
width: 1430px;
height: 1061px;
fill: none;   
}

#palacemap
{
fill:rgb(242, 241, 237);
stroke: #ffcc00;
stroke-width: 6px;
stroke-dasharray: 5,10,5,8,5,7;
stroke-opacity: 0.6;
opacity: 0.3;    
}

div.owlqueencontainer
{
background-image: url(mobile_art/m.41lRtOQ57bt2f7.jpg);
width: 1400px;
height: 1901px;   
}

#owlqueen
{
width: 1400px;
height: 1901px;
fill: none;   
}

#owlmap
{
fill:rgb(242, 241, 237);
stroke: #ffcc00;
stroke-width: 6px;
stroke-dasharray: none;
stroke-opacity: 0.6;
opacity: 0.3;    
}

div.mermaidcontainer
{
background-image: url(mobile_art/m.26x0hTMh12sy8l4.jpg);
width: 1400px;
height: 2151px;   
}

#mermaid
{
width: 1400px;
height: 2151px;
fill: none;
}

#mermaidmap
{
fill:rgb(242, 241, 237);
stroke: #ffcc00;
stroke-width: 6px;
stroke-dasharray: 5,10,5,8,5,7;
stroke-opacity: 0.7;
opacity: 0.4;    
}

div.copyright
{
padding-top: 5em;
padding-left: 2em;
padding-right: 2em;
padding-bottom: 2em;
}

div.copyright p
{
font-family: "courier", serif;
text-indent: 0;
color: #59b4aa;
}


span.reverse{
unicode-bidi: bidi-override;
direction: rtl;
}