/* 每日英语往期精选历史一句 */
@font-face {
  font-family: "思源宋体 Bold";
  font-weight: 700;
  src: url("//at.alicdn.com/wf/webfont/AyXzEUyQlBUv/SUTtQqGiFip6.woff2")
      format("woff2"),
    url("//at.alicdn.com/wf/webfont/AyXzEUyQlBUv/fe78PXOfJsKI.woff")
      format("woff");
  font-display: swap;
}

/* 历史一句查看全部1234567890-今日返回首页每英语Github */
@font-face {
  font-family: "思源宋体 Regular";
  font-weight: 400;
  src: url("//at.alicdn.com/wf/webfont/AyXzEUyQlBUv/WwOU2hwkkjLR.woff2")
      format("woff2"),
    url("//at.alicdn.com/wf/webfont/AyXzEUyQlBUv/XzI5O0vRfLfm.woff")
      format("woff");
  font-display: swap;
}

* {
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 2vw 4vw;
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.header {
  font-family: "思源宋体 Bold";
  font-weight: 700;
}

.banner {
  position: relative;
  margin-bottom: 20px;
}

.banner img {
  border-radius: 2vw;
  width: 100%;
  aspect-ratio: 1080 / 1412;
  object-fit: cover;
}

.loading-animation {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto auto;
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.image-wrapper {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 100%;
}

img {
  filter: blur(5px);
  transition: filter 0.5s ease-in-out;
}

.banner .superscript {
  position: absolute;
  right: 4vw;
  top: 1vw;
  padding: 0.7vw 1.5vw;
  border-radius: 3vw;
  color: #fff;
  font-family: "思源宋体 Regular";
  font-size: 3vw;
  line-height: 4vw;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

.banner .play {
  position: absolute;
  bottom: 4.5vw;
  right: 4vw;
  width: 5.4vw;
  height: 5.4vw;
  padding: 1.5vw 1.5vw;
  border-radius: 10vw;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  cursor: pointer;
  display: flex;
  align-items: center;
}

.banner .play svg {
  fill: #fff;
  transition: 0.2s;
}

.banner .play:hover > svg {
  fill: #303133;
}

.title {
  display: flex;
  align-items: baseline;
}

.title h2 {
  font-family: "思源宋体 Bold";
}

.title a {
  font-family: "思源宋体 Regular";
  color: #86909c;
  text-decoration: none;
  border-bottom: 0 #fff solid;
  margin-left: auto;
  transition: 0.2s;
}

.title a:hover {
  border-bottom: 1px solid;
}

.waterfall .masonry {
  width: 100%;
  margin: auto;
  columns: 2;
  column-gap: 20px;
}

.waterfall .masonry .item {
  width: 100%;
  break-inside: avoid;
  margin-bottom: 30px;
}

.waterfall .masonry .item img {
  border-radius: 1.4vw;
  width: 100%;
  aspect-ratio: 1080 / 1412;
  object-fit: cover;
}

footer {
  text-align: center;
  font-family: "思源宋体 Regular";
  padding-top: 25px;
  padding-bottom: 30px;
}

footer svg {
  fill: #303133;
  margin-bottom: -4px;
}