header {
    background-color: black;
    min-height: 70px;
    display: flex;
    max-width: 100vw;
}

header div {
    display: flex;
    animation: summon 1s linear;
    flex-direction: row;
    flex-grow: 1;
    align-items: center;
}

header h1{
    color: white;
    margin-left: 10px;
    flex-direction: row;
    height: 40px;
}

header h2 { 
    padding-left: 10px;
    color: white;
}

header img {
    width: 100%;
    
}
header .colcla {
    display: flex;
    flex-direction: column;
    align-self: unset;
}

header nav {
    display: flex;
    align-items: baseline;
}

.biglis{
    margin-right: 10px;
    max-height: 100vh;
}

.zoo , .indexa, .account, .abt {
    color: white;
}

.lis , .oneitemlis{
    margin-right: 10px;
}

.lis , .inlist li, .oneitemlis {
    color: white;
    margin-top: 28px;
    display: inline;
    list-style-type: none;
    width: 100px;
    text-align: center;
    text-decoration: none;
    align-content: center;
    cursor: pointer;
}
.oneitemlis {
    height: 19px;
}
header nav li a {
    text-align: center;
    text-decoration: none;
    color: white;
    border: 0px;
    border-bottom: 0px;
    transition: border 1s;
}

header nav li a:hover {
    text-decoration: underline;
}

.inlist{
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    margin-right: 0px;
    background-color: black;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
    align-items: center;
    animation-name: summonmenu;
    animation-duration: 0.5s;
}



@keyframes summon {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 100;
    }
}

@keyframes disclamer {
    0% {
        color: orange;
    }

    100% {
        color: red;
    }
}

@keyframes summonmenu {
    0% {
        opacity: 0;  
        transform: translateY(-5px);
    }
    50% {
        offset: 0px; 
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes dissappearmenu {
    0% {
        transform: translateY(0);
    }

    50% {
        offset: 0px; 
    }
    
    100% {
        opacity: 0;  
        transform: translateY(-5px);
    }
}

@keyframes summonmenuside {
    0% {
        opacity: 0;  
        transform: translateX(-5px);
    }
    50% {
        offset: 0px; 
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes dissappearmenuside {
    0% {
        transform: translateX(0);
    }

    50% {
        offset: 0px; 
    }
    
    100% {
        opacity: 0;  
        transform: translateX(-5px);
    }
}