*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
nav{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #2b3d50;
    color: #fff;
    height:fit-content;
}
.logo {
    display: flex;
    align-items: center;
    margin-left: 10px;
    width: 50px; height: 50px; background: rgba(255,255,255,0.15); border-radius: 10px; overflow:hidden;
}
.logo img { width: 100%; height: 100%; object-fit:fill; }
.menu > ul{
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
ul{
    list-style: none;
}
.menu-item{
    cursor: pointer;
    padding: 10px;
    border-radius: 5px;
}
.menu-item:hover{
    color: rgb(255, 255, 255);
    background-color: #f0d351e8;
}
.menu-item:active{
    color: #fff;
}
/* Dark Mode Styles */
body.dark-mode nav {
  background-color: #2d2d2d;
}

body.dark-mode .menu-item {
  color: #e0e0e0;
}

body.dark-mode .menu-item:hover {
  background-color: #4a5568;
  color: #fff;
}

body.dark-mode .login-register-login > a {
  background-color: #4a5568;
  color: #68d391;
}

body.dark-mode .login-register-register > a {
  background-color: #4a5568;
  color: #68d391;
}

body.dark-mode .login-register-login :hover {
  background-color: #68d391;
  color: #ffffff;
}

body.dark-mode .login-register-register :hover {
  background-color: #68d391;
  color: #ffffff;
}

body.dark-mode .logo > span {
  color: #e0e0e0;
}

.login-register-login{
    display: flex;
    justify-content: space-between;
    
    margin-right: 10px;
}

.login-register-login > a{
    background-color: #ffffff;
    color: #0ab391;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    font-size: 0.888rem;
    font-weight: bold;
    text-decoration: none;
}
.login-register-register{
    display: flex;
    margin-right: 10px;
}
.login-register-register > a{
    background-color: #ffffff;
    color: #0ab391;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    font-size: 0.888rem;
    font-weight: bold;
    text-decoration: none;
}
.login-register{
    display: flex;
    justify-content: space-between;
    margin-right: 10px;
}
.login-register-login :hover{
    transition: 0.3s;
    background-color: #0ab391;
    color: #ffffff;
}
.login-register-register :hover{
    transition: 0.3s;
    background-color: #0ab391;
    color: #ffffff;
}

/* calender */