*{
    list-style: none;
    text-decoration: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;    /* 盒模型计算方式：元素总宽度 = 设置的 width（已包含 padding 和 border） */
}

.title{
    height: 60px;
    background-color: black;
    /* 使用Flex布局实现左右对齐 */
    display: flex;
    justify-content: space-between; /* 左右两端对齐 */
    align-items: center; /* 垂直居中 */
    padding: 0 40px; /* 左右内边距，避免内容贴边 */
}

.title-left{
    margin-left: 40%;
    color: white;
    font-size: 25px;
}

.title-right{
    display: flex;
    align-items: center; /* 右侧内容垂直居中 */
    gap: 15px; /* 元素之间的间距 */
    font-size: 12px; /* 右侧文字字号 */
    color: white;
}

.title-right .login, .title-right .logout{
    /* padding: 5px 12px; */
    color: white;
    cursor: pointer;   /*当鼠标指针悬停在设置了该属性的元素上时，光标会变成 “手型”（即指针样式） */
    font-size: 12px;
}

.title-right .login:hover, .title-right .logout:hover{
    color: red; /* 鼠标悬浮效果 */
}


.main-container{
    display: flex;
}


.sidebar{
    height: 250px;
    width: 200px;
    background-color: #EEF4FF;
    padding-top: 20px;
}

.sidebar ul{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

.sidebar ul li a{
    font-size: 18px;
    color: #334155;
}

.sidebar ul li a:hover{
    color: red;
}