@font-face {
    font-family: Lexie;
    src: url(LexieReadable-Regular.ttf);
  }
  
.navdeck {
    width:130px;
    border-radius: 7px 7px 7px 7px;
    background-color: #FAFAFC;
    font-family: Lexie;
    color:#a0a2aa;
 a{
        text-decoration: none;
        color:#f8596e;
        }


ul{
  border-left: 2px solid #6E7179;
  outline: 2px solid #6E7179;
  list-style-type: none; 
  padding: 0; 
  margin: 0; 
  border-radius: 7px 7px 7px 7px;
  outline-offset: -3px;
}
li {
 text-decoration: none;
 width: 100% fit-content;
 transition: all .2s ease-in-out;
 background-color: #FAFAFC;
 border-top: 2px solid #6E7179;
 border-left: 2px solid #6E7179;
 border-right: 2px solid #6E7179;
 padding:2px;
 -webkit-border-radius: 7px 7px 0px 0px;
 border-radius: 7px 7px 0px 0px;

}

.top {
    height:187px;
    background: #FAFAFC url(imgs/back.png) no-repeat local 50% 50%;
    border-bottom: 2px solid #264458;
    border-radius: 7px 7px 7px 7px;
    image-rendering: auto;
    transform:none;
    background-size: contain;
    
}
.top0 {
  display:none;
}

li.top:hover {
    padding-bottom: 2px;
    
}
li:hover {
    transform: translateY(-7px) rotate(2deg);
}
}