/* 还没学CSS，整着玩的 */

:root {
    /* 颜色变量设置 */
    --bg-color-light: #bcd5da;
    --text-color-light: black;
    --bg-color-dark: #1d446b;
    --text-color-dark: #efefef;
}

html {
    background-color: var(--bg-color-light);
}

body {
    width: 100%;
}

@media (prefers-color-scheme: dark) {
    html {
        background-color: var(--bg-color-dark);
    }
}

html, body {
    height: 100%;
}

/* 背景图片设置 */
body {
    margin: 0;
    display: flex;
    min-height: 100vh;
    position: absolute;
    flex-direction: column;
    color: var(--text-color-light);
    background-color: var(--bg-color-light);
    /* background-repeat: repeat;
    background-attachment: scroll;
    background-size: cover;
    background-position: center center; */
}

.background-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* 置于内容下方 */
    background-repeat: repeat;
    background-attachment: scroll;
    background-size: cover;
    background-position: center center;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: var(--bg-color-dark);
        color: var(--text-color-dark);
    }
}

/* 给标题一点小震撼 */
h1 {
    font-weight: normal;
    font-size: 30px;
}

/* 自定义字体 */
@font-face {
    font-family: title;
    src: url('/font/SmileySans-Oblique.woff2');
    font-display: swap;
}

@font-face {
    font-family: text;
    src: url('/font/JiangChengHei-500W.woff2');
    font-display: swap;
}

@font-face {
    font-family: text;
    src: url('/font/Inter-Regular.woff2');
    font-display: swap;
}

@font-face {
    font-family: code;
    src: url('/font/JiangChengHei-500W.woff2');
    font-display: swap;
}

@font-face {
    font-family: code;
    src: url('/font/CascadiaMono-Regular.woff2');
    font-display: swap;
}

@font-face {
    font-family: copyright;
    src: url('/font/JetBrainsMono-Medium.ttf');
    font-display: swap;
}

/* 调整网页字体 */
h1 {
    font-family: "title";
}

.copyright {
    font-family: "copyright";
    text-align: center;
    font-size: 12px;
    line-height: 1.4;
}

code {
    font-family: "code";
    font-size: 15px;
}

label {
    font-size: 16px;
}

p, li {
    line-height: 1.5;
}

/* 全局设定 */
.content {
    flex: 1 0 auto;
}

#footer {
    flex-shrink: 0;
}

body {
    text-align: justify;
}

/* 链接标签设定 */
a {
    text-decoration: none;
}

/* 平滑滚动效果 */
html {
    scroll-behavior: smooth;
}

/* 输入框和按钮字体和文字大小 */
input, button {
    /* font-family: text; */
    font-size: 16px;
}

/* 圆角矩形底文字 */
.rounded-box1 {
    margin: 10px;
    background-color: rgba(0, 0, 0, 0.5); /* 设置半透明的背景颜色 */
    border-radius: 10px; /* 圆角半径 */
    padding: 5px 20px 5px 20px; /* 从上、右、下、左添加内边距 */
    color: #efefef; /* 文字颜色 */
    backdrop-filter: blur(2px);
    border: 1.5px solid #22222215;
}

.rounded-box2 {
    background-color: rgba(218, 178, 118, 0.45);
}

.rounded-box3 {
    background-color: rgba(100, 107, 140, 0.25);
}

.rounded-box3p {
    margin: 10px;
    background-color: rgba(100, 107, 140, 0.5);
    border-radius: 10px;
    padding: 5px 20px 20px 20px;
    color: black;
    margin-top: 20px;
    backdrop-filter: blur(2px);
}

.rounded-box4 {
    background-color: rgba(50, 200, 150, 0.5);
}

.rounded-box5 {
    background-color: rgba(50, 200, 250, 0.5);
}

.rounded-box6 {
    background-color: rgba(20, 100, 100, 0.5);
}

.rounded-box7 {
    border-radius: 10px;
    padding: 5px 20px 5px 20px;
    color: black;
    margin-top: 10px;
    margin-bottom: 20px;
    background-color: rgba(7, 58, 61, 0.75);
    backdrop-filter: blur(2px);
}

.rounded-box2, .rounded-box3, .rounded-box4, .rounded-box5, .rounded-box6 {
    margin: 10px;
    border-radius: 10px;
    padding: 5px 20px 5px 20px;
    color: black;
    margin-top: 10px;
    border: 1.5px solid #97979735;
    backdrop-filter: blur(2px);
}

@media (prefers-color-scheme: dark) {
    .rounded-box1 {
        border: 1.5px solid #5f5f5f15;
    }

    .rounded-box2, .rounded-box3, .rounded-box3p, .rounded-box4, .rounded-box5, .rounded-box6, .rounded-box7 {
        color: #efefef;
        border: 1.5px solid #22222235;
    }
}

/* 白天模式下的按钮颜色 */
button {
    border-radius: 3px;
    border-width: 1.75px;
    background-color: #11bbbb; /* 蓝色背景 */
    color: black; /* 白色文字 */
}

/* 夜晚模式下的按钮颜色 */
@media (prefers-color-scheme: dark) {
    button {
        background-color: #2c3e50; /* 深蓝色背景 */
        color: #dddddd; /* 浅灰色文字 */
    }
}

/* 白天模式下的输入框颜色 */
input {
    background-color: #999999; /* 浅灰色背景 */
    color: #222222; /* 深灰色文字 */
}

/* 夜晚模式下的输入框颜色 */
@media (prefers-color-scheme: dark) {
    input {
        background-color: #0E2A47; /* 深蓝色背景 */
        color: #aaaaaa; /* 浅灰文字 */
    }
}

/* 消息框 */
.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    max-width: 60%;
    font-family: code;
    background-color: #d2d5e6;
    border: #5ec1b9 1.5px solid;
    color: #000000;
    padding: 10px 20px;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 1;
}

.toast.show {
    opacity: 1;
}

@media (prefers-color-scheme: dark) {
    .toast {
        background-color: #1d2031;
        border: #074860 1.5px solid;
        color: #ffffff;
    }
}

/* 自定义字体样式的字体名 */
@font-face {
    font-family: SmileySans;
    src: url('/font/SmileySans-Oblique.woff2');
    font-display: swap;
}

@font-face {
    font-family: JiangChengHei;
    src: url('/font/JiangChengHei-500W.woff2');
    font-display: swap;
}

@font-face {
    font-family: Inter;
    src: url('/font/Inter-Regular.woff2');
    font-display: swap;
}

@font-face {
    font-family: Saira;
    src: url('/blog/content/0020.phigros-reference/Saira-Regular.ttf');
    display: swap;
}

@font-face {
    font-family: CascadiaMono;
    src: url('/font/CascadiaMono-Regular.woff2');
    font-display: swap;
}

@font-face {
    font-family: CascadiaCode;
    src: url('/font/CascadiaCode-Regular.woff2');
}

@font-face {
    font-family: JetBrainsMono;
    src: url('/font/JetBrainsMono-Medium.ttf');
    font-display: swap;
}

@font-face {
    font-family: MapleMono;
    src: url('/font/MapleMono-Regular.woff2');
    font-display: swap;
}