p{
  color: aquamarine;
  /*text-align: center;*/
  font-size: 25px;
}

/*背景*/
.backimg{
         background-image: url("../素材/图片/cool.png");
         background-attachment: fixed;
         background-size: 100%;
   }
}
.backimg2{
         background-image: url("../素材/图片/cool2.png");
         background-attachment: fixed;
         background-size: 100%;
   }
}


audio{
  color: yellow;
  text-align: center;
}

/* === removing default button style ===*/
.button {
  margin: 0;
  height: auto;
  background: black;
  padding: 0;
  border: none;
}



/* button styling */
.button {
  --border-right: 6px;
  --text-stroke-color: rgba(255,255,255,0.6);
  --animation-color: #37FF8B;
  --fs-size: 2em;
  letter-spacing: 3px;
  text-decoration: none;
  font-size: var(--fs-size);
  font-family: "Arial";
  position: relative;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px var(--text-stroke-color);
}
/* this is the text, when you hover on button */
.hover-text {
  position: absolute;
  box-sizing: border-box;
  content: attr(data-text);
  color: var(--animation-color);
  width: 0%;
  inset: 0;
  border-right: var(--border-right) solid var(--animation-color);
  overflow: hidden;
  transition: 0.5s;
  -webkit-text-stroke: 1px var(--animation-color);
}
/* hover */
.button:hover .hover-text {
  width: 100%;
  filter: drop-shadow(0 0 23px var(--animation-color))
}



.newtons-cradle {
 --uib-size: 50px;
 --uib-speed: 1.2s;
 --uib-color: #474554;
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 width: var(--uib-size);
 height: var(--uib-size);
}

.newtons-cradle__dot {
 position: relative;
 display: flex;
 align-items: center;
 height: 100%;
 width: 25%;
 transform-origin: center top;
}

.newtons-cradle__dot::after {
 content: '';
 display: block;
 width: 100%;
 height: 25%;
 border-radius: 50%;
 background-color: var(--uib-color);
}

.newtons-cradle__dot:first-child {
 animation: swing var(--uib-speed) linear infinite;
}

.newtons-cradle__dot:last-child {
 animation: swing2 var(--uib-speed) linear infinite;
}

@keyframes swing {
 0% {
  transform: rotate(0deg);
  animation-timing-function: ease-out;
 }

 25% {
  transform: rotate(70deg);
  animation-timing-function: ease-in;
 }

 50% {
  transform: rotate(0deg);
  animation-timing-function: linear;
 }
}

@keyframes swing2 {
 0% {
  transform: rotate(0deg);
  animation-timing-function: linear;
 }

 50% {
  transform: rotate(0deg);
  animation-timing-function: ease-out;
 }

 75% {
  transform: rotate(-70deg);
  animation-timing-function: ease-in;
 }
}

a{
  color:skyblue;
  text-align: center;
  cursor:pointer;
}

.app{
  height: 100px;
  text-align: center;
}

a:HOVER{
  font-size: 25px;

  color:white;
}

img{
  img-size: 10px;
  img-align:center;
}

html,body{
  /* background_color: blue;*/
  font-family: 楷体;
}

h1{
  color: coral;
  text-align: center;
}

h3{
  color:aquamarine;
  text-align: center;
}

.rainbow{
  background-image: linear-gradient(to right, red, orange, yellow, green, paleturquoise, blue, purple);
  -webkit-background-clip: text;
  color: transparent;
  font-size: 30px;
}

div{
  color: tomato;
  text-align: center;
  font-size:30px;
}


textarea{
  width: 400px;
  height: 100px;
  border: 2px green solid;
}

li{
  width:300px;
  padding:5px;
  background-color:orange;
  font-size: 15px;
}

li a{
  float: right;
}