/* 导入Roboto字体，用于页面主体文本 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
/* 导入Poppins字体，用于按钮文本 */
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

/* 全局样式重置，设置所有元素的盒模型为border-box */
* {
  box-sizing: border-box; /* 确保元素的宽高包括内边距和边框 */
}

/* 页面主体样式 */
body {
  background-color: #fafafa; /* 设置背景颜色为浅灰色 */
  font-family: 'Roboto', sans-serif; /* 使用Roboto字体 */
  display: flex; /* 使用Flex布局 */
  flex-direction: column; /* 垂直排列子元素 */
  align-items: center; /* 水平居中对齐 */
  justify-content: center; /* 垂直居中对齐 */
  height: 100vh; /* 高度占满整个视口 */
  overflow: hidden; /* 隐藏超出视口的内容，防止滚动条出现 */
}

/* 魔术按钮样式 */
.magic {
  background-color: #f9ca24; /* 按钮背景颜色为黄色 */
  color: #fff; /* 按钮文本颜色为白色 */
  font-family: 'Poppins', sans-serif; /* 使用Poppins字体 */
  border: 0; /* 移除默认边框 */
  border-radius: 3px; /* 设置边框圆角 */
  font-size: 16px; /* 设置字体大小 */
  padding: 12px 20px; /* 设置内边距 */
  cursor: pointer; /* 鼠标悬停时显示指针 */
  position: fixed; /* 固定定位，始终显示在页面顶部 */
  top: 20px; /* 距离页面顶部20px */
  letter-spacing: 1px; /* 设置字间距 */
  box-shadow: 0 3px rgba(249, 202, 36, 0.5); /* 添加阴影效果 */
  z-index: 100; /* 设置堆叠顺序，确保按钮在最上层 */
}

/* 移除按钮获得焦点时的默认轮廓 */
.magic:focus {
  outline: none;
}

/* 按钮点击时的样式变化 */
.magic:active {
  box-shadow: none; /* 移除阴影 */
  transform: translateY(2px); /* 向下移动2px，模拟按下效果 */
}

/* 盒子容器样式 */
.boxes {
  display: flex; /* 使用Flex布局 */
  flex-wrap: wrap; /* 允许子元素换行 */
  justify-content: space-around; /* 均匀分布子元素 */
  height: 500px;
  width: 500px;
  position: relative;
  transition: 0.4s ease; /* 添加平滑过渡效果 */
}

/* 盒子容器放大时的样式 */
.boxes.big {
  width: 600px;
  height: 600px;
}

/* 盒子容器放大时，内部小盒子的样式变化 */
.boxes.big .box {
  transform: rotateZ(360deg); /* 360度旋转效果 */
}

/* 小盒子样式 */
.box {
  background-image: url('https://media.giphy.com/media/EZqwsBSPlvSda/giphy.gif'); /* 设置背景图片为GIF动画 */
  background-repeat: no-repeat; /* 不重复背景图片 */
  background-size: 500px 500px; /* 设置背景图片大小 */
  position: relative;
  height: 125px;
  width: 125px;
  transition: 0.4s ease; /* 添加平滑过渡效果 */
}

/* 小盒子的伪元素，用于创建3D效果的右侧面 */
.box::after {
  content: ''; /* 伪元素必须设置content属性 */
  background-color: #f6e58d; /* 右侧面颜色 */
  position: absolute;
  top: 8px;
  right: -15px;
  height: 100%;
  width: 15px;
  transform: skewY(45deg); /* 倾斜45度，创建3D效果 */
}

/* 小盒子的伪元素，用于创建3D效果的底面 */
.box::before {
  content: '';
  background-color: #f9ca24; /* 底面颜色 */
  position: absolute;
  bottom: -15px;
  left: 8px;
  height: 15px;
  width: 100%;
  transform: skewX(45deg); /* 倾斜45度，创建3D效果 */
}