I tried to make the links on the navbar look larger on bigger screens using media queries, but it does not work whatsoever. I want the links to be 100px on laptops and desktop monitors, but the links stay small when I preview it in the browser. There are no error messages. What am I doing wrong?

a {
  text-decoration: none;
}

 ul.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #FFEE8C;
   position: fixed;
  height: 100%;
  overflow: auto;
}

ul.menu li a {

    display: block;
    color: lightblue;


}

div.content {
  margin-left: 25%;
  padding: 1px 16px;
  height: 1000px;

}
@media screen and(max-width: 900px) {
    ul.menu {

        width: 100%;
        height: auto;
        position: relative;
    }
 ul.menu li a{
float: left;
padding: 15px;

}


div.content { margin-left: 0;}

@media screen and (max-width: 400px) {
  ul.sidenav li a {
    text-align: center;
    float: none;
  }
  
}
}

@media screen and (min-width: 600px) {
    .navbar {
      font-size: 100px;
    }
  }