@import url(https://fonts.googleapis.com/css2?family=Fira+Code);
@import url(https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100);
@import url(https://fonts.googleapis.com/css?family=Lobster);
@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@600&display=swap');


body {
	display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    font: 100% Georgia, serif;
    box-sizing: border-box;
    width: 100%;
    min-height: 100%;
    font-size: 1.5em;
    line-height: 1.5em;
    margin: 0;
    background-color: #000;
    color: #fff;
}
img {
 max-height: 100%;
 max-width: 100%;
 z-index: 0;
}

audio{
width: 100%;
border-radius: none;
height: 100%;

}

a {
  color: hotpink;
}

div.main{
  position: fixed;
width: 100%;
height: 100%;
}

div.mainfadein{
position: fixed;
width: 100%;
height: 100%;
background-color: black;
animation:fadeinone 2s normal;
opacity:0;
z-index: -5;
}
@keyframes fadeinone{
    0%{opacity:1;z-index: 150;}
    100%{opacity:0;z-index: -5;}
}

@font-face {
  font-family: sinkinlight;
  src: url("../resources/sinkinlight.ttf");
}

div.darkmapexplain{
position:fixed;
top:0;
right:12vw;
height:50px;
width:18vw;
font-size: 1vw;
line-height: 1em;
color: white;
z-index: 10;
font-family: sinkinlight;
border: solid 2px white;
border-radius: 5px;
}
div.darkmapexplain:hover{
color: white;

}
div.darktrans{
position: absolute;
top:2vw;
left:15vw;
width:70vw;
height:20vw;
background-image: url("../resources/trans.png");
background-size: 100% 100%;
z-index: 100;
opacity: 1;
}

div.darktranstoptext{
position: absolute;
top:-35%;
width:100%;
height:20%;
font-family: sinkinlight;
font-size: 2vw;
color:white;
line-height: 1em;
}

div.darkgobutton{
position: absolute;
top: 35vh;
left:15vw;
width:30vw;
height:38vh;
background-image: url("../resources/bigarrow1.png");
background-size: 100% 100%;
text-align: center;
z-index: 50;
font-family: sinkinlight;
font-size: 3vw;
color: white;
background-color: transparent;
transform: rotate(45deg);
}
div.darkgobutton:hover{
background-color: purple;
color: white;
border: solid 2px white;
}

div.twopaths{
position:absolute;
top:20vh;
line-height: 1em;
width:80vw;
font-size: 4vw;
color: white;
font-family: sinkinlight;
text-align: center;
z-index: 10;
}

div.navpaths{
position:absolute;
bottom:4vh;
right:20vw;
width:80vw;
font-size: 2vw;
font-weight: bold;
line-height: 1em;
color: white;
font-family: sinkinlight;
text-align: center;
z-index: 10;
}

div.navpaths2{
position:absolute;
top:0;
left:0;
width:100vw;
height:400vw;
font-size: 1.5vw;
font-weight: bold;
line-height: 1em;
color: black;
font-family: sinkinlight;
text-align: center;
z-index: 10;
}
div.navpaths2text{
  padding:20px;
  line-height: 1.2em;
  width:70%;
  height:100%;
  left:0;
  text-align: justify;
  color: black;
  overflow: scroll;
  column-count: 1;
}
div.glogo{
position: fixed;
right:0;
top:40%;
width: 23vw;
height: 33vw;
background-image: url("../resources/glogo.jpg");
background-size: 100% 100%;
z-index: 5;
}

div.sdlogo{
position: fixed;
right:0;
top:7%;
width: 23vw;
height: 20vw;
background-image: url("../resources/morescreendive.png");
background-size: 100% 100%;
z-index: 5;
}

div.glogo2{
position: absolute;
left:0;
width: 23vw;
height: 16vw;
background-image: url("../resources/mayaluke.jpeg");
background-size: 100% 100%;
z-index: 4;
}

div.darkgobutton2{
position: absolute;
background-color: transparent;
top: 35vh;
left:58vw;
width:30vw;
height:38vh;
transform: rotate(-45deg);
background-image: url("../resources/bigarrow2.png");
background-size: 100% 100%;
text-align: center;
z-index: 50;
font-family: sinkinlight;
font-size: 2vw;
color: black;
}
div.darkgobutton2:hover{
background-color: purple;
background-image: "none";
color: white;
border: solid 2px white;
}

div.pathtext{
position:absolute;
top:-10vw;
height:10vw;
color:white;
width:220%;
line-height: 1em;
}

div.darktransbottomtext{
position: absolute;
bottom:-20%;
width:100%;
height:20%;
font-family: sinkinlight;
font-size: 2vw;
color:white;
line-height: 1em;
}

div.mainfadeinslow{
position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background-color: black;
animation:fadeinone 8s normal;
opacity:0;
z-index: -5;
width:90%;
height:80%;
}
@keyframes fadeinone{
    0%{opacity:1;z-index: 150;}
    100%{opacity:0;z-index: -5;}
}

@keyframes fadeinslow{
0%{opacity:1;z-index: 150;}
        90%{opacity: 0.5;}
        100%{opacity:0;z-index: -5;}
}

div.background{
position: fixed;
width: 100%;
height: 100%;
background-color: blue;
opacity: 0.3;
animation: blueanim 40s infinite;
}

@keyframes blueanim{
0%{background-color: black}
10%{background-color: black}
19%{background-color: blue}
30%{background-color: lightblue}
50%{background-color: cyan}
100%{background-color: blue}
}

div.backgroundtwo{
position: absolute;
background-color: black;
width: 100%;
height: 100%;
display: block;
z-index: 6;
}

@keyframes goldanim{
0%{background-color: gold}
10%{background-color: yellow}
19%{background-color: gold}
30%{background-color: gold}
50%{background-color: brown}
100%{background-color: gold}
}

div.backgroundspikey{
position: fixed;
width: 100%;
height: 100%;
background-image: url("../resources/mayabackground.jpg");
background-size: cover;
z-index: -1;
}

div.backgroundoverlay{
position: fixed;
width: 100%;
height: 100%;
background-image: url("../resources/welcome.png");
background-size: 100% 100%;
z-index: 1;
}

div.information{
    position: absolute;
    width:100%;
    height:7%;
    right:0;
    bottom:10%;
    background-image: url("../resources/mayabackground.jpg");
    border-radius: 10px;
    z-index: 5;
    color: black;
    font-size: 2em;
    line-height: 1em;
    text-align: center;
    font-weight: bold;
}

div.information:hover{
    color: gold;
    cursor:pointer;
}

div.treasure{
position:absolute;
width: 400px;
height:400px;
background-image: url("../resources/chestclosed.png");
background-size: 100% 100%;
background-color: black;
top: 20%;
left: 50%;
z-index: 60;
}

div.treasure:hover{
background-image: url("../resources/chestopen.png");
}

div.treasuresign{
position: absolute;
bottom:0;
width:30%;
font-size: 3vw;
height:20%;
z-index: 6;
color: white;
background-image: url("../resources/telescope.png");
background-size: 100% 100%;
display: none;
animation: none;
background-color: black;
}

div.treasuresign:hover{
  width: 35%;
  height: 23%;
  animation: sign 1s normal;
}

div.treasuresign:active{
 background-color: yellow;
 border-radius: 10px;
 color: black;
}

@keyframes sign{
  0%{width: 30%; height:20%;}
    100%{width: 35%; height:23%;}
}

div.spikey1{
position: absolute;
background-image: url("../resources/spikeyball1.png");
background-size: 100% 100%;
width: 25%;
height: 35%;
left: 25%;
top: 48%;
z-index: 6;
animation: spikeyone 35s infinite;
opacity: 0.8;
}

div.spikey1:hover{opacity: 0.7}

div.spikey1b{
position: absolute;
background-image: url("../resources/spikeyball1.png");
background-size: 100% 100%;
width: 25%;
height: 35%;
left: 25%;
top: 10%;
z-index: 6;
animation: spikeyone 35s infinite;
opacity: 1;
}
div.spikey1b:hover{
opacity: 0.9;
}



div.spikey2{
position: absolute;
background-image: url("../resources/spikeyball1.png");
background-size: 100% 100%;
width: 25%;
height: 30%;
left: 25%;
top: 48%;
z-index: 2;
animation: spikeyone 35s infinite;
opacity: 0.8;
transform: none;
}

@keyframes spikeyone{
0%{left: 25%;}
20%{left: 35%;}
30%{left: 28%;}
50%{left: 31%;}
70%{left: 33%;}
100%{left: 25%;}
}

@keyframes crazymake{
0%{width: 25%;height: 30%;}
5%{width: 27%;height: 35%;}
10%{width: 25%;height: 30%;}
30%{width: 27%;height: 35%;}
60%{width: 25%;height: 30%;}
90%{width: 27%;height: 35%;}
100%{width: 25%;height: 30%;}
}


div.spikeydescription{
position:absolute;
bottom: -10%;
font-size: 2vw;
color: white;
font-family: sinkinlight;
}


div.title{
    position: absolute;
font-size: 8vw;
color:black;
width:80%;
height: 50%;
padding: 5%;
}

div.block{
position: absolute;
font-size: 4vw;
line-height: 1em;
color:black;
left:5%;
width:80%;
top: 10%;
height: 80%;
padding: 5%;
}

div.chromebox{
position: absolute;
left:0;
bottom:0;
height:100px;
width:100px;
background-image: url("../resources/chrome.png");
background-size: 100% 100%;
z-index: 1;
}
div.chromereccomend{
position: absolute;
text-align: right;
left:0;
bottom:0;
height:100px;
width:300px;
background-color: pink;
color:black;
z-index: 0;
font-size: 2.4vw;
}

button.okbutton{
    position:fixed;
background-image:url("../resources/crystal1.png");
background-size: 100% 100%;
width: 200px;
height:200px;
bottom:20%;
right:40%;
font-size: 4vw;
border-radius: 30px;
color: pink;
background-color: transparent;
box-shadow: none;
z-index: 5;
}

button.okbutton:hover{
background-image:url("../resources/crystal1.png");
background-size: 100% 100%;
width: 200px;
height:200px;
border-radius: 30px;
color: blue;
background-color: pink;
}


div.mapsquare1{
position: fixed;
top:0;
right:0;
width: 50px;
height:50px;
background-color: white;
animation:none;
background-image: url("../resources/map.jpeg");
  background-size: 100% 100%;
  border-style: solid;
  border-color: white;
  border-radius: 10px;
  z-index: 5;
}

div.mapsquarearrow{
position: fixed;
top:0;
right:60px;
width: 50px;
height:50px;
background-image: url("../resources/arrow.png");
  background-size: cover;
  border-style: solid;
  border-color: white;
  border-radius: 10px;
  z-index: 4;
}

div.mapsquare1:hover{
width:60%;
height:60%;
animation:mapfiller 2s normal;
}

@keyframes mapfiller{
  0%{width: 50px; height:50px;}
    100%{width: 60%; height:60%;}
}

div.youarehere{
position:absolute;
width: 20%;
height: 22%;
background-image:url("../resources/crystal1fade.png");
background-size: 100% 100%;
top:30%;
right:50%;
color:black;
font-size: 0.4ems;
line-height: 1em;
animation: urhere 2s ease-in infinite;
}

@keyframes urhere{
0%{top: 30%;}
10%{top: 40%;}
100%{top: 30%;}
}


div.navsquare1{
position: fixed;
top:0;
left:0;
width: 50px;
height:50px;
background-color: white;
animation:none;
  border-style: solid;
  border-color: white;
  border-radius: 10px;
  z-index: 15;
  opacity:0;
}

div.navsquare1b{
position: fixed;
top:0;
left:0;
width: 50px;
height:50px;
background-color: blue;
animation:none;
border-style: solid;
border-color: white;
border-radius: 10px;
z-index: 14;
opacity:1;
}



div.navsquarearrow{
position: fixed;
top:0;
left:60px;
width: 50px;
height:50px;
background-image: url("../resources/arrowleft.png");
  background-size: cover;
  border-style: solid;
  border-color: white;
  border-radius: 10px;
  z-index: 14;
}

div.navsquare1:hover{
width:80%;
height:60%;
animation:navfiller 2s normal;
opacity:1;
}

@keyframes mapfiller{
  0%{width: 50px; height:50px;}
    100%{width: 60%; height:60%;}
}
@keyframes navfiller{
  0%{width: 50px; height:50px;}
    100%{width: 80%; height:60%;}
}

div.navigation1{
position:absolute;
width:70%;
height:40%;
top:0;
position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
color:white;
font-size: 2vw;
}


div.navfree{
position: absolute;
width:50%;
height:40%;
    background-image: url(../resources/scuba1b.png);
    background-size: 100% 100%;
    bottom: 5%;
    right:5%;
    border-radius: 10px;
    color: white;
    text-align: center;
    font-size: 1vw;
    line-height: 1vw;
}

div.navguided{
position: absolute;
width:50%;
height:40%;
    background-image: url(../resources/scuba2.png);
    background-size: 100% 100%;
    top: 20%;
    left:5%;
    border-radius: 10px;
    color: white;
    text-align: center;
    font-size: 1vw;
    line-height: 1vw;
}

div.navtitle{
position: absolute;
width:100%;
height:10%;
color: black;
text-align: left;
font-size: 3vw;
}

div.navsquareinside{
position: absolute;
top:20%;
left:10%;
width:80%;
height:70%;
border: solid 3px black;
}


div.point{
position:absolute;
width:15px;
height: 15px;
border-radius: 50%;
background-color: white;
border: solid 3px black;
z-index: 180;
}
div.point:hover{
background-color: orange;
}
div.pointtext{
    position: absolute;
    bottom:100%;
    color:white;
    border-radius: 2px;
    font-size: 1vw;
    background-color: blue;
    line-height: 1em;
}


div.cat1{
position: absolute; 
height:20%;
width: 100%;
left:0;
background-color: yellow;
}

div.cattext{
position: absolute; 
height:20%;
width: 100%;
left:-13%;
background-color: lightblue;
text-align: left;
font-size: 1.7vw;
}

div.line1{
position: absolute; 
height:20%;
width: 100%;
background-image: url("../resources/nav/line1.png"); 
background-size: 100% 100%;
}
div.line2{
position: absolute; top: 26%;
height:20%;
width: 100%;
background-image: url("../resources/nav/line2.png"); 
background-size: 100% 100%;
}
div.line3{
position: absolute; top: 62%;
height:20%;
width: 100%;
background-image: url("../resources/nav/line3.png"); 
background-size: 100% 100%;
}



div.WELCOME2STUFF{}

div.navigationbig{
position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width:90%;
height:80%;
color: white;
font-size: 3vw;
line-height: 1em;
}

div.navigationhuge{
position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width:90%;
height:80%;
color: lightblue;
font-size: 5vw;
line-height: 1em;
}

div.navigationbiggest{
position:fixed;
top:10%;
left:10%;
width:90%;
height:80%;
color: white;
font-size: 3vw;
line-height: 1em;
}
div.navigationhugest{
position: absolute;
width:95%;
height:95%;
top:0;
color: lightblue;
font-size: 9vw;
line-height: 1em;
animation: hugest 10s infinite;
opacity: 0;
}

@keyframes hugest{
0%{opacity:1;}
60%{opacity:1;}
75%{opacity:0;}
90%{opacity:1;}
100%{opacity:1;}
}








div.THESMOUNDSTUFF{}
div.smoundborder{
position:fixed; 
width:99.3%;
height: 98.7%;
border: solid 5px purple;
}

div.smound1{
position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 80%;
height:80%;
background-color: white;
font-size: 2vw;
}



div.smoundvid1{
position: fixed;
left:0;
top:0;
width: 50%;
height:100%;
vertical-align: center;
text-align: center;
z-index: 5;
display: none;
background-color: pink;
}

div.smoundvidtext{
font-family: courier-new;
position:absolute;
bottom:8%;
height:50%;
width:100%;
background-color: pink;
z-index: 4;
color:black;
text-align: left;
font-size: 3vh;
line-height: 1em;
}

div.smoundsmellbutton{
position: absolute;
width: 15%;
height:5%;
right:20%;
top: 54%;
background-color: white;
color:white;
z-index: 5;
border: solid 2px black;
font-size: 1.2vw;
font-family: courier-new;
}
div.smoundsmellbutton2{
position: absolute;
width: 55%;
height:5%;
left:0;
top: 54%;
background-color: white;
color:black;
z-index: 5;
border: solid 2px black;
font-size: 3vw;
font-family: courier-new;
}

div.smoundsmellbutton:active{
background-color: blue;
color: white;
}

div.sound1{
position: fixed;
right: 10%;
top:0;
width: 40%;
height:100%;
vertical-align: center;
text-align: center;
z-index: 5;
background-color: pink;
}

div.soundvidtext{
position:absolute;
font-family: courier-new;
bottom:8%;
height:50%;
width:100%;
background-color: pink;
z-index: 4;
color:black;
text-align: left;
font-size: 3vh;
line-height: 1em;
}


div.shadowwindow {
    z-index: 10;
font-family: verdana;
  padding: 30px;
  font-size: 2.3vh;
line-height: 1em;
letter-spacing: 2px;
text-align: left;
color: black;
background-image: url("../resources/raven1b.jpg");
background-size: 120% 140%;
  border: 5px solid yellow;
  outline: none;
    border-color: pink;
    box-shadow: 0 0 17px #9ecaed;
  height: 60%;
  width: 80%;
  margin: 0px auto;
  position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}

div.shadowwindowtitle{
position:absolute;
width:100%;
height:10%;
top:5%;
color:black;
font-size: 3vw;
font-family: verdanabold;
}

div.thex:hover{
position: absolute;
top:10px;
right:0;
color: white;
font-size: 6vw;
font-weight: bold;
}

div.thex{
position: absolute;
top:10px;
right:0;
color: pink;
font-size: 6vw;
font-weight: bold;
}


div.toggle1{
position: absolute;
width:10%;
height:10%;
top:30%;
right:0;
background-color: lightblue;
animation: none;
border-radius: 5px;
text-align: center;
vertical-align: middle;
font-size: 1.9vw;
font-family: courier-new;
}

div.toggle1:hover{
    cursor:pointer;
    background-color: white;
color: black;
}
div.toggle1:active{
background-color: lightblue;
}

div.maindescription{
    font-family: verdanabold;
position: absolute;
height: 70%;
width:70%;
color: black;
border:solid 2px white;
padding: 10px;
font-size: 2.7vh;
line-height: 1em;
position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}

div.purplemain{
position: fixed;
width: 150%;
height: 150%;
background-image: url("../resources/raven1.jpg");
background-size: 100% 150%;
z-index: -2;
}
 
@font-face {
  font-family: verdana;
  src: url("../resources/verdana.ttf");
}

@font-face {
  font-family: verdanabold;
  src: url("../resources/verdanabold.ttf");
}

@font-face {
  font-family: courier-new;
  src: url("../resources/courier-new.ttf");
}

div.movingword{
position:absolute;
font-size: 5vw;
color: white;
animation: movingword 35s infinite;
top:20%;
left:20%;
}

div.wordbubble{
position:absolute;
font-size: 5vw;
color: white;
animation: bubbleup 25s infinite;
top:20%;
left:20%;
}

@keyframes movingword{
0%{transform: translate(0px, 0px);}
10%{transform: translate(10px, 30px);}
20%{transform: translate(20px, -40px);}
30%{transform: translate(10px, 30px);}
40%{transform: translate(-10px, 200px);}
50%{transform: translate(100px, 4px);}
60%{transform: translate(-200px, -80px);}
70%{transform: translate(100px, -200px);}
80%{transform: translate(100px, 4px);}
90%{transform: translate(20px, -40px);}
100%{transform: translate(0px, 0px);}
}

@keyframes bubbleup{
0%{transform: translate(0px, 2000px);}
100%{transform: translate(0px, -2000px);}
}

@keyframes bubbleup2{
0%{transform: translate(0px, 2000px);}
10%{transform: translate(10px);}
20%{transform: translate(20px);}
30%{transform: translate(10px);}
40%{transform: translate(-10px);}
50%{transform: translate(100px);}
100%{transform: translate(0px, -2000px);}
}