/*
body {
    font-family: 'Roboto', sans-serif;

  }
  
  #menu {
    z-index: 2;
    
  }
  
  #menu-bar {
    width: 45px;
    height: 40px;
    margin: 30px 0 20px 20px;
    cursor: pointer;
  }
  
  .bar {
    border-radius: 2px;
    height: 5px;
    width: 100%;
    background-color: #000000;
    display: block;
    
    transition: 0.3s ease;
  }
  
  #bar1 {
    transform: translateY(-4px);
  }
  
  #bar3 {
    transform: translateY(4px);
  }
  
  .nav {
    transition: 0.3s ease;
    display: none;
  }
  
  .nav ul {
    padding: 0 22px;
  }
  
  .nav li {
    list-style: none;
    padding: 12px 0;
  }
  
  .nav li a {
    color: white;
    font-size: 120%;
    text-decoration: none;
  }
  
  .nav li a:hover {
    font-weight: bold;
    color: rgb(0, 0, 0);
  }
  
  .menu-bg, #menu {
    top: 0;
    left: 0;
    position: fixed;
  }
  
  .menu-bg {
    z-index: 1;
    width: 0;
    height: 0;
    margin: 30px 0 20px 20px;
    background: radial-gradient(circle, rgb(48, 144, 156), rgb(0, 255, 221));
   border-radius: 100px;
    transition: 0.3s ease;
  }
  
  .change {
    display: block;
  }
  
  .change .bar {
    background-color: white;
  }
  
  .change #bar1 {
    transform: translateY(4px) rotateZ(-45deg);
  }
  
  .change #bar2 {
    opacity: 0;
  }
  
  .change #bar3 {
    transform: translateY(-6px) rotateZ(45deg);
  }
  
  .change-bg {
    width: 60.5%;
    height: 137vh;
    transform: translate(-60%,-30%);
    
  }*/
  body {
    font-family: 'Roboto', sans-serif;

  }
  
  #menu {
    z-index: 2;
    
  }
  
  #menu-bar {
    width: 45px;
    height: 40px;
    margin: 30px 0 20px 20px;
    cursor: pointer;
  }
  
  .bar {
    border-radius: 2px;
    height: 5px;
    width: 100%;
    background-color: #000000;
    display: block;
    
    transition: 0.3s ease;
  }
  
  #bar1 {
    transform: translateY(-4px);
  }
  
  #bar3 {
    transform: translateY(4px);
  }
  
  .nav {
    transition: 0.3s ease;
    display: none;
  }
  
  .nav ul {
    padding: 0 22px;
  }
  
  .nav li {
    list-style: none;
    padding: 12px 0;
  }
  
  .nav li a {
    color: white;
    font-size: 120%;
    text-decoration: none;
  }
  
  .nav li a:hover {
    font-weight: bold;
    color: rgb(0, 0, 0);
  }
  
  .menu-bg, #menu {
    top: 0;
    left: 0;
    position: fixed;
  }
  
  .menu-bg {
    z-index: 1;
    width: 0;
    height: 0;
    margin: 30px 0 20px 20px;
    background: radial-gradient(circle, rgb(48, 144, 156), rgb(0, 255, 221));
   border-radius: 100px;
    transition: 0.3s ease;
  }
  
  .change {
    display: block;
  }
  
  .change .bar {
    background-color: white;
  }
  
  .change #bar1 {
    transform: translateY(4px) rotateZ(-45deg);
  }
  
  .change #bar2 {
    opacity: 0;
  }
  
  .change #bar3 {
    transform: translateY(-6px) rotateZ(45deg);
  }
  
  .change-bg {
    width: 100.5%;
    height: 137vh;
    transform: translate(-60%,-30%);
    
  }
                                          @media (max-width: 428px){
                                            body {
                                              font-family: 'Roboto', sans-serif;
                                          
                                            }
                                            
                                            #menu {
                                              z-index: 2;
                                              
                                            }
                                            
                                            #menu-bar {
                                              width: 28px;
                                              height: 40px;
                                              margin: 30px 0 20px 20px;
                                              cursor: pointer;
                                            }
                                            
                                            .bar {
                                              border-radius: 2px;
                                              height: 5px;
                                              width: 100%;
                                              background-color: #000000;
                                              display: block;
                                              
                                              transition: 0.3s ease;
                                            }
                                            
                                            #bar1 {
                                              transform: translateY(-4px);
                                            }
                                            
                                            #bar3 {
                                              transform: translateY(4px);
                                            }
                                            
                                            .nav {
                                              transition: 0.3s ease;
                                              display: none;
                                            }
                                            
                                            .nav ul {
                                              padding: 0 22px;
                                            }
                                            
                                            .nav li {
                                              list-style: none;
                                              padding: 12px 0;
                                            }
                                            
                                            .nav li a {
                                              color: white;
                                              font-size: 90%;
                                              text-decoration: none;
                                            }
                                            
                                            .nav li a:hover {
                                              font-weight: bold;
                                              color: rgb(0, 0, 0);
                                            }
                                            
                                            .menu-bg, #menu {
                                              top: 0;
                                              left: 0;
                                              position: fixed;
                                            }
                                            
                                            .menu-bg {
                                              z-index: 1;
                                              margin: 30px 0 20px 20px;
                                              background: radial-gradient(circle, rgb(48, 144, 156), rgb(0, 255, 221));
                                             border-radius: 100px;
                                              transition: 0.3s ease;
                                            }
                                            
                                            .change {
                                              display: block;
                                            }
                                            
                                            .change .bar {
                                              background-color: white;
                                            }
                                            
                                            .change #bar1 {
                                              transform: translateY(4px) rotateZ(-45deg);
                                            }
                                            
                                            .change #bar2 {
                                              opacity: 0;
                                            }
                                            
                                            .change #bar3 {
                                              transform: translateY(-6px) rotateZ(45deg);
                                            }
                                            
                                            .change-bg {
                                              width: 100.5%;
                                              height: 137vh;
                                              transform: translate(-60%,-30%);
                                              
                                            }    
}