body, html
{
background-color: #000;
margin: 0;
padding: 0;
height: 100vh;
}

* {
    box-sizing: border-box;
}



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

li
{
padding: .2rem;
}



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

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

h3
{
font-family: "courier", serif;
font-size: 1.1em;
font-weight: bold;
margin-left: 4em;
text-align: left;
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: 4em;
color: #000;
}


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

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: 10%;
}

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

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

p.contact img
{
display: inline-block;
vertical-align: bottom;
margin-right: .5em;
width: 2.3em;
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: 3rem;
width: 3rem;
margin: 1rem;
}

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

div.largecontainer
{ 
width: 2200px;
height: 1734px;
}

div.artcontainer
{ 
width: 1920px;
height: 1425px;
}

g
{
opacity: 0;    
}


div.wellcontainer
{
background-image: url(oracle_art/landofthewell.jpg);
width: 2200px;
height: 1734px;   
}

#wellworld
{
width: 2200px;
height:1734px;
fill: none;
}

div.mermaidcontainer
{
background-image: url(oracle_art/26x0hTMh12sy8l4.jpg);
width: 1920px;
height: 2950px;
}

#mermaid
{
width: 1920px;
height: 2950px;
fill: none;
}

div.tunnelcontainer
{
background-image: url(oracle_art/23tr8Ldt43ze87i.jpg);
width: 1920px;
height: 1425px;   
}

#tunnel
{
width: 1920px;
height: 1425px;
fill: none;   
}

div.staircontainer
{
background-image: url(oracle_art/36n4TSw30Rw4s22.jpg);
width: 1920px;
height: 1425px;   
}

#twostairs
{
width: 1920px;
height: 1425px;
fill: none;   
}

div.zgdcontainer
{
background-image: url(oracle_art/29a6zGD00ta3txL.jpg);
width: 1920px;
height: 1425px;   
}

#zenday
{
width: 1920px;
height: 1425px;
fill: none;
}

div.zgnightcontainer
{
background-image: url(oracle_art/33a8Zgn63ra43Y.jpg);
width: 1920px;
height: 1425px;   
}

#zennight
{
width: 1920px;
height: 1425px;
fill: none;
}

div.moonpalacecontainer
{
background-image: url(oracle_art/39rV0pOm9aLX3v.jpg);
width: 1920px;
height: 1425px;   
}

#moonpalace
{
width: 1920px;
height: 1425px;
fill: none;   
}

div.owlqueencontainer
{
background-image: url(oracle_art/41lRtOQ57bt2f7.jpg);
width: 1920px;
height: 2607px;   
}

#owlqueen
{
width: 1920px;
height: 2607px;
fill: none;   
}

div.marketplacecontainer
{
background-image: url(oracle_art/45cXtMP33vR7ya.jpg);
width: 2000px;
height: 1507px;   
}

#marketplace
{
width: 2000px;
height: 1507px;
fill: none;   
}

div.keycitycontainer
{
background-image: url(oracle_art/57SaFtKC33rV3Rh.jpg);
width: 2000px;
height: 1503px;   
}

#keycity
{
width: 2000px;
height: 1503px;
fill: none;   
}

div.scarabcontainer
{
background-image: url(oracle_art/53lrFgSl83nX4aC.jpg);
width: 1920px;
height: 1428px;   
}

#goldenscarab
{
width: 1920px;
height:1428px;
fill: none;   
}

div.fountaincontainer
{
background-image: url(oracle_art/65crRynF48pQ5tv.jpg);
width: 1920px;
height: 2484px;   
}

#fountain
{
width: 1920px;
height:2484px;
fill: none;   
}

div.copyright
{
padding: 10em;
}

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


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