* {
  box-sizing: border-box;
}

body {
  background: #5268F2;
  min-height: 100vh;
  padding: 0;
  margin: 0;
  color: #fff;
  font-family: "微软雅黑", sans-serif;
  text-shadow: #000 1px 1px 5px, #000 -1px -1px 5px;
}

.cat{
  filter:drop-shadow(0 0 5px black);
  height: 1.7rem;
}
.play{
  display: block;
  outline: none;
  border: none;
  padding: 8px 14px;
  background: #414141;
  background-image: -webkit-linear-gradient(top, #bc0505, #bc0505);
  background-image: -moz-linear-gradient(top, #bc0505, #bc0505);
  background-image: -ms-linear-gradient(top, #bc0505, #bc0505);
  background-image: -o-linear-gradient(top, #bc0505, #bc0505);
  background-image: linear-gradient(to bottom, #bc0505, #bc0505);
  /*text-shadow: #000 1px 1px 5px, #000 -1px -1px 5px;
  box-shadow: #000 1px 1px 5px, #000 -1px -1px 5px;*/
  color: #fff;
  text-decoration: none;
  margin: -3rem auto 10px;
  border-radius: 20px;
  width: 3rem;
  padding: 12px 5px;
  font-family: "微软雅黑", sans-serif;
  text-transform: uppercase;
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
  line-height: 0;
  text-shadow: 0 0 black;
}

.gallery {
  position: absolute;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}



.cards {
  position: absolute;
  width: 14rem;
  height: 18rem;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.title {
  line-height: 8rem;
  font-size: 2rem;
  text-align: center;
  vertical-align: middle;
}
.cards li {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 18rem;
  height: 32rem;
  text-align: center;
  line-height: 10rem;
  font-size: 1.6rem;
  border: 5px solid white;
  border-radius: 15px;
  position: absolute;
  top: -4rem;
  left: -2rem;
  background-size: cover;
  box-shadow: #000 1px 1px 5px, #000 -1px -1px 5px;
}
.cards li:nth-of-type(1){background-image: url(img/U1.jpg);}
.cards li:nth-of-type(2){background-image: url(img/U2.jpg);}
.cards li:nth-of-type(3){background-image: url(img/U3.jpg);}
.cards li:nth-of-type(4){background-image: url(img/U4.jpg);}
.cards li:nth-of-type(5){background-image: url(img/U5.jpg);}
.cards li:nth-of-type(6){background-image: url(img/U6.jpg);}
.cards li:nth-of-type(7){background-image: url(img/U7.jpg);}
.cards li:nth-of-type(8){background-image: url(img/U8.jpg);}
.cards li:nth-of-type(9){background-image: url(img/U9.jpg);}
.cards li:nth-of-type(10){background-image: url(img/U10.jpg);}
.cards li:nth-of-type(11){background-image: url(img/U11.jpg);}
.cards li:nth-of-type(12){background-image: url(img/U12.jpg);}
.cards li:nth-of-type(13){background-image: url(img/U13.jpg);}
.cards li:nth-of-type(14){background-image: url(img/U14.jpg);}
.cards li:nth-of-type(15){background-image: url(img/U15.jpg);}
.cards li:nth-of-type(16){background-image: url(img/U16.jpg);}
.cards li:nth-of-type(17){background-image: url(img/U17.jpg);}
.cards li:nth-of-type(18){background-image: url(img/U18.jpg);}
.cards li:nth-of-type(19){background-image: url(img/U19.jpg);}
.cards li:nth-of-type(20){background-image: url(img/U20.jpg);}
.cards li:nth-of-type(21){background-image: url(img/U21.jpg);}
.cards li:nth-of-type(22){background-image: url(img/U22.jpg);}
.cards li:nth-of-type(23){background-image: url(img/U23.jpg);}

li:hover {
  color: #fff;
  transition: color 0.3s ease;
  box-shadow: rgba(255, 255, 255, 0.6) 0px 4px 15px, rgba(0, 0, 0, 0.3) 0px 4px 10px;
  z-index: 10;
  /* Brings the hovered card to the front */
}

.actions {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
}

button {
  display: inline-block;
  outline: none;
  border: none;
  padding: 8px 14px;
  background: #414141;
  background-image: -webkit-linear-gradient(top, #fff, #fff);
  background-image: -moz-linear-gradient(top, #fff, #fff);
  background-image: -ms-linear-gradient(top, #fff, #fff);
  background-image: -o-linear-gradient(top, #fff, #fff);
  background-image: linear-gradient(to bottom, #fff, #fff);
  /*text-shadow: #000 1px 1px 5px, #000 -1px -1px 5px;
  box-shadow: #000 1px 1px 5px, #000 -1px -1px 5px;*/
  color: #555;
  text-decoration: none;
  margin: 0 auto 10px;
  border-radius: 30px;
  padding: 12px 25px;
  font-family: "微软雅黑", sans-serif;
  text-transform: uppercase;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
}
button:hover {
  background: #ff9800;
  background-image: -webkit-linear-gradient(top, #ff9800, #ff9800);
  background-image: -moz-linear-gradient(top, #ff9800, #ff9800);
  background-image: -ms-linear-gradient(top, #ff9800, #ff9800);
  background-image: -o-linear-gradient(top, #ff9800, #ff9800);
  background-image: linear-gradient(to bottom, #ff9800, #ff9800);
  /*text-shadow: 0px 1px 0px #32610e;
  box-shadow: 0px 1px 0px fefefe;*/
  color: #ffffff;
  text-decoration: none;
}

.refresh-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: solid 2px black;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
  filter: drop-shadow(1px 2px 1px rgba(0, 0, 50, 0.7)) drop-shadow(2px 4px 3px rgba(0, 0, 0, 0.5));
}

.refresh-btn:hover {
  background: #0056b3;
}

.instruction {
  position: fixed;
  top: 80px;
  right: 20px;
  padding: 10px 20px;
  font-size: 0.8rem;
}