/* CSS files add styling rules to your content */
body{
  background-color:#2b0d0a;
  margin:0;
  font-family: helvetica, arial, sans-serif;
/*   display:flex;
  flex-direction:row; */
}

body > div{
  margin:0 auto;
  width:100vw;
  height:100vh;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
/*   overflow:hidden; */
}
#prompt{
  position:fixed;
  z-index:3;
  transform-origin:center;
  top:45%;
  left:38%;
  background-color:#2b0d0a;
  color:#ebcb9e;
  font-size:12pt;
  padding:3em;
  max-width:400px;
  outline:2px solid #ebcb9e;
  outline-offset: -20px;
}
#by{
  position:fixed;
  left:3%;
  bottom:3%;
  color:#ebcb9e;
}
#title{
  flex-direction:column;
  align-items:center;
  align-content:center;
  justify-content:center;
  width:100vw;
}
#title div{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  align-content:center;
  justify-content:center;
  margin-top:1em;
}
div#titleLetters{
  margin-top:8em;
}
div#allLetters{
  display:none;
}

#allLetters{
  margin-top:10%;
/*   margin-bottom:200px; */
  position:relative;
  bottom:25%;
  padding:1em 2em;
  width: auto;
  height: auto;
  align-items:center;
  justify-content:center;
  border-top: 2px solid #ebcb9e;
  border-bottom: 2px solid #ebcb9e;
  display:none;
}
#allLetters div{
  transform:scale(0.8);
  margin:-20px;
}

h1 {
  font-style: italic;
  color: #373fff;
}

.letter{
  z-index:1;
  width:200px;
  height:200px;
  background-color:transparent;
  box-sizing: border-box;
  margin:0px;
  position:relative;
}
@media(max-width: 400px){
  #title{
    transform: scale(0.7,0.7);
  }
  #allLetters .letter{
    transform: scale(0.6,0.6);
  }
}
@media(max-width: 1000px){
  #allLetters{
    margin-top:5%;
    padding:0;
    justify-content:center;
  }
  #allLetters .letter{
    transform: scale(0.6,0.6);
  }
}


.leaf{
  position:absolute;
  transform-origin:top left;
}
.leaf polygon{
  display:none;
  transform-origin:center;
  transform: rotateY(0);
  transition: 0.8s;
}
.leaf:hover polygon{
  transform: rotateY(540deg);
}
.strayLeafContain{
  position:absolute;
  overflow:visible;
  width:150px;
  height:150px;
/*   border: 1px solid white; */
  z-index:2;
  transition:0.1s;
}
.strayLeaf{
  position:absolute;
/*   transform-origin:top left; */
  transition:0.1s;
}
.strayLeaf polygon{
  display:none;
  transition:0.8s;
}

.nav{
  position:relative;
  width:100vw;
  height:auto;
  min-height:160px;
  margin:0;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  justify-content:space-between;
}
.nav div{
  display:flex;
  flex-direction:row;
  margin:1em;
}
.nav > p{
  max-width: 600px;
  margin:2em;
  color:#ebcb9e;
  font-size:14pt;
}
.navButton{
  text-align:center;
  width:150px;
  height:70px;
  margin:1em;
  position:relative;
/*   background-color:#f2e535; */
  border:solid 2px #ebcb9e;
  z-index:2;
  transition:0.5s;
}
.navButton p{
  color:#ebcb9e;
  width:100px;
  margin: 0;
  position:absolute;
  top:50%;
  left:50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
.navButton:hover{
  background-color:#ebcb9e;
}
.navButton:hover p{
  color:#6b2914;
}
@media(max-width:1000px){
  .nav{
    flex-wrap:wrap;
    justify-content:center;
  }
  .nav div{
    flex-wrap:wrap;
  }
}
@media(max-width:600px){
  .nav div{
    width:100%;
  }
}

@keyframes bounce{
  0% {bottom:10%;}
  50% {bottom:18%;}
  100% {bottom:10%;}
}
#downArrow{
  position:absolute;
  left:48%;
  bottom:10%;
  width:0;
  height:0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #ebcb9e;
  animation: bounce 1.5s infinite
}
.navItem{
  opacity:0;
}


.item{
  width:200px;
  height:200px;
  background-color:none;
  box-sizing: border-box;
  margin:0px;
  position:relative;
  transition:0.5s;
}
.item:hover{
  background-color:#c2bfb6;
}
.item a{
  text-align:center;
  margin: 0;
  position:absolute;
  top:50%;
  left:50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size:12pt;
}