/*控制菜单外框*/
/*初始化*/
header {
    position: fixed;
    top: -10vh;
    left: 0;
    width: auto;
    height: 120vh;
    z-index: var(--z-dock);
}

/*居中外框*/
header {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*控制菜单内框*/
/*居中内框*/
#dock {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/*内框样式*/
#dock {
    width: auto;
    height: 120vh;
    backdrop-filter: blur(100px);
}

/*内框阴影*/
#dock {
    box-shadow: 0 0 30px -10px #000;
    /*box-shadow: 水平位置 垂直位置 模糊距离 阴影大小 阴影颜色;*/
}

/*控制内容块大小*/
.menu {
    width: 40px;
    height: 40px;
    margin: 10px;
    border-radius: 10px;
}

/*图片样式（临时统一控制，没图标资源）*/
.menu_img {
    content: url("../../pic/light/light.svg");
    border-radius: 10px;
}

/*鼠标浮上样式*/
@media (hover: hover) {
    .menu:hover {
        box-shadow: 0 0 30px -10px #000;
        transition: box-shadow 250ms;
    }
}

/*鼠标点击样式*/
.menu:active {
    box-shadow: 0 0 10px -5px #000;
    transition: box-shadow 1ms;
}

/*鼠标消失样式*/
.menu {
    box-shadow: none;
    transition: box-shadow 250ms;
}


/*鼠标移入移出样式*/
.dockin {
    opacity: 1;
    transition: opacity 1s;
}

.dockout {
    opacity: 0;
    transition: opacity 1s;
}