img{
    image-rendering: pixelated;
}

a{
    text-decoration: none;
}

#top{
    width: 90%;
    max-width: 420px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0 auto;
    display: flex;
    
}

.name{
    text-align: center;
    color: #aff7dc;
    border: #664c2b 2px solid;
    font-family: "Jua", sans-serif;
    letter-spacing: 2px;
    text-shadow: 1px 1px 2px #6b5b4b,
    -1px 1px 0px #d6c3ac,
     -1px -1px 0px #eee0d0,
    1px -1px 0px #d1b294;
    font-size: large;
    background-color: #444130;
    position: relative;
    padding: 0px 10px ;
    width: 100%;
    border-radius: 20px 20px 0px 30px;
    box-shadow: 3px 3px 1px rgba(141, 134, 101, 0.534) ;
    max-width: 680px;
    
}
@media screen and (max-width: 600px) {
    .name{
        text-align: start;
    }
    #top{
        width: 90%;
        justify-content: space-evenly;
        align-items: center;
        margin: auto;
        display: flex;
    }
}
#navbar{

    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(0, 100%);
    gap: 1px;
    display: flex;
}

.navcontainer{
    width: auto;

    height: 25px;
    box-shadow: 3px 3px 1px rgba(145, 142, 126, 0.534) ;
    position: relative;
    padding: 0px 2px;
    display: inline-block;
    align-items: end;
    background-color: #93d6be;
    border-radius: 0px 0px 2px 2px;
    display: flex;
    z-index: -2;
    flex-direction: column;
    border: #d1b294 0px solid
     #0c0701 3px solid
      #d1b294 1px solid
       #d1b294 1px solid
       ;
}

.fill-div{
    display: block;
    height: 100%;
    width: 100%;
    
}

.navcontainer span{
    margin-top: auto;
    
    display: block;
    color: #334444;
    font-size: medium;
    text-shadow: 1px 1px 0px #ddccbb;
    text-decoration: none;
    font-family: "Concert One", sans-serif; 
}
.navitem{ 
    width: 50px;   
    transform: translate(0%, 0);
    animation-name: slideToRight;
    animation-timing-function: ease-in;
    animation-duration: .35s;
    margin-left: auto;
    margin-right: 0;
}

.fill-div:hover .navcontainer{
    color:#332233;
    background-color: #f3eae1;
    z-index: -2;
    text-shadow:
    
    1px 1px 0 #ddccbb,
    -1px 1px 0 #ddccbb,
    -1px -1px 0 #ddccbb,
    
    1px -1px 0 #ddccbb;
}
.fill-div:hover{
    z-index: 1;
    transform: scale(1.05, 1.05);
}



@keyframes slideToRight {
    0% {transform: translate(0, -100%);}
    100% {transform: translate(0, 0%);}
}

@keyframes slideToLeft {
    0% {transform: translate(0%, 0);}
    100% {transform: translate(0, 25%);}
}