/*导入 google 字体 因为这个字体感觉很利落 有点美感（其实就是挑累了）很喜欢*/
@import url("https://fonts.googleapis.com/css2?family=Montagu+Slab:wght@500&family=Montserrat:wght@400;500;600&display=swap");

/*定义 CSS 变量 用于设置页面的颜色 字体 字号等这些样式*/
:root {
  --header-height: 3.5rem;

  /*          = =定义颜色= =         */
  /* 定义需要用的颜色 (从设计师色盘找的)色调 饱和度 亮度 */
  --first-color: hsl(230, 62%, 56%);
  --title-color: hsl(230, 70%, 16%);
  --text-color: hsl(230, 16%, 45%);
  --border-color: hsl(230, 50%, 90%);
  --white-color: hsl(0, 0%, 100%);
  --body-color: hsl(230, 100%, 96%);
  --container-color: hsl(230, 100%, 97%);

  /*           字体和排版        */
  /*做个备注 定义使用的字体和字号 .5rem = 8px | 1rem = 16px ...*/
  --body-font: "Montserrat", sans-serif;
  --second-font: "Montagu Slab", serif;
  --biggest-font-size: 2rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;
    /* 怎么感觉备注加个=号好看很多阿 容易分的清楚*/
  /*========== 字体粗细  定义字体的粗细==========*/
  --font-regular: 400;
  --font-medium: 500;
  --font-semi-bold: 600;

  /*==========z index 定义层级==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

/*========== 响应排版 ==========*/
@media screen and (min-width: 1150px) {
  :root {             /* 当屏幕宽度大于等于 1150px 调整字体大小 */
    --biggest-font-size: 3.5rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
  }
}

/*=============== 通用样式设置 ===============*/
* {     /* 设置元素 border-box 宽度和高度包含内边距和边框 */
  box-sizing: border-box;
  padding: 0;   /* 清除内边距 */
  margin: 0;    /* 清除外边距 */
}

html {     /* 设置页面滚动行为为平滑滚动 */
  scroll-behavior: smooth;
}

body,
input,
button {    
  font-family: var(--body-font); /* 设置页面主体输入框和按钮的字体为 --body-font */
  font-size: var(--normal-font-size);  /* 设置字体大小为 --normal-font-size */
}

body {   /* 设置页面主体的背景颜色为 --body-color */
  background-color: var(--body-color);  /* 设置页面主体的背景颜色为 --body-color */
  color: var(--text-color);   /* 设置页面主体的文字颜色为 --text-color */
  transition: background-color .4s; /* 设置背景颜色的过渡效果 过渡时间为 0.4 秒 */
}

input,
button {
  border: none;  /* 清除输入框和按钮的边框 */
  outline: none;   /* 清除输入框和按钮的聚焦轮廓 */
}

h1, h2, h3, h4 {
  color: var(--title-color);  /* 设置标题文字颜色为 --title-color */
  font-family: var(--second-font);   /* 设置标题的字体为 --second-font */
  font-weight: var(--font-medium);  /* 设置标题的字体粗细为 --font-medium */
}

ul {     /* 清除列表元素的默认样式 因为难看*/
  list-style: none;
}

a {    /* 清除链接的下划线 */
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;  /* 设置图片的最大宽度为 100 确保图片不会超出 */
  height: auto;  /* 设置图片的高度自适应 */
}

/*=============== 主题 ===============*/
/*变深色主题时 重新定义颜色（黑色主题） */
body.dark-theme{
	--title-color: hsl(230, 48%, 85%);
	--text-color: hsl(230, 16%, 75%);
	--border-color: hsl(230, 12%, 18%);
	--body-color: hsl(230, 12%, 8%);
	--container-color: hsl(230, 12%, 12%);
}

/*========== 
深色主题下
改颜色
==========*/
.dark-theme .shadow-header{
	box-shadow: 0 2px 16px hsla(0, 0%, 0%, .4);
}   /* 设置头部的阴影效果 */

.dark-theme .nav__menu{
	box-shadow: 0 -8px 32px hsla(0, 0%, 0%, .4);
}    /* 导航菜单的阴影效果 */

.dark-theme .scrollup{
	box-shadow: 0 2px 8px hsla(0, 0%, 0%, .4);
}     /* 返回顶部按钮的阴影效果 */

.dark-theme .search,
.dark-theme .login{
	background-color: hsla(230, 12%, 8%, .6);
}    /* 搜索框和登录框的背景颜色 */

.dark-theme::-webkit-scrollbar{
	background-color: hsl(230, 16%, 15%);
}  /* 设置滚动条的背景颜色 */

.dark-theme::-webkit-scrollbar-thumb{
	background-color: hsl(230, 16%, 25%);
}   /* 滚动条滑块的背景颜色 */

.dark-theme::-webkit-scrollbar{
	background-color: hsl(230, 16%, 35%);
}    /* 滚动条的背景颜色 */

/*可重复使用的 CSS 类*/
.container {
  max-width: 1220px; /* 最大宽度为 1220px */
  margin-inline: 1.5rem; /* 左右外边距为 1.5rem */
}

.grid {
  display: grid;  /* 将元素设置为网格布局 */
  gap: 1.5rem;   /* 设置网格元素之间的间距为 1.5rem */
}

.section {
  padding-block: 5rem 1rem;  /* 每个部分的上下内边距 */
}

.section__title {   /* 部分标题的文本居中 */
  text-align: center;  /* 标题的字体大小为 --h1-font-size */
  font-size: var(--h1-font-size); /* 标题的字体为 --second-font */
  font-family: var(--second-font);  /* 标题的下外边距为 2rem */
  margin-bottom: 2rem;
}

.main {
  overflow: hidden; /*  隐藏多出的内容 */
}

/*=============== HEADER NAV 页眉与导航栏 ===============*/
.header{    /* 将头部固定在页面顶部 */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;   /* 宽度100 */
	background-color: var(--body-color);  /* 背景颜色 */
	z-index: var(--z-fixed);   /* 设置层级为 --z-fixed（元素定义在上面） */
	transition: box-shadow .4s, background-color .4s;
}

.nav{
	height: var(--header-height); /* 导航栏的高度 */
	display: flex;   /* 导航栏水平两端对齐 */
	justify-content: space-between;
	align-items:center;   /* 导航栏的子元素垂直居中对齐 */
}

.nav__logo{  /* 导航栏 logo */
	display: inline-flex;
	align-items: center;  /* 将 logo垂直居中对齐 */
	column-gap: .5rem;  /* 水平间距为 0.5rem */
	color: var(--first-color);  /* logo 的文字颜色 */
	font-weight: var(--font-medium);   /* logo 的字体粗细 */
}

.nav__logo i{
	font-size: 1.25rem;   /* logo 图标的字体大小 */
}

/* 打算做两端适配 手机端导航样式 */
@media screen and (max-width:1150px){
	.nav__menu{    /* 将导航菜单固定在页面底部 跟现在的手机软件一样*/
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;  /* 导航菜单的宽度 */
		background-color: var(--container-color); /* 导航菜单的背景颜色 */
		box-shadow: 0 -8px 32px hsla(0, 0%, 0%, .1); /* 导航菜单的阴影效果 */
		padding: 1.25rem 4rem;  /* 导航菜单的内边距 */
		transition: background-color .4s; /* 背景颜色的过渡效果 过渡时间0.4 */
	}
}

.nav__list{
	display: flex;  /* 设置布局 */
	justify-content: space-between;  /* 导航列表的水平两端对齐 */
}

.nav__link{
	color: var(--text-color); /* 导航链接的文字颜色 */
	transition: color .4s; /* 文字颜色的过渡0.4 */
}

.nav__link span{  /* 隐藏导航链接中的文本 */
	display: none;
}

.nav__link i{
	font-style: 1.25rem; /*   导航图标的字体大小 */
}

.nav__link:hover{       /* 鼠标悬停时文字颜色 */
	color: var(--first-color);
}

.nav__actions{  /* 导航操作按钮 */
	display: flex; 
	align-items: center;    /* 垂直居中对齐 */
	column-gap: 1rem;   /* 水平间距 */
}

.nav__actions i{  
	font-size: 1.25rem;   /* 导航操作按钮中图标的字体大小 */
	color: var(--title-color);  /* 文字颜色 */
	cursor: pointer;  /* 鼠标悬停的反馈 */
	transition: color .4s;  /* 图标文字颜色的过渡0.4秒 */
}

.nav__actions i:hover{    /* 鼠标悬停时按钮中图标的文字颜色 */
	color: var(--first-color);
}

/* 添加头部阴影效果 */
.shadow-header{
	box-shadow: 0 2px 16px hsla(0, 0%, 0%, .1);
}

/* 导航链接 */
.active-link{ 
	color: var(--first-color);
}

/*=============== SEARCH 搜索功能 ===============*/
.search{  /* 将搜索框固定在页面上 位置在页面上方隐藏 */
	position: fixed;
	top: -100%;
	left: 0;
	width: 100%;
	height: 100%;  /* 搜索框的宽度和高度 */
	z-index: var(--z-fixed); /* 搜索框的层级 点击时在最上面 */
	background-color: hsla(230, 12%, 96%, .6);
	backdrop-filter: blur(16px);  /* 背景颜色和模糊效果 */
	padding: 8rem 1.5rem;  /* 搜索框的内边距 */
	transition: top .4s; /* 显示和隐藏的过渡时间 */
}

.search__form{   /* 将搜索表单设置为弹性布局 */
	display: flex; /* 垂直居中对齐 */
	align-items: center; /* 背景颜色 */
	column-gap: .5rem;  /* 水平间距为 0.5rem */
	background-color: var(--container-color);  /* 背景颜色 */
	border: 2px solid var(--border-color); /* 边框样式 */
	padding-inline: 1rem; /* 内边距 */
}

.search__icon{  /* 搜索图标字体大小 */
	font-size: 1.25rem;
	color: var(--title-color); /* 图标文字颜色 */
}

.search__input{
	width: 100%;  /* 输入框的宽度 */
	padding-block: 1rem; /* 上下内边距 */
	background-color: var(--container-color); /* 背景颜色 */
	color: var(--text-color);  /* 文字颜色 */
}

.search__close{   /* 将搜索关闭按钮固定在搜索框右上角 */
	position: absolute;
	top: 2rem;
	right: 2rem;
	font-size: 2rem;   /* 关闭按钮的字体大小 */
	color: var(--title-color);  /* 文字颜色 */
	cursor: pointer; /* 鼠标悬停效果 */
}

/* 显示搜索框的样式 */
.show-search{
	top: 0;
}

/*=============== LOGIN 登录===============*/
.login{    /* 将登录框固定在页面上 位置在页面上方隐藏 */
	position: fixed;
	top: -100%;
	left: 0;
	width: 100%;
	height: 100%;/*  登录框的宽度和高度 */
	z-index: var(--z-fixed);  /* 登录框的层级 */
	background-color: hsla(230, 12%, 96%, .6);
	background-filter: blur(16px);  /* 登录框的背景颜色和模糊效果 */
	align-items: center; /* 垂直居中对齐 */
	padding: 1.5rem; /* 内边距 */
	text-align: center; /* 文本居中 */
	transition: top .4s; /* 显示和隐藏的过渡时间0.4s */
}

.login__form{   /* 登录表单的背景颜色为 */
	background-color: var(--container-color);
	padding: 2rem 1.5rem;  /* 内边距 */
	border: 2px solid var(--border-color); /* 边框样式 */
	row-gap: 1.25rem; /* 垂直间距 */
}

.login__title{  /* 登录标题的字体大小 */
	font-size: var(--h2-font-size);
}

.login__group{    /* 元素之间的垂直间距 */
	row-gap: 1.25rem;
}

.login__label{
	display: block;
	text-align: initial; /* 登录标签的文本左对齐 */
	color: var(--title-color);  /* 登录标签的文字颜色 */
	font-weight: var(--font-medium); /* 字体粗细 */
	margin-bottom: .25rem; /* 下外边距 */
}

.login__input{
	width: 100%;   /* 设置登录输入框的宽度为 100% */
	background-color: var(--container-color);  /* 设置登录输入框的背景颜色*/
	border: 2px solid var(--border-color);  /* 登录输入框的边框样式 */
	padding: 1rem;  /* 设置登录输入框的内边距 */
	color: var(--text-color);  /* 设置登录输入框的文字颜色*/
}

.login__signup, /* 将注册和忘记密码链接设置为块级元素 */
.login__forgot{
	display: block;
	font-size: var(--small-font-size); /* 设置注册和忘记密码链接的字体大小 */
}

.login__signup{    /* 注册链接的下外边距为 0.5rem */
	margin-bottom: .5rem;
}

.login__signup a{
	color: var(--first-color);  /* 设置注册链接的文字颜色*/
	font-weight: var(--font-medium);  /* 链接的字体粗细 */
}

.login__forgot{
	color: var(--first-color); /* 忘记密码的文字颜色 */
	margin-bottom: 1.25rem; /* 下外边距 */
}

.login__button{  
	width: 100%; /* 登录按钮的宽度 */
	cursor: pointer;  /* 鼠标悬停 */
}

.login__close{ /* 将登录关闭按钮固定在登录框右上角 */
	position: absolute;
	top: 2rem;
	right: 2rem;
	font-size: 2rem;  /* 关闭按钮的字体大小 */
	color: var(--title-color); /* 关闭按钮的文字颜色 */
	cursor: pointer;
}

/* 显示登录框的样式 */
.show-login{
	top: 0;
}

/*=============== HOME  主页===============*/
.home__swiper{
	margin: initial;  /* 页轮播图的外边距为默认值 */
}

.home__container{
	padding-top: 2rem; /* 首页容器的上内边距 */
	row-gap: 2.5rem;   /* 首页容器子元素之间的垂直间距为 2.5rem */
}

.home__data{
	text-align: center;   /* 首页数据的文本居中 */
}

.home__title{
	font-size: var(--biggest-font-size);  /* 首页标题的字体大小*/
	margin-bottom: 1rem;  /* 首页标题的下外边距为 1rem */
}

.home__description{   /* 设置首页描述的下外边距为 2rem */
	margin-bottom: 2rem;
}

.home__images{  /* 将首页图片设置为网格布局 */
	display: grid;
}

.home__article,
.home__img{   /* 设置首页文章和图片的宽度为 220px */
	width: 220px; 
	transition: scale .4s;/* 图片缩放效果时间0.4 */
} 

.home__article{    /* 初始时将首页文章缩小为 0.8 倍 */
	scale: .8;
}

/* Swiper class  插件激活的样式 */
.swiper-slide-active,
.swiper-slide-duplicate-active{
	scale: 1;  /* 放大为 1 倍 */
}

/*=============== BUTTON 登录按钮===============*/
.button{
	display: inline-block;
	background-color: var(--first-color); /* 背景颜色 */
	color: var(--white-color);
	font-weight: var(--font-semi-bold); /* 字体粗细 */
	padding: 1rem 1.5rem;
	transition: box-shadow .4s; /* 过渡时间 */
}

.button:hover{
	box-shadow: 0 4px 32px hsla(230, 72%, 32%, .4); /* 鼠标悬停按钮的阴影效果 */
}

/*=============== SERVICES   服务  ===============*/
.services__container{  /* 元素之间的垂直间距 */
	row-gap: 3rem;
}

.services__card{  /* 服务卡片的文本居中 */
	text-align: center;
}

.services__card i{
	display: block;   /* 将服务卡片图标设置为块级元素 */
	font-size: 3rem;
	color: var(--first-color);
	margin-bottom: 1rem;
}

.services__title{ /* 服务标题的字体大小 */
	font-size: var(--h3-font-size);
	margin-bottom: .5rem;  /* 服务标题的下外边距 */
}

/*=============== FEATURED 精选书籍===============*/
.featured__card{  /* 设置为相对定位 */
	position: relative;
	text-align: center;  /* 文本居中 */
	background-color: var(--container-color);
	padding: 2rem;
	overflow: hidden; /* 隐藏卡片多出的内容 */
	border: 2px solid var(--border-color);  /* 边框样式 */
	transition: border .4s, background-color .4s;
}

.featured__img{
	width: 150px; /* 图片的宽度 */
	margin: 0 auto .75rem;  /* 水平居中对齐 */
} 

.featured__title{
	font-size: var(--h2-font-size);
	margin-bottom: .5rem;
}

.featured__prices{
	display: flex;
	justify-content: center;  /* 价格水平居中对齐 */
	align-items: center; /* 垂直居中对齐 */
	column-gap: .75rem; /* 水平间距 */
	margin-bottom: 1.25rem;
}

.featured__discount{ /* 折扣 */
	color: var(--title-color);
}

.featured__price{ /* 原价价格 字体大小 */
	font-size: var(--small-font-size);
	text-decoration: line-through;
}

.featured__card .button{ /* 鼠标悬停指针样式 */
	cursor: pointer;
}

.featured__actions{  /* 操作按钮 */
	display: inline-flex;
	flex-direction: column;
	row-gap: .75rem;
	position: absolute; /* 将操作按钮绝对定位在右上角 */
	top: 2rem;
	right: -1.5rem;
	transition: right .4s;
}

.featured__actions button{   /* 设置操作按钮的背景为透明 */
	background: none;
	font-size: 1.25rem;
	color: var(--first-color);
	cursor: pointer;/* 鼠标悬停 */
}

.featured__card:hover .featured__actions{
	right: 1.5rem;   /* 鼠标悬停在上时将操作按钮显示出来 */
}

/* Swiper class   Swiper 插件*/
.swiper-button-prev::after,  /* 上一页和下一页按钮的样式 */
.swiper-button-next::after{
	content: '';   /* 清除 Swiper 插件默认的上一页和下一页按钮内容 */
}

.swiper-button-prev,
.swiper-button-next{
	width: initial;     /* 设置 Swiper 插件上一页和下一页按钮的宽度和高度为初始值 */
	height: initial;
	background-color: var(--container-color);
	border: 2px solid var(--border-color);
	padding: .5rem;
	font-size: 1.5rem;
	color: var(--first-color);
	transition: border .4s background-color .4s;
}

/*=============== DISCOUNT   折扣===============*/
.discount__container{
	row-gap: 3.5rem;  /* 垂直间距 */  
}

.discount__data{  /* 设置折扣数据的文本居中 */
	text-align: center;
}

.discount__title{    /* 设置折扣标题的下外边距为 1rem */
	margin-bottom: 1rem;
}

.discount__description{  /* 折扣描述的下外边距 */
	margin-bottom: 2rem;
}

.discount__images{  /* 将折扣图片设置为弹性布局 */
	display: flex;
	justify-content: center; /* 将折扣图片的子元素水平居中对齐 */
}

.discount__img-1,
.discount__img-2{   /* 设置折扣图片的宽度 */
	width: 170px;
}

.discount__img-1{
	transform: translateX(1rem) rotate(-10deg);
}   /* 将第一张折扣图片向左平移 1rem 并逆时针旋转 10 度 */

.discount__img-2{
	transform: translateX(-1rem) rotate(10deg);
}   /* 将第二张折扣图片向右平移 1rem 并顺时针旋转 10 度 */

/*=============== NEW 新书===============*/
.new__card{
	display: flex;
	align-items: center;
	column-gap: 2.5rem;
	background-color: var(--container-color);
	padding: 1.5rem 1rem;
	color: var(--text-color);
	border: 2px solid var(--border-color);
	transition: border .4s, background-color .4s;
}

.new__card:hover{   /* 鼠标悬停在新品卡片上时的边框样式 */
	border: 2px solid var(--text-color);
}

.new__img{
	width: 100px; /* 图片的宽度 */
}

.new__title{
	font-size: var(--h2-font-size);
	margin-bottom: .5rem;
}

.new__prices{  /* 将新品价格设置为弹性布局 */
	display: flex;
	align-items: center;
	column-gap: .75rem;
	margin-bottom: .75rem;
}

.new__discount{ 
	color: var(--title-color);
}

.new__price{  /* 新品原价的字体大小 */
	font-size: var(--small-font-size);
	text-decoration: line-through;
}

.new__stars{  /* 星级的颜色 */
	color: var(--first-color);
}

.new__swiper:nth-child(1){  /* 轮播图的下外边距 */
	margin-bottom: 2rem;
}

/*=============== JOIN 加入 关注部分===============*/
.join__container{
	position: relative;
	padding-block: 3rem;
}

.join__bg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%; /* 背景图片的宽度和高度 */
	height: 100%;
	object-fit: cover;  /* 背景图片的适应方式和位置 */
	object-position: center;
}

.join__data{    /* 将加入数据设置为相对定位 */  
	position: relative;
}

.join__title{   /* 设置加入标题的文字颜色为黑色 */
	color: black;
}

.join__form{
	display: grid; /* 将加入表单设置为网格布局 */
	row-gap: 1rem;  /* 设置加入表单子元素之间的垂直间距为 1rem */
}

.join__input{
	padding: 1.25rem 1rem;  /* 设置加入输入框的内边距 */
	background-color: var(--body-color);
	color: var(--title-color);
	transition: background-color .4s;
}

.join__input::placeholder{  /* 输入框占位符的文字颜色 */
	color: var(--text-color);
}

.join__button{
	padding-block: 1.25rem;
	cursor: pointer;  /* 按钮的鼠标悬停 */
}

/*=============== TESTIMONIAL 评价 但是后面改成小猫客服了 ===============*/
.testimonial__card{
	text-align: center;
	background-color: var(--container-color);
	padding: 2rem 3rem 2.5rem;
	border: 2px solid var(--border-color);
	transition: border .4s, background-color .4s;
}

.testimonial__img{
	width: 100px; /* 图片的宽度 */
	border-radius: 50%;
	margin: 0 auto 1.5rem;  /* 水平居中对齐和下外边距 */
}

.testimonial__title{
	font-size: var(--h2-font-size);
	margin-bottom: .75rem; /* 标题的下外边距 */
}

.testimonial__description{ /* 描述的字体大小 */
	font-size: var(--small-font-size);
	margin-bottom: 1.25rem; /* 下外边距 */
}

.testimonial__stars{ /* 星级的颜色 */
	color: var(--first-color);
}

/*=============== FOOTER 网页底部================*/
.footer{
	padding-block: 4rem 6rem;
}   /* 设置页脚的上下内边距 */

.footer__container{
	row-gap: 3rem;  /* 垂直间距 */
}

.footer__logo{
	display: inline-flex; /* 页脚 logo 设置为内联弹性布局 */
	align-items: center; /* 居中对齐 */
	column-gap: .5rem;
	color: var(--first-color);
	font-size: var(--h3-font-size);
	font-family: var(--second-font); /* 页脚 logo 的字体 */
	margin-bottom: 1.25rem;
}

.footer__logo i{ /* 页脚 logo 图标的字体大小 */
	font-size: 1.25rem;
}

.footer__data{   /* 将页脚数据设置为网格布局，两列，列宽为最大内容宽度 */ 
	grid-template-columns: repeat(2, max-content);
	gap: 3rem 2rem;    /* 设置页脚数据网格元素之间的间距 */
}

.footer__title{
	font-size: var(--h3-font-size);
	margin-bottom: 1.25rem;
}

.footer__links{
	display: grid; /* 将页脚链接设置为网格布局 */
	row-gap: .5rem;  /* 页脚链接网格元素之间的垂直间距 */
}

.footer_link{
	color: var(--text-color);
	transition: color .4s; /* 过渡时间0.4s */
}

.footer__link:hover{  /* 鼠标悬停颜色 */
	color: var(--first-color);
}

.footer__info{  /* 设置页脚信息的字体样式为正常效果 */
	font-style: normal;
}

.footer__social{
	display: flex;  /* 将页脚社交图标设置为弹性布局 */
	column-gap: 1.25rem;  /* 页脚社交图标子元素之间的水平间距为 1.25rem */
}

.footer__social-link{
	font-size: 1.25rem; /* 页脚社交图标的字体大小 */
	color: var(--first-color); /* 社交图标的颜色 */
}

.footer__copy{
	display: block; /* 将页脚版权信息设置为块级元素 */
	margin-top: 5rem; /* 版权信息的上外边距 */
	text-align: center; /* 文本居中 */ 
	font-size: var(--small-font-size);  /* 字体大小 */
}

/*=============== SCROLL BAR 滚动条===============*/
::-webkit-scrollbar{
	width: .6rem; /* 设置滚动条的宽度为 0.6rem */
	border-radius: .5rem; /* 滚动条的圆角 */
	background-color: hsl(230, 16%, 85%); /* 背景颜色 */
}

::-webkit-scrollbar-thumb{   /* 设置滚动条滑块的圆角*/
	border-radius: .5rem;
	background-color: hsl(230, 16%, 65%);
}

::-webkit-scrollbar-thumb:hover{  /* 鼠标悬停在滚动条滑块上时 设置滚动条滑块的背景颜色 */
	background-color: hsl(230, 16%, 55%);
}

/*=============== SCROLL UP  向上滚动===============*/
.scrollup{   /* 将返回顶部按钮固定在页面右下角 */
	position: fixed;
	right: 1rem;
	bottom: -50%;
	background-color: var(--container-color);
	box-shadow: 0 2px 8px hsla(0, 0%, 0%, .1);  /* 设置返回顶部按钮的阴影效果 */
	display: inline-flex;
	padding: 6px;
	font-size: 1.25rem;
	color: var(--title-color);
	z-index: var(--z-tooltip);    /* 返回顶部按钮的层级为 --z-tooltip （最上面）*/
	transition: bottom .4s, transform .4s, background-color .4s;
}

.scrollup:hover{  /* 鼠标悬停在返回顶部按钮上时将按钮向上平移 0.5rem */
	transform: translateY(-.5rem);
}

/* 显示返回顶部按钮的样式 */
.show-scroll{
	bottom: 6rem;
}

/*=============== 小屏幕手机或者小窗口的适配 ===============*/
/*小屏幕设备 */
@media screen and (max-width: 320px){   /* 屏幕宽度小于等于 320px）的样式 */
	.container{
		margin-inline: 1rem;
	}
	
	.nav__menu{
		padding-inline: 3rem;  /* 导航菜单的左右内边距*/
	}
	
	.discount__img-1,
	.discount__img-2{   /* 折扣图片的宽度为 140px */
		width: 140px;
	}
	
	.new__card{     /* 将新书设置为垂直排列 */
		flex-direction: column;
	}
	
	.testimonial__card{  /* 设置推荐新书的左右内边距为 */
		padding-inline: 1rem;
	}
	
	.footer__data{
		grid-template-columns: 1fr;
		row-gap: 2rem;
	}
}

/* 中等屏幕设备 */
@media screen and (min-width: 450px){   /* （屏幕宽度大于等于 450px） */
	.featured__card{
		width: 290px;      /* 设置精选卡片的宽度为 290px */
	}
	
	.new__card{
		width: 390px;
	}
	
	.testimonial__card{
		width: 320px;
	}
}

@media screen and (min-width: 576px){  /* （屏幕宽度大于等于 576px） */
	.search__form{
		width: 500px;  /* 设置搜索的宽度为 500px */
		margin-inline: auto;  /* 将搜索水平居中 */
	}
	
	.login__form{
		width: 400px; /* 设置登录的宽度*/
		justify-self: center; /* 登录水平居中 */
	}
	
	.search__close,
	.login__close{   /* 搜索关闭按钮和登录关闭按钮的宽度为最大内容宽度 */
		width: max-content;
		top: 4rem;
		left: 0;       /* 将搜索关闭按钮和登录关闭按钮定位在顶部4rem并水平居中 */
		right: 0;
		margin-inline: auto;
	}
	
	.home__menu{
		width: 380px;
		margin-inline: auto;   /* 将首页菜单水平居中 */
	}
	
	.home__container,
	.discount__container{   /* 将首页容器和折扣容器设置为网格布局一列 列宽为 420px */
		grid-template-columns: 420px;
		justify-content: center;
	}
	
	.join__form{
		width: 328px;  /* 将关注水平居中 */
		justify-self: center;
	}
	
	.footer__data{    /* 将页脚数据设置为网格布局 三列 列宽为最大内容宽度 */
		grid-template-columns: repeat(3, max-content);
	}
}

@media screen and (min-width: 768px){  /* （屏幕宽度大于等于 768px） */
	.home__container{     /* 将首页容器设置为网格布局，一列，列宽为 580px */
		grid-template-columns: 580px;
	}
	.home__data{
		width: 420px;  
		justify-self: center;    /* 将首页数据水平居中 */
	}
	
	.services__container{    /* 将服务容器设置为网格布局 三列 列宽为最大内容宽度 */
		grid-template-columns: repeat(3, max-content);
		justify-content: center;
		column-gap: 5rem;
	}
	
	.footer__container{
		grid-template-columns: repeat(2, max-content);
		justify-content: space-between;
	}
}

/*  大屏幕设备*/
@media screen and (min-width: 1150px){  /* （屏幕宽度大于等于 1150px) */
	.section{
		padding-block: 7rem 2rem;
	}    /* 设置每个部分的上下内边距 */
	
	.nav{
		height: calc(var(--header-height) + 2rem);
		column-gap: 4rem;   /* 设置导航栏的高度*/
	}
	.nav__link i{
		display: none;   /* 隐藏导航链接中的图标 */
	}
	.nav__link span{
		display: block;     /* 显示导航链接中的文本 */
	}
	.nav__menu{
		width: initial;   /* 设置导航菜单的宽度为初始值 */
		margin-inline: auto 0;       /* 将导航菜单右对齐 */
	}
	.nav__list{
		column-gap: 4rem;
	}
	.nav__link{   /* 设置导航链接的字体粗细 */
		font-weight: var(--font-medium);
	}
	
	.dark-theme .nav__menu{        /* 黑暗模式下 清除导航菜单的阴影效果 */
		box-shadow: none;
	}
	
	.home__data{   
		width: initial;   /* 设置首页数据的宽度为初始值 */
	}
	
	.services__container{
		column-gap: 10rem;
	}
	.services__card i{
		font-size: 3.5rem;
	}
	
	.featured__container{
		padding-top: 2rem;
	}
	.featured__title{    /* 设置精选标题的字体大小为 --h3-font-size */
		font-size: var(--h3-font-size);
	}
	
	.discount__container{   /* 将折扣容器设置为网格布局，两列，列宽分别为 615px 和 500px */
		grid-template-columns: 615px 500px;
		justify-content: space-between; /* 水平两端对齐 */
		align-items: center; /* 居中对齐 */
	}
	.discount__data{
		order: 1;    /* 设置折扣数据的排列顺序为 1 */ 
	}
	.discount__data,
	.discount__title{      /* 折扣数据和折扣标题的文本左对齐 */
		text-align: initial;
	}
	.discount__description{     /* 折扣描述的下外边距为 3.5rem */
		margin-bottom: 3.5rem;
	}
	.discount__img-1,
	.discount__img-2{   /* 折扣图片的宽度为 300px */
		width: 300px;
	}
	
	.new__container{    /* 设置新书的上内边距为 2rem */
		padding-top: 2rem;
	}
	.new__card{
		padding: 1.5rem; /* 内边距 */
	}
	.new__img{
		width: 120px;  /* 新书图片的宽度 */
	}
	.new__title{  /* 标题的字体大小 */
		font-size: var(--h3-font-size);
	}
	
	.join__bg{  /* 关注的 背景图片的位置 */
		object-position: 0 -5rem;
	}
	
	.testimonial__container{
		padding-top: 2rem;
	}
	.testimonial__card{
		padding-inline: 2rem;
	}
	.testimonial__title{
		font-size: var(--h3-font-size);
	}
	.testimonial__description{
		font-size: var(--normal-font-size);
	}
	
	.footer{  /* 设置页脚的上下内边距 */
		padding-block: 6rem 3rem;
	}
	.footer__data{  /* 页脚数据设置为网格布局 四列 列宽为最大内容宽度 */
		grid-template-columns: repeat(4, max-content);
		column-gap: 4.5rem;    /* 设置页脚数据列之间的间距为 4.5rem */
	}
	.footer__logo,
	.footer__title{  /* 页脚 logo 和页脚标题的字体大小 */
		font-size: var(--h2-font-size);
		margin-bottom: 1.5rem;  /* 页脚 logo 和页脚标题的下外边距 */
	}
	.footer__links{   /* 页脚网格元素之间的垂直间距 */
		row-gap: 1rem;
	}
	.footer__social{   /* 页脚社交图标之间的水平间距 */
		column-gap: 1.5rem;
	}
	.footer__social-link{ 
		font-size: 1.5rem;
	}
	.footer__copy{
		margin-top: 7.5rem;    /* 设置页脚版权信息的上外边距 */
	}
	
	.scrollup{
		right: 3rem;
	}
	.show-scroll{
		bottom: 3rem;
	}
}

@media screen and (min-width: 1220px){ /* 超大屏幕 或者电脑端全屏（屏幕宽度大于等于 1220px） */
	.container{
		margin-inline: auto; /* 水平居中 */
	}
	
	.home__container{  /* 网格布局两列 列宽分别为 435px 和 745px */
		grid-template-columns: 435px 745px;
		align-items: center;
		padding-block: 7rem 2rem;
	}
	.home__data{  /* 首页数据的文本左对齐 */
		text-align: initial;
	}
	.home__description{  /* 首页描述的下外边距 */
		margin-bottom: 4rem;
	}
	.home__article,
	.home__img{  /* 首页文章和图片的宽度 */
		width: 290px;
	}
}


/* 终于完成css部分了呜呜呜 css我不是很厉害 但7788都会点 
最复杂的就是css 做的我都快崩溃了 但受益良多学了很多新东西 */

/* 上半部分还不是那么熟悉 基本每行都有做一点注释  下半部分的话熟练多了 
就挑一些自己记不住的 或者要做备忘才写了一些注释 */

/* 能完成CSS主要感谢几位老师  我的恩师谢文广 谢老师 
其次就是几位ai老师了 豆包老师  chatGPT老师  deepseek老师  我向您们表达真挚的感谢 
也非常感谢B站大学那些优秀up毫不吝啬的教学*/