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;
    padding: 0% 0%;
    margin: 0;
    background-color: #000;
    color: #fff;
    z-index: 150;
}
img {
 max-height: 100%;
 max-width: 100%;
 z-index: 10;
}





div.logo1{
  position: fixed; 
  top:0;
  left:0;
  width: 100vw;
  animation: logo1 10s normal;
  opacity: 0;
  z-index: -1;
}
div.logo2{
  position: fixed; 
  top:0;
  left:0;
 width: 100vw;
  animation: logo2 10s normal;
  z-index: -1;
}
div.logo3{
  position: fixed; 
  top:0;
  left:0;
 width: 100vw;
  animation: logo3 10s normal;
  z-index: -1;
}
@keyframes logo1{
0%{opacity: 0;} 
10%{opacity: 0;} 
20%{opacity: 1;} 
30%{opacity: 0;} 
100%{opacity: 0;} 
}
@keyframes logo2{
0%{opacity: 0;} 
20%{opacity: 0;} 
30%{opacity: 1;} 
40%{opacity: 0;} 
100%{opacity: 0;} 
}
@keyframes logo3{
0%{opacity: 0;} 
30%{opacity: 0;} 
40%{opacity: 1;} 
50%{opacity: 0;} 
100%{opacity: 0;} 
}








div.javierfirst{
position:fixed;
top:0;
left:55vw;
width:5vw;
height:5vh;
background-color: black;
color:white;
border:solid 2px white;
border-radius: 50%;
z-index: 50;
text-align: center;
display: block;
}
div.javierfirst:hover{
	background-color: white;
	border: solid 2px black;
	color: black;
}

div.javiersecond:hover{
	background-color: white;
		border: solid 2px black;
	color: black;
}

div.javierthird:hover{
	background-color: white;
		border: solid 2px black;
	color: black;
}

div.javierfourth:hover{
	background-color: white;
		border: solid 2px black;
	color: black;
}

div.javiersecond{
position:fixed;
top:0;
left:62vw;
width:5vw;
height:5vh;
color:white;
background-color: black;
border:solid 2px white;
border-radius: 50%;
z-index: 50;
	text-align: center;
	display: block;
}

div.javierthird{
position:fixed;
top:0;
left:69vw;
width:5vw;
height:5vh;
color:white;
background-color: black;
border:solid 2px white;
border-radius: 50%;
z-index: 50;
text-align: center;
display: block;
	
}

div.javierfourth{
position:fixed;
top:0;
left:76vw;
width:5vw;
height:5vh;
color:white;
background-color: black;
border:solid 2px white;
border-radius: 50%;
z-index: 50;
	text-align: center;
	display: block;
}


div.javierpiececredits{
position: fixed;
top:0%;
width:100%;
height:5%;
background-color: lightyellow;
color: black;
text-align: center;
}

div.javierpiececredits2{
position: fixed;
bottom:0%;
width:100%;
height:5%;
background-color: lightyellow;
color: black;
text-align: center;
}


div.javierbuttoncontainer{
position: fixed;
top:5%;
left:5%;
height: 90%;
width: 90%;
border: solid 10px lightyellow;
}


div.javierinnerbutton{
position: absolute;
bottom:0;
width: 100%;
height:30%;
background-color: #990033;
text-align: center;
}

div.javierinnerbutton:hover{
background-color: darkred;
}

div.javier1{
position: absolute;
top:0%;
left:0%;
height: 33%;
width: 33.3%;
border-color: white;
border-style: solid;
border-width: : 10px;
background-color: #660033;
animation: none;
}
@keyframes javierpulse{
0%{background-color: #00FFFF;}
50%{background-color: #7FFFD4;}
100%{background-color: #00FFFF;}
}


div.javier2{
position: absolute;
top:0%;
left:33%;
height: 33%;
width: 33.3%;
border-color: white;
border-style: solid;
border-width: : 10px;
background-color: #660033;
}

div.javier3{
position: absolute;
top:0%;
left:66.1%;
height: 33%;
width: 33.4%;
border-color: white;
border-style: solid;
border-width: : 10px;
background-color: #660033;
}

div.javier4{
position: absolute;
top:33%;
left:0%;
height: 33%;
width: 20%;
border-color: white;
border-style: solid;
border-width: : 10px;
background-color: #660033;
}

div.javier5{
position: absolute;
top:33%;
left:20%;
height: 33%;
width: 20%;
border-color: white;
border-style: solid;
border-width: : 10px;
background-color: #660033;
}

div.javiercircles{
position: absolute;
top:33%;
left:40%;
height: 33%;
width: 35%;
border-color: white;
border-style: solid;
border-width: : 10px;
background-color: white;
}

div.javierinnercircle1{
position: absolute;
top:3%;
left:0%;
border-radius: 100%;
height: 90%;
width: 50%;
border-color: white;
border-style: solid;
border-width: : 10px;
background-color: #660033;
text-align: center;
color: black;
}

div.javierinnercircle1:hover{
position: absolute;
top:3%;
left:0%;
border-radius: 100%;
height: 90%;
width: 50%;
border-color: white;
border-style: solid;
border-width: : 10px;
background-color: yellow;
}

div.javierinnercircle2{
position: absolute;
top:3%;
left:52%;
border-radius: 100%;
height: 45%;
width: 20%;
border-color: white;
border-style: solid;
border-width: : 10px;
background-color: #660033;
}
div.javierinnercircle2:hover{
position: absolute;
top:3%;
left:52%;
border-radius: 100%;
height: 45%;
width: 20%;
border-color: white;
border-style: solid;
border-width: : 10px;
background-color: yellow;
}

div.javierinnercircle3{
position: absolute;
top:3%;
left:75%;
border-radius: 100%;
height: 45%;
width: 20%;
border-color: white;
border-style: solid;
border-width: : 10px;
background-color: #660033;
}
div.javierinnercircle3:hover{
position: absolute;
top:3%;
left:75%;
border-radius: 100%;
height: 45%;
width: 20%;
border-color: white;
border-style: solid;
border-width: : 10px;
background-color: yellow;
}
div.javierinnercircle4{
position: absolute;
top:48%;
left:63%;
border-radius: 100%;
height: 45%;
width: 20%;
border-color: white;
border-style: solid;
border-width: : 10px;
background-color: #660033;
}
div.javierinnercircle4:hover{
position: absolute;
top:48%;
left:63%;
border-radius: 100%;
height: 45%;
width: 20%;
border-color: white;
border-style: solid;
border-width: : 10px;
background-color: yellow;
}

div.javier6{
position: absolute;
top:33%;
right:0%;
height: 33%;
width: 25%;
border-color: white;
border-style: solid;
border-width: : 10px;
background-color: #660033;
}

div.javier7{
position: absolute;
top:66%;
left:0%;
height: 33%;
width: 25%;
border-color: white;
border-style: solid;
border-width: : 10px;
background-color: #660033;
}

div.javier8{
position: absolute;
top:66%;
left:25%;
height: 33%;
width: 25%;
border-color: white;
border-style: solid;
border-width: : 10px;
background-color: #660033;
}

div.javier9{
position: absolute;
top:66%;
left:50%;
height: 33%;
width: 25%;
border-color: white;
border-style: solid;
border-width: : 10px;
background-color: #660033;
}

div.javier10{
position: absolute;
top:66%;
left:75%;
height: 33%;
width: 24.5%;
border-color: white;
border-style: solid;
border-width: : 10px;
background-color: #660033;
}










div.bluebackground{
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background: linear-gradient(90deg, rgba(14,0,255,0.5256477591036415) 7%, rgba(78,255,110,0.3603816526610645) 25%, rgba(64,198,142,1) 42%, rgba(103,64,198,1) 66%, rgba(64,198,142,1) 86%);
z-index:-50;
}

div.blackbackground{
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background: black;
z-index:-50;
}

div.spikeynav{
position: fixed;
background-image: url("../resources/arrow.png");
background-size: 100% 100%;
width: 100px;
height: 100px;
bottom: 0%;
right:2%;
z-index: 99999;
animation: spikeynav 5s infinite;
opacity: 0.8;
background-color: lightblue;
border-radius: 50%;
border: solid 3px black;
}
div.spikeynav:hover{
background-color: blue;
}
div.spikeynav:active{
background-color: lightblue;
}
@keyframes spikeynav{
0%{transform: translate(0px, 0px);}
50%{transform: translate(10px, 10px);}
100%{transform: translate(0px, 0px);}
}



div.mollyshadowwindow {
  overflow: hidden;
  padding: 30px;
  padding-left: 100px;
  font-size: 2vw;
line-height: 1em;
letter-spacing: 2px;
text-align: left;
color: black;
  outline: none;
    border: solid 1px lightblue;
    background-color: rgb(255,255,255,0.97);
    z-index: 100;
height: 10vh;
  width: 40vw;
  position: relative;
  margin: 0px auto;
  position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
  overflow: scroll;
}

div.mollyaudio{
position: absolute;
background-image: url("../resources/audio.png");
background-size: 100% 100%;
top:0;
left:0;
width:8vw;
height:8vw;
}
div.mollyaudio:hover{
opacity: 0.6;
cursor:pointer;
}

div.thex{
position: absolute;
top:10px;
right:5px;
color: black;
font-size:3vw;
}
div.thex:hover{
    cursor: pointer;
}