/* 1. 取消所有元素的默认 margin、padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 2. 让 HTML、body 充满整个视口 */
html, body {
    height: 100%;
    font-size: 16px;
    font-family: 'Arial', sans-serif;
    color: #333;
    line-height: 1.5;
}

/* 3. 让图片和视频自适应 */
img, video {
    max-width: 100%;
    height: auto;
}

/* 4. 让列表项没有默认样式 */
ul, ol {
    list-style: none;
}

/* 5. 取消超链接的默认下划线 */
a {
    text-decoration: none;
    color: inherit;
}

/* 6. 让表单元素继承字体 */
input, button, textarea, select {
    font: inherit;
}

/* 7. 让按钮默认无边框 & 背景色 */
button {
    border: none;
    background: none;
    cursor: pointer;
}


/* 2. 标题样式 */
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    line-height: 1.3;
}

h1 { font-size: 2em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.25em; }
h5 { font-size: 1.1em; }
h6 { font-size: 1em; }

/* 3. 段落和文本 */
p {
    
}

strong {
    font-weight: bold;
}

em {
    font-style: italic;
}

blockquote {
    border-left: 4px solid #007bff;
    padding-left: 10px;
    color: #555;
    margin: 10px 0;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* 1. 简单的淡入动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 1s ease-in-out;
}

/* 2. 按钮放大效果 */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.btn-animated {
    animation: pulse 1s infinite;
}

/* 1. 输入框样式 */
input, textarea, select {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
    transition: border-color 0.3s;
}

input:focus, textarea:focus, select:focus {
    border-color: #007bff;
}

/* 2. 复选框和单选按钮 */
input[type="checkbox"], input[type="radio"] {
    width: auto;
    margin-right: 5px;
}
/* 特效 */
/* 初始化隐藏，防止未触发动画时显示 */
.scroll-animate {
    opacity: 0;
    visibility: hidden;
    transition: all 0.8s ease-out;
}

/* 进入视口后显示 */
.scroll-animate.show {
    opacity: 1;
    visibility: visible;
}

/* 向上飞入 */
.fade-up {
    transform: translateY(50px);
}
.fade-up.show {
    transform: translateY(0);
}

/* 向下飞入 */
.fade-down {
    transform: translateY(-50px);
}
.fade-down.show {
    transform: translateY(0);
}

/* 向左飞入 */
.fade-left {
    transform: translateX(-50px);
}
.fade-left.show {
    transform: translateX(0);
}

/* 向右飞入 */
.fade-right {
    transform: translateX(50px);
}
.fade-right.show {
    transform: translateX(0);
}

/* 渐显 */
.fade-in {
    opacity: 0;
}
.fade-in.show {
    opacity: 1;
}