* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: "Poppins", sans-serif;
     line-height: 1.5;
}
body {
     min-height: 100vh;
     width: 100vw;
}

nav {
     width: 100%;
     position: fixed;
     top: 0;
     left: 0;
     /* background-color: #1f2937; */
     backdrop-filter: blur(20px);
     color: #ffffff;
     box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
     z-index: 100;
     padding: 0rem 3rem 0rem 0rem;
     border-bottom: 1px solid #2c2c2c;
}

nav ul {
     width: 100%;
     list-style: none;
     display: flex;
     justify-content: flex-end;
     align-items: center;
}

nav li {
     height: 3rem;
}

nav li a {
     height: 100%;
     padding: 1rem 1.5rem;
     text-decoration: none;
     display: flex;
     align-items: center;
     color: #fff;
}

nav ul .mk-logo {
     color: #fff;
     font-size: 1.75rem;
     font-weight: bold;
     background-color: none;
}

.mk-logo span {
     color: #00ffee;
     font-size: 1.75rem;
}

nav li a:hover {
     color: #00ffee;
     transition: all 0.2s ease;
}

nav li:first-child {
     margin-right: auto;
     text-decoration: none;
}

.mk-logo span:hover {
     margin-right: auto;
     text-decoration: none;
     color: #fff;
}

.menu-btn {
     font-size: 1.75rem;
}

/* Menu Bar Style */

.menubar {
     position: fixed;
     top: 0;
     right: 0;
     height: 100vh;
     width: 250px;
     z-index: 999;
     background-color: #1f2937;
     color: #fff;
     box-shadow: -10px 0 10px rgba(255, 255, 255, 0.1);
     display: none;
     flex-direction: column;
     align-items: flex-start;
     justify-content: flex-start;
     border: 1px solid #2c2c2c;
}

.menubar li {
     width: 100%;
}

.menubar a {
     width: 100%;
}

.menubar a i {
     width: 100%;
     color: #fff;
     font-size: 1.5rem;
}
.menubar a i:hover {
     width: 100%;
     /* color: #00ffee; */
}

.menu-btn {
     display: none;
}

@media (max-width: 940px) {
     .menu-btn {
          display: block;
          color: #fff;
          font-size: 1.5rem;
          z-index: 100;
          padding: 0;
     }

     .hideOnMobile {
          display: none;
     }

     nav {
          padding: 0rem 1rem 0rem 0rem;
     }

     nav ul {
          padding-right: 3rem;
     }
}

@media (max-width: 400px) {
     .menubar {
          width: 100%;
     }

     nav ul {
          padding-right: 1rem;
     }
}