body{
  background-color:black;
  max-width:100vw;
  overflow-x:hidden;
  overflow-y:hidden;
  height:100vh;
  max-height:100vh;
  width:100vw;
  min-width:100vw;
  z-index:-2;
}
#everything{
  z-index:2;
  max-width:100vw;
}
#everythingElse{
  top:0px;
  right:0px;
  position:fixed;
  width:100vw;
  max-width:100vw;
  max-height:100vw;
  overflow-x:hidden;
  overflow-y:hidden;
  height:100vh;
}
li::marker {
  content:'';
  font-size:0!important;
  margin:0px!important;
}

#menuContainer{
  z-index:20;
  right:0px;
  display:flex;
  top:0px;
  position:absolute;
  max-height:100vh;
  margin-top:10px;
  margin-bottom:10px;
  height:100vh;
}
/*MENU*/
#Menu{
  top:0px;
  display:flex;
  flex-direction:column;
  position:relative;
  max-height:calc(min(90vw,80vh));
  /* margin-top:0vh!important; */
  width:30vw;
  transition-duration:1s;
  cursor:pointer;
  z-index:3000;
  align-items:center;
  justify-content:space-around;
  /* z-index:-2; */
}
#stage{
  max-width:100vw;
  pointer-events:none;
}
.menubutton{
  background-color:rgba(0,0,0,0);
  border-color:rgba(0,0,0,0);
  font-weight:bold;
  font-size:4vw;
  font-size:clamp(10pt,3.2vw,40pt);
  color:white;
}
/* 'Web design in HTML/CSS/JS */
.WelcomeMessage{
  background-color:rgba(0,0,0,0);
  font-size:3vw!important;
  color:rgba(250,250,230,1);
  line-height:4vw;
  font-family:tahoma;
  font-weight:normal;
  position:relative;
}
/* Behind cube (info) */
.OtherWebsites{
  background-color:rgba(0,0,0,0);
  border-color:rgba(0,0,0,0);
  color:white;
  position:absolute;
  top:30px;
  top:clamp(30px, 10vw, 100px);
  left:6vw;
  font-size:4vw;
  font-family:verdana;
  text-align: center;
  z-index:-1;
  font-weight:100;
}

.lastupdated{
  color:grey;
}

.email{
  color:white!important;
}

.WebLinks{
color: white;
text-decoration: none;
}


/*CUBE*/
.cube {
  font-size:2vh;
  color:rgba(160,150,100,1);
  line-height:4vw;
  font-family:arial;
  padding-left:5vw;
  padding-right:5vw;
  transform-style: preserve-3d;
  transform-origin: 35vw 37vw;
  transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg);
  transition-duration: 5s;
}


.face1, .face2, .face3, .face4, .face5, .face6  {
 position: absolute;
 width: 70vw;
 height: 70vw;
 left: 0vw;
 top:2vh;
 border:1px solid rgba(255,255,240,0.9);
 background-color:rgba(0,0,0,0.9);
 box-shadow: inset 0px 0px 15px  rgba(255,255,230,0.9);
 text-align: center;
 line-height:3vw;
 color:white;
 font-family:arial;
}

/*Cube faces and images*/
.cube .face1 {
  /*cube has width of 70VW, so the translations are from cube's origin; 35VW from left*/
  transform: translateZ(35vw);
  }
  #NatureImage{
    width:57vw;

    position:relative;
  }

.cube .face2 {
  transform: rotateY(90deg) translateZ(35vw);
  }
#SquirrelImage{
    width:57vw;
    padding-top:0px;
    top:-20vw;
    top:-20%;
  }

.cube .face3 {
  transform: rotateY(0deg) rotateX(90deg) rotateZ(-90deg) translateZ(35vw);
}
#UrbanImage{
  width:45vw;
  padding-top:0%;
}

.cube .face4 {
  transform: rotateY(-90deg) rotateZ(0deg) translateZ(35vw);
  }
#DesignImage{
  width:50vw;
  padding-top:7%;
}

.cube .face5 {
  transform: rotateX(-90deg) translateZ(35vw);
  }
#AnamorphicImage{
  width:60vw; padding-top:0%;
}

.cube .face6 {
  transform: rotateY(180deg) rotateZ(180deg) translateZ(35vw);
  }
#SurrealismImage{
  width:60vw;
  padding-top:3%;
}


/* So cube doesn't entirely disappear from wide screens */
@media screen and (min-aspect-ratio: 1/1){
  .cube{
    margin-top:-10vw!important;
    scale:0.7;
  }
  .OtherWebsites{
    scale:0.7;
    background-color:rgba(0,0,0,0);
    border-color:rgba(0,0,0,0);
    color:white;
    position:absolute;
    top:1vw;
    line-height:4vw;
    left:8vw;
    font-size:3.5vw;
    font-family:verdana;
    text-align: center;
    z-index:-1;
    font-weight:100;
    transform:translateY(-30px)!important;
  }


}
/* So menu stays same height as cube on small screens */





/*CONTACT AND LINKS*/
/* .ContactInfo{
  position:absolute;
  z-index:-1;
  left:20vw;
  top:20vw;
  font-size:4vw;
  text-align:center;
  font-family:arial;
  font-weight:700;
  color:white;
  font-size:0px;
}

.SocialIcons{
  width:20vw;
  height:20vw;
  border:0;
} */


/*Footer*/
#footer{
  background-color:rgba(0,0,0,0);
  border-color:rgba(0,0,0,0);
  color:rgba(200,200,170,0.6);
  position:absolute;
  top:80vw;
  left:10vw;
  font-size:3vw;
  font-family:verdana;
}