/* 配色 */
* {
    color-scheme: light dark;
}

:root {
    --bar-color: #b3c2d3;
    --text-color: #000000;
    --background-color: aliceblue;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bar-color: #3f5267;
        --text-color: #ffffff;
        --background-color: #292727;
    }
}

/* 框架 */
html {
    height: 100%;
    font-family: 'Roboto', sans-serif;
}

body {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

header {
    background-color: var(--bar-color);
    color: var(--text-color);
    width: 100%;
    position: fixed;
    user-select: none;
}

main {
    background-color: var(--background-color);
    height: 93vh;
}

main iframe {
    width: 100%;
    border: none;
    display: block;
    height: calc(100% - 48px);
}

footer {
    text-align: center;
    position: fixed;
    bottom: 0;
    height: 24px;
    width: 100%;
    background-color: var(--background-color);
    color: var(--text-color);
}

footer a {
    color: var(--text-color);
}

/* 导航条 */
nav {
    font-size: 20px;
    width: 100%;
    background-color: var(--bar-color);
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    float: left;
    color: var(--text-color);
    transition: all 0.3s ease;
}

nav ul li:hover {
    float: left;
    background-color: lightseagreen;
}

nav ul li a {
    display: block;
    color: var(--text-color);
    text-align: left;
    padding: 24px;
    text-decoration: none;
}

/* 导航条：下拉菜单 */
.nav-link {
    color: var(--text-color);
    text-decoration: none;
}

.dropdown-menu {
    display: none;
    position: absolute;
    background-color: var(--bar-color);
}

.dropdown-item {
    display: block;
    padding: 24px;
    color: var(--text-color);
    text-decoration: none;
    transition: all 0.3s ease;
}

.dropdown-item:hover {
    display: block;
    padding: 24px;
    color: var(--text-color);
    text-decoration: none;
    background-color: mediumpurple;
}

.nav-item:hover .dropdown-menu {
    display: block;
}

.nav-item.selected .dropdown-menu {
    display: block;
    background-color: mediumpurple;
}

/* 导航条：屏幕适配 */
/* 手机 */
@media (min-width: 0px) {
    .date {
        display: none;
    }

    .counter {
        display: none;
    }
    
    .quote {
        display: none;
    }
}
/* 平板 */
@media (min-width: 768px) {
    .date {
        padding: 4px;
        display: block;
    }

    .counter {
        display: 1px;
    }
    
    .quote {
        display: none;
    }
}
/* 电脑 */
@media (min-width: 1024px) {
    .date {
        padding: 4px;
        display: block;
    }

    .counter {
        padding: 1px;
    }
    
    .quote {
        padding: 1px;
    }
}



/* iframe屏幕适配 */
/* 手机 */
@media (min-width: 0px) and (max-width: 344px) {
    main {
        padding-top: 144px;
    }
}

@media (min-width: 344px) {
    main {
        padding-top: 72px;
    }
}
/* 电脑 */
@media (min-width: 1024px) { main iframe { height: 84vh; } }
@media (min-width: 1100px) { main iframe { height: 86vh; } }
@media (min-width: 1300px) { main iframe { height: 87vh; } }
@media (min-width: 1500px) { main iframe { height: 88vh; } }
@media (min-width: 1700px) { main iframe { height: 89vh; } }
@media (min-width: 1900px) { main iframe { height: 90vh; } }
@media (min-width: 2100px) { main iframe { height: 91vh; } }
@media (min-width: 2300px) { main iframe { height: 92vh; } }
@media (min-width: 2500px) { main iframe { height: 93vh; } }
@media (min-width: 2700px) { main iframe { height: 94vh; } }
@media (min-width: 2900px) { main iframe { height: 95vh; } }