.App {
    text-align: center;
  }
  
  
  .top-bar{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px;
  
  }
  
  .logo p{
    font-size: 1.5vw;
    font-family: 'Roboto Condensed', sans-serif;


  }

  .logo a{
    text-decoration: none;
    color: black;
  }
  
  .navbar{
    width: 40%;
    display: flex;
    justify-content: space-evenly;
  }
  
  .navbar a{
    font-size: 1.25vw;
    font-family: 'Roboto Condensed', sans-serif;
    text-decoration: none;
    color: #131212;
  }

  .burger-menu{
    display: none;
    
  }
  .burger-btn{
    background-color: #ffffff00;
    border: none;
  }

  .mobile-menu{
    display: none;
    background:rgba(241, 241, 241, 0.233);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    position:absolute;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    overflow: hidden;
  }

  .m-top{
    padding: 10%;
    transform: translate(70vw, 0px);
  }

  .m-top i{
    font-size: 10vw;
  }

  .m-nav-bar{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .m-nav-bar a{
    padding: 5%;
    font-size: 5vw;
    font-family: 'Roboto Condensed', sans-serif;
    text-decoration: none;
    color: #131212;
  }

  
  .footer{
    padding: 2%;
    text-align: center;
    font-size: 2vh;
    font-family: 'Roboto Condensed', sans-serif;
  }

  

 
  /* Responsive styles */
@media screen and (max-width: 600px) {
  .top-bar{
    justify-content: space-evenly;
  }
  
  .navbar a{
    display: none;
  }

  .burger-menu{
    display: block;


  }

  .burger-menu i{
    font-size: 30px;
    color: #000;
  }

  

  .logo p{
    font-size: 5vw;
  }


}