nav{
    display: flex;
    background-color: rgba(0, 0, 0, 0.313);
   backdrop-filter: blur(10px);
    padding: 2em;
    height: 50px;
    width: 100%;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    border:none;
     border-radius: 80px;
     display: flex;
     align-items: center;
     justify-content: center;
 }
.menu{
    
    display: flex;
    flex-wrap: nowrap;
    align-items: normal;
    align-content: normal;
    justify-content:normal;
    flex-direction: row;
    color: azure;
        
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding-inline-start: 40px;
    unicode-bidi: isolate;
 }
 body {
  height:auto;
}
form{
    height:auto ;
    width: 60%;
}
li {
    margin: 8px 16px;
 color:rgb(255, 255, 255);
    /* get rid of bullets */
    list-style-type: none;
 align-content: center;
 justify-content: center;
transition: background-color 0.3s ease;
    
}

a{
   display:flex;
    color: aliceblue;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    transition: background-color 0.3s ease;
    list-style-type: none;
}
body {
  display:flex; 
  align-items:center; 
  flex-flow:column nowrap;
  overflow-x:hidden;
  
}

.title {
  font:1.3em/1 monospace;
  font-variant:small-caps;
  letter-spacing:0.5em;
  margin:4em;
  color: azure;
  font-size: 50px;
}

.gallery {
  perspective:700px;
  width:50vw;
  display:flex; justify-content:center; align-items:center; flex-flow:row wrap;
}

ul {
  position:relative;
  width:100px; height:100px;
  margin:0.1em;
  perspective-origin:center center;
  transform-style:preserve-3d;
  transform:rotateX(40deg);
  transition:all 0.4s;
}

ul:hover {
  transform:translateZ(100px) rotateX(20deg); z-index:999;
}

ul:hover li {
  filter:grayscale(5);
}

li {
  position:absolute; left:0; top:0;
  backface-visibility:hidden;
  width:100%; height:100%;
  transition:transform 0.3s, filter 1s;
  background:rgb(72, 86, 61);
  filter:grayscale(0.9);
}
/*
Setup individual planes final poistion(by left top) and initial position(by transform)
*/

li:first-of-type {transform:none;}
li:nth-of-type(2) {left:100%; transform-origin:left center; transform:rotateY(180deg);}
li:nth-of-type(3) {top:100%; transform-origin:center top; transform:rotateX(-180deg);}
li:nth-of-type(4) {left:-100%; transform-origin:right center; transform:rotateY(-180deg);}
li:nth-of-type(5) {top:-100%; transform-origin:center bottom; transform:rotateX(180deg);}
li:nth-of-type(6) {top:100%; left:100%; transform-origin:center top; transform:rotateX(-180deg);}
li:nth-of-type(7) {top:100%; left:-100%; transform-origin:right center; transform:rotateY(-180deg);}
li:nth-of-type(8) {top:-100%; left:-100%; transform-origin:center bottom; transform:rotateX(180deg);}
li:nth-of-type(9) {top:-100%; left:100%; transform-origin:left center; transform:rotateY(180deg);}

/* Setup transition-delay, for mouseout state  */
/* */ 
li:nth-of-type(2),li:nth-of-type(3),li:nth-of-type(4),li:nth-of-type(5) {transition-delay:0.03s;}
li:nth-of-type(6),li:nth-of-type(7),li:nth-of-type(8),li:nth-of-type(9) {transition-delay:0s;}
ul:hover :nth-of-type(2),ul:hover :nth-of-type(3),ul:hover :nth-of-type(4),ul:hover :nth-of-type(5) {transition-delay:0s}
ul:hover :nth-of-type(6),ul:hover :nth-of-type(7),ul:hover :nth-of-type(8),ul:hover :nth-of-type(9) {transition-delay:0.2s}
/*
Setup planes final state
*/
ul:hover :nth-of-type(2),ul:hover :nth-of-type(4),ul:hover :nth-of-type(7),ul:hover :nth-of-type(9) {transform:rotateY(0);}
ul:hover :nth-of-type(3), ul:hover :nth-of-type(5),ul:hover :nth-of-type(6), ul:hover :nth-of-type(8) {transform:rotateX(0);}
/* 
Set background position
*/
ul li {background-size:300% 300%;}
li:nth-of-type(1) {background-position:center center;}
li:nth-of-type(2) {background-position:right center;}
li:nth-of-type(3) {background-position:center bottom;}
li:nth-of-type(4) {background-position:left center;}
li:nth-of-type(5) {background-position:center top;}
li:nth-of-type(6) {background-position:right bottom;}
li:nth-of-type(7) {background-position:left bottom;}
li:nth-of-type(8) {background-position:left top;}
li:nth-of-type(9) {background-position:right top;}
/*
Set background image source
*/
ul:nth-of-type(1) li { background-image:url(//Images/0b68ded835241c2772485a7a15ea1bf4.jpg);}
ul:nth-of-type(1) { width:120px; height:80px; }
ul:nth-of-type(2) li { background-image:url(//Images/72f73e03e134d091171fc0ff0d3fe5b8.jpg);}
ul:nth-of-type(2) { width:90px; height:130px; }
ul:nth-of-type(3) li { background-image:url(//Images/7eed62d65a152122de33a5ed3cda4391.jpg);}
ul:nth-of-type(3) { width:130px; height:90px; }
ul:nth-of-type(4) li { background-image:url(//Images/da45195520a39d3391d7727bcb630352.png);}
ul:nth-of-type(4) { width:120px; height:80px; }
ul:nth-of-type(5) li { background-image:url(//Images/c2417529a2e97d25ca0e2d66e33cc1e1.jpg);}
ul:nth-of-type(5) { width:64px; height:84px; }
ul:nth-of-type(6) li { background-image:url(//Images/4f33f460aebb098d1ed9be51c71f2140.jpg);}
ul:nth-of-type(6) { width:100px; height:66px; }
/* 
Hide debug label 
*/
li { text-indent:999px; overflow:hidden; }