.navbarcontainerdiv{
    width: 80%;margin: 0px auto;display: flex;justify-content: space-between; font-size: 30px;align-items: center;z-index: 120000000000000000000000000000000000000000000; 
}
.box{
    padding: .5rem;display: block;color: black; font-size: 25px;
}
.profilicon{
    padding: .5rem;display: block;color: black;border: 1px solid gray; border-radius: 50%; margin: 3px;font-size: 18px;
}
.navbarnavcontainerdiv{
    width: 100%; height: 3rem; border: 1px solid gray; margin: 0px auto;display: flex;align-items: center;
}
.navbaritems{
    width: 70%; margin: 0px auto; display: flex; justify-content: center;
}
@media screen and (min-width: 770px) and (max-width: 1150px) {

.navbarcontainerdiv{
    width: 90%;margin: 0px auto;display: flex;justify-content: space-between; font-size: 30px;align-items: center;z-index: 120000000000000000000000000000000000000000000; 
}
.navbaritems{
    width: 80%; margin: 0px auto; display: flex; justify-content: center;
}
}
@media screen and (min-width: 690px) and (max-width: 770px) {

.navbarcontainerdiv{
    width: 90%;margin: 0px auto;display: flex;justify-content: space-between; font-size: 30px;align-items: center;z-index: 120000000000000000000000000000000000000000000; 
}
.navbaritems{
    width: 90%; margin: 0px auto; display: flex; justify-content: center;font-size: 15px;
}
}
@media screen and (min-width: 552px) and (max-width: 690px) {

.navbarcontainerdiv{
    width: 90%;margin: 0px auto;display: flex;justify-content: space-between; font-size: 30px;align-items: center;z-index: 120000000000000000000000000000000000000000000; 
}
.navbaritems{
    width: 100%; margin: 0px auto; display: flex; justify-content: center;font-size: 13px;
}
}
@media screen and (min-width: 455px) and (max-width: 552px) {

.navbarcontainerdiv{
    width: 90%;margin: 0px auto;display: flex;justify-content: space-between; font-size: 30px;align-items: center;z-index: 120000000000000000000000000000000000000000000; 
}
.navbaritems{
    width: 100%; margin: 0px auto; display: flex; justify-content: center;font-size: 11px;
}
}
@media screen and (min-width: 403px) and (max-width: 455px) {

.navbarcontainerdiv{
    width: 90%;margin: 0px auto;display: flex;justify-content: space-between; font-size: 30px;align-items: center;z-index: 120000000000000000000000000000000000000000000; 
}
.navbaritems{
    width: 100%; margin: 0px auto; display: flex; justify-content: center;font-size: 10px;
}
}
@media screen and (min-width: 350px) and (max-width: 403px) {

.navbarcontainerdiv{
    width: 90%;margin: 0px auto;display: flex;justify-content: space-between; font-size: 30px;align-items: center;z-index: 120000000000000000000000000000000000000000000; 
}
.navbaritems{
    width: 100%; margin: 0px auto; display: flex; justify-content: center;font-size: 9px;
}
}
@media screen and (min-width: 220px) and (max-width: 350px) {

.navbarcontainerdiv{
    width: 90%;margin: 0px auto;display: flex;justify-content: space-between; font-size:2px;align-items: center;z-index: 120000000000000000000000000000000000000000000; 
}
.navbaritems{
    width: 100%; margin: 0px auto; display: flex; justify-content: center;font-size: 7px;
}
}