/* -------------------- START lavaLamp MOVEMENT -------------------- */


#lavalamp{
  display:block;
  position: absolute;
  background: url('css/lavalamp.png') no-repeat scroll 0 0 rgb(0,0,0,0);
  background-size: 80% 80%;
  width: var(--lavaLamp_widthsize);
  height: 2vh;
  margin-left: -0.5vw;
  top: 0;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  transition: all 300ms ease-out;

}
/* ,#lavalamp:focus */
#lavalamp:hover{
  -webkit-transition-duration: 3000s;
  -moz-transition-duration: 3000s;
  -ms-transition-duration: 3000s;
  -o-transition-duration: 3000s;
  transition-duration: 3000s;

}

#navbar li:nth-of-type(1) ~ #lavalamp,#navbar li:nth-of-type(1):hover ~ #lavalamp,#navbar li:nth-of-type(1):not(:hover) ~ #lavalamp,#navbar li:nth-of-type(1):focus ~ #lavalamp{
  display:none;
  pointer-events:none;

}

#navbar li:nth-of-type(2):hover ~ #lavalamp{
  display:block;
  left:1.25vw; /* 1.75 */

}

#navbar li:nth-of-type(3):hover ~ #lavalamp{
  display:block;
  left:10.8vw; /* 23.5 */

}

#navbar li:nth-of-type(4):hover ~ #lavalamp{
  display:block;
  left:19.95vw; /* 39vw */

}

#navbar li:nth-of-type(5):hover ~ #lavalamp{
  display:block;
  left:29.5vw;

}

#navbar li:nth-of-type(6):hover ~ #lavalamp{
  display:block;
  left:38.7vw;

}
/*
,#navbar li:nth-of-type(6):focus ~ #lavalamp

#navbar li:nth-of-type(7):hover ~ #lavalamp{
  left: 490px;

}

#navbar li:nth-of-type(8):hover ~ #lavalamp{
  left: 565px;
}

#navbar li:hover ul.subs:nth-of-type(1){
  left:-200%;

}

#navbar li:hover ul.subs:nth-of-type(2){
  left:-200%;

}

#navbar li:hover ul.subs:nth-of-type(3){
  left:-200%;

}

#navbar li:hover ul.subs:nth-of-type(4){
  left:-200%;

}

/* -------------------- END lavaLamp MOVEMENT -------------------- 

/* contains all components 
#flipWindow{
  overflow:visible;
  width:var(--display_A-width);
  height:auto;
  margin:0 auto;

}

/* the nav 
#nav{
  position:relative;
  left:var(--nav_margin-Center);
  width:var(--nav_width);
  height:var(--nav_height);
  background-color:#fff;
  border:.1vw solid #222;
  border-left:.25vw solid #222;
  border-right:.25vw solid #222;
  box-shadow:inset 0 0 .5vw hsla(0,0%,100%,0.2),0 0 1.5vw #fff;
  margin-bottom:2.5%; /* determines gap from nav bar 
  margin-top:20%; /* ENTIRE full control of height position from top 
  border-radius:3vw;

}

#nav ul{
  margin:0;
  padding:.5vw;
  list-style:none;
  width:100%;
  text-align:center;
}

#nav ul li{
  background: blue;
  position:relative;
  border-radius: 50%;
  float:left;
  margin-left:4vw;
  line-height:3vw;

}

#nav ul li a{
  text-decoration:none;
  color:#000;
  font-size:120%;

}

#notice{
  position:absolute;
  right:10px;
  bottom:10px;

}

#notice a, #author a{
  color:#fff;

}

#author{
  position:absolute;
  left:10px;
  bottom:10px;

} 

 -------------------- END lavaLamp MOVEMENT -------------------- */