nav{
    background: #00223A;
    padding: 5px 20px;
}
ul{
    list-style-type: none;
}
a{
    text-decoration: none;
    color: white;
}

.menu li{
    font-size: 16px;
    padding: 10px 25px;
    color: white;
}
.menu li a{
    display: block;
}

.menu .item:hover{
    text-decoration: underline;
}
.menu .logo {
    font-size: 30px;
    cursor: pointer;
    letter-spacing: 5px;
}
.logoimg {
    margin-left: -7px;
    margin-right: -2px;
 /* -----   animation: blink-animation 9.4s infinite; ---*/
 
}


.button.secondary{
    border-bottom: 1px #444 solid;
}
/* ------Mobile Menu------*/
.menu{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.toggle{
    order: 1;
}
.item.button{
    order: 2;
}
.item{
    width: 100%;
    text-align: center;
    order: 3;
    display: none;
}
.item.active{
    display: block;
}

.toggle{
    cursor: pointer;
}
.bars{
    background: white;
    display: inline-block;
    position: relative;
    height: 2px;
    width: 18px;
}
.bars::before, .bars::after{
    background: white;
    content: "";
    display: inline-block;
    position: absolute;
    height: 2px;
    width: 18px;
}
.bars::before{
    top: 5px;
}
.bars::after{
    top: -5px;
}


/* ------Tablet Menu------*/

@media all and (min-width:468px){
    .menu{
        justify-content: center;
    }
    .logo{
        flex: 1;
    }
    .item.button{
        width: auto;
        order: 1;
        display: block;
    }
    .toggle{
        order: 2;
    }
    .button.secondary{
        border: 0;
    }
    .item.button{
        padding: 7px 15px;
        background: #4E6AFF;
        border: 1px solid #4E6AFF;
        border-radius: 50rem;
    }
    .item.button.secondary{
        padding: 7px 15px;
        background: transparent;
        border: 1px solid #4E6AFF;
        border-radius: 50rem;
    }
}

/* ------Desktop Menu------*/

@media all and (min-width:768px){
    .item{
        display: block;
        width: auto;
    }
    .toggle{
        display: none;
    }
    .logo{
        order: 0;
    }
    .logo a{
        font-size: 5px;
    }
    .item{
        order: 1;
    }
    .button{
        order: 2;
    }
    .menu li{
        padding: 15px 10px;
    }
    
    
}