/* 页面 */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-width: 100vw;
    background: #fafafa;
    overflow: hidden;
    font-family: 'Questrial', sans-serif;
    user-select: none;
}

.dark {display: none;}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: none;
}

/* 取消文本下划线 */
a {text-decoration: none}

/* 输入框预置文本颜色 */
::-webkit-input-placeholder {color: #d8dbdd}

/* 选中颜色 */
::selection {background: #eeeeee}

/* 滚动条样式 */
::-webkit-scrollbar {display: none}

/* 页面总布局Grid */
.container {
    height: 100vh;
    width: 100vw;
    display: grid;
    align-items: center;
    justify-content: center;
    grid-row-gap: 10px;
    grid-template-columns: 1fr;
    grid-template-rows: 200px 240px max-content auto;
    grid-template-areas:
        '链接'
        '搜索'
        '书签'
        '页尾';
}

/* 链接区域 */
.link {grid-area: 链接;place-self: start start;}

/* 链接区域内容 */
.linkbox {
    height: 50px;
    width: 230px;
    margin-left: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.2rem;
}

.bar {
    height: 20%;
    width: 1.5px;
    align-self: center;
    background-color: #cccccc;
    border-radius: 2px;
}

/* 链接特效 */
.links {color: #c0c0c0; transition: all 0.3s;}
.link1:hover {color: #b0ccdf; filter: drop-shadow(0 0 2px #b0ccdf)}
.link2:hover {color: #d7cbb6; filter: drop-shadow(0 0 2px #d7cbb6)}
.link3:hover {color: #d4b6d7; filter: drop-shadow(0 0 2px #d4b6d7)}
.link4:hover {color: #b6d7c9; filter: drop-shadow(0 0 2px #b6d7c9)}

/* 搜索区域 */
.search {
    grid-area: 搜索;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* LOGO */
.logo {
    width: 188px;
    height: 60px;
    border: 0px;
    margin: 10px;
}

/* 搜索外框 */
.s-outbox {
    width: 600px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px;
    background-color: #f6f6f6;
    border-radius: 10px;
    box-shadow: inset 0px 0px 7px #dddddd;
}

/* 搜索内框 */
.keyword {
    width: 525px;
    height: 40px;
    color: #aaaaaa;
    background-color: #f6f6f6;
    font-family: 'Questrial';
    font-size: 1rem;
    border: 0px;
    outline-style: none;
}

/* 搜索图标 */
.s-icon {
    width: 28px;
    height: 28px;
    margin-left: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

/* 搜索图标特效 */
.s-icon:hover {filter: drop-shadow(0 0 3px #00000022) brightness(200%)}

/* 搜索引擎切换 */
.searchbox {
    width: 200px;
    display: flex;
    justify-content: space-between;
    transition: all 0.3s;
}

/* 引擎图标 */
.ss-icon {
    width: 28px;
    height: 28px;
    cursor: pointer;
    transition: all 0.3s;
}

/* 引擎图标特效 */
.google-icon:hover {filter: drop-shadow(0 0 3px #00000022) brightness(200%)}
.baidu-icon:hover {filter: drop-shadow(0 0 3px #00000022) brightness(200%)}
.bing-icon:hover {filter: drop-shadow(0 0 3px #00000022) brightness(200%)}

/* 页尾区域 */
.end {
    grid-area: 页尾;
    display: flex;
    margin-bottom: 10px;
    align-self: flex-end;
    align-items: center;
    justify-content: center;
    color: #dddddd;
}

/* 书签区域 */
.fav {
    grid-area: 书签;
    display: flex;
    justify-content: center;
}

/* 书签区域内嵌Grid */
.fav-grid {
    display: grid;
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    grid-template-columns: repeat(8, 50px);
    margin: 10px;
}

/* 书签区域项目属性 */
.fav-grid>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    background: #fcfcfc;
    box-shadow: 0 0px 6px #00000022;
    border-radius: 7px;
    text-align: center;
    cursor: pointer;
    filter: grayscale(0.4);
    transition: all 0.3s;
}

.fav-grid>div:hover {
    transform: scale(1.1);
}

/* 书签项目图标 */
.fav-icon {
    width: 60%;
    height: 60%;
}

/* 书签项目名称 */
.fav-name {
    position: absolute;
    align-self: center;
    justify-self: center;
    font-size: 0.6rem;
    bottom: -20px;
    width: 100%;
    color: #aaaaaa;
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {

    /* 页面 */
    body {background: #282828;}

    /* 输入框预置文本颜色 */
    ::-webkit-input-placeholder {color: #282828}

    /* 选中颜色 */
    ::selection {background: #9D2222}

    /* 链接区域内容 */
    .bar {background-color: #404040}

    /* 深色切换 */
    .light {display: none}
    .dark {display: unset}

    /* 链接特效 */
    .links {color: #505050}
    .link1:hover {color: #3F5768; filter: drop-shadow(0 0 2px #3F5768); transition: all 0.3s}
    .link2:hover {color: #5E4D31; filter: drop-shadow(0 0 2px #5E4D31); transition: all 0.3s}
    .link3:hover {color: #5F3B63; filter: drop-shadow(0 0 2px #5F3B63); transition: all 0.3s}
    .link4:hover {color: #446557; filter: drop-shadow(0 0 2px #446557); transition: all 0.3s}

    /* 搜索外框 */
    .s-outbox {
        background-color: #404040;
        box-shadow: 0 0px 6px #00000050;
    }

    /* 搜索内框 */
    .keyword {
        color: #999999;
        background-color: #404040;
    }

    /* 搜索图标特效 */
    .s-icon:hover {filter: drop-shadow(0 0 2px #9D2222)}

    /* 引擎图标特效 */
    .google-icon:hover {filter: drop-shadow(0 0 1.5px #9D2222) brightness(120%)}
    .baidu-icon:hover {filter: drop-shadow(0 0 1.5px #9D2222) brightness(120%)}
    .bing-icon:hover {filter: drop-shadow(0 0 1.5px #9D2222) brightness(120%)}

    /* 书签区域项目属性 */
    .fav-grid>div {
        background: #404040;
        box-shadow: 0 0px 6px #00000050;
    }

    /* 书签项目名称 */
    .fav-name {color: #999999;}

    .end {color: #505050;}
}