.navbarr {
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 200;
  align-items: center;
  padding: .5rem;
  background: linear-gradient(rgb(236, 145, 145),rgb(189, 239, 189),rgb(161, 161, 209),rgb(220, 220, 159));

}

#themeToggle{
  border: none; 
  background-color: transparent;
}
.logox {
  display: flex;
  font-size: 1.5rem;
  font-weight: bolder;
  color: rgb(17, 4, 4); 
}

.nav-linkss {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  
  font-weight: bold;
}

.nav-linkss li {
  margin-right: 2rem;
  margin-left: 2rem;
}


.nav-linkss a {
  text-decoration: none;
  color: #333;  
}

.navbarr ul li a:hover {
  text-decoration: underline;
  color: rgb(144, 137, 137);
}



/* Media Queries for responsiveness*/

/* media query for screen sizes upto 420px */
@media screen and (max-width:550px){
  .logox{
    opacity: 0;
    width: 0;
    transition: opacity .5s ease-in-out, width .1s ease-in-out ; 
  }
  .logox span{
    opacity: 0;
    width: 0;
    transition: opacity .5s ease-in-out, width .5s ease-in-out ;
  }
  #themeToggleWrapper{
    opacity: 0;
    width: 0;
    padding: 0;
    margin: 0;
    transition: opacity .5s ease-in-out,width .5s ease-in-out, padding .5s ease-in-out, margin .5s ease-in-out;
  }
  .nav-linkss li{
    margin-right: 1rem;
    margin-left: 1rem;
    transition: margin-right .5s ease-in-out ,margin-left .5s ease-in-out;
  }

}

/* Media query for screens between 420px and 768px wide */
@media screen and (min-width:550px) and (max-width: 768px) {
  .logox span{
    opacity: 0;
    width: 0;
    transition: opacity .5s ease-in-out, width .5s ease-in-out ;
  }
  .logox{
    opacity: 1;
    width: auto;
    transition: opacity .5s ease-in-out, width .1s ease-in-out ; 
  }
  #themeToggleWrapper{
    opacity: 1;
    width:40px ;
    transition: opacity .5s ease-in-out,width .5s ease-in-out;
  }
  .nav-linkss li{
    margin-left: 1rem;
    margin-right: 1rem;
    transition: margin-right .5s ease-in-out ,margin-left .5s ease-in-out;
  }
}



/* Media query for screens between 768px and 1024px wide */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .logox span{
    opacity: 1;
    width: auto;
    transition: opacity .5s ease-in-out, width .5s ease-in-out ;
  }
  .nav-linkss li{
    margin-left:1.5rem ;
    margin-right:1.5rem ;
    transition: margin-right .5s ease-in-out ,margin-left .5s ease-in-out; ;
  }
}