.myLink {
  cursor: pointer;
}



.content {
  animation: fadeAndShake 0.5s ease both;
}

@keyframes fadeAndShake {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }
  25% {
    opacity: 1;
    transform: translateX(10px);
  }
  50% {
    transform: translateX(-10px);
  }
  75% {
    transform: translateX(10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}



.spinner {
  width: 3em;
  height: 3em;
  cursor: not-allowed;
  border-radius: 50%;
  border: 2px solid #444;
  box-shadow: -10px -10px 10px #6359f8, 0px -10px 10px 0px #9c32e2, 10px -10px 10px #f36896, 10px 0 10px #ff0b0b, 10px 10px 10px 0px#ff5500, 0 10px 10px 0px #ff9500, -10px 10px 10px 0px #ffb700;
  animation: rot55 0.7s linear infinite;
}

.spinnerin {
  border: 2px solid #444;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes rot55 {
  to {
    transform: rotate(360deg);
  }
}

  <style>
/*搜索*/
.group {
 display: flex;
 line-height: 28px;
 align-items: center;
 position: relative;
 max-width: 150px;
}

.input {
 width: 100%;
 height: 40px;
 line-height: 28px;
 padding: 0 1rem;
 padding-left: 2.5rem;
 border: 2px solid transparent;
 border-radius: 8px;
 outline: none;
 background-color: #f3f3f4;
 color: #0d0c22;
 transition: .3s ease;
}

.input::placeholder {
 color: #9e9ea7;
}

.input:focus, input:hover {
 outline: none;
 border-color: rgba(234,76,137,0.4);
 background-color: #fff;
 box-shadow: 0 0 0 4px rgb(234 76 137 / 10%);
}

.icon {
 position: absolute;
 left: 1rem;
 fill: #9e9ea7;
 width: 1rem;
 height: 1rem;
}
/*搜索结束*/




/*计算器*/
     .calculator {
  border: 1px solid rgb(179, 179, 179);
  border-radius: 0.375rem;
  width: 190px;
  /*height: 254px;*/
  font-family: Arial, sans-serif;
  margin: 0 auto;
  padding: 10px;
}
.close-button {
  position: absolute;
  top: -4px;
  right: 2px;
  padding: 0px;
  color: red;
  border: none;
  background-color: transparent;
}
.close-button:hover {
  background-color: transparent;
}
.close-button2 {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0px;
  opacity: 0.9;
  border: none;
}
.output {
  border: 1px solid #ccc;
  border-radius: 0.375rem;
  height: 40px;
  margin-bottom: 10px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
  color: #ffff;
}

.result {
  font-size: 20px;
}

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 5px;
}

button {
  border: none;
  border-radius: 0.375rem;
  padding: 10px;
  background-color: #eee;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #ddd;
}

button:active {
  background-color: #ccc;
}

.bg-green {
  background-color: rgba(0, 177, 29, 0.651);
  color: white;
}

.bg-green:hover {
  background-color: rgba(0, 231, 39, 0.651);
  color: white;
}

.bg-red {
  background-color: rgba(223, 4, 4, 0.651);
  color: white;
}

.bg-red:hover {
  background-color: rgba(255, 1, 1, 0.651);
  color: white;
}
/*计算器结束*/

/*播放器*/
.voice-chat-card {
  width: 300px;
  margin: 20px auto;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 2px 2px 10px #ccc;
  padding: 10px;
  background-color: #e8e8e8;
  
  
}

.voice-chat-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
  color: black;
  background-color: #333;
}

.username {
  margin: 0;
  font-size: 18px;
  color: black;
}

.status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: green;
  margin-left: 10px;
}

.voice-chat-card-body {
  padding: 10px;
}

.status-text {
  font-size: 14px;
  margin-bottom: 10px;
}

.audio-container {
  display: flex;
  align-items: center;
}

audio {
  width: 100%;
}
/*播放器结束*/


/*天气*/
.cardm {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 35%;
  left: 0.5%;
}

.cardtq {
  position: absolute;
  width: 250px;
  height: 130px;
  border-radius: 25px;
  background: whitesmoke;
  color: black;
  z-index: 2;
  transition: .4s ease-in-out;
}

.weather {
  position: relative;
  margin: 1em;
}

.main {
  font-size: 2em;
  position: relative;
  top: -3em;
  left: 4.3em;
}

.mainsub {
  position: relative;
  top: -10.2em;
  left: 14em;
  font-size: 0.6em;
}

.card2 {
  position: absolute;
  display: flex;
  flex-direction: row;
  width: 240px;
  height: 130px;
  border-radius: 35px;
  background: white;
  z-index: -1;
  transition: .4s ease-in-out;
}

.cardtq:hover {
  background-color: #FFE87C;
  cursor: pointer;
}

.cardtq:hover + .card2 {
  height: 300px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.cardtq:hover + .card2 .lower {
  top: 20.2em;
}

.upper {
  display: flex;
  flex-direction: row;
  position: relative;
  color: black;
  left: 1.8em;
  top: 0.5em;
  gap: 4em;
}

.humiditytext {
  position: relative;
  left: 3.6em;
  top: 2.7em;
  font-size: 0.6em;
}

.airtext {
  position: relative;
  left: 3.8em;
  top: 2.7em;
  font-size: 0.6em;
}

.lower {
  display: flex;
  flex-direction: row;
  position: absolute;
  text-align: center;
  color: black;
  left: 3em;
  top: 1em;
  margin-top: 0.7em;
  font-size: 0.7em;
  transition: .4s ease-in-out;
}

.aqi {
  margin-right: 3.25em;
}

.realfeel {
  margin-right: 1.8em;
}

.card3 {
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 240px;
  height: 30px;
  top: 4.7em;
  left: -2.4em;
  font-size: 1.24em;
  border-bottom-left-radius: 35px;
  border-bottom-right-radius: 35px;
  background: limegreen;
  transition: .4s ease-in-out;
}


.calculator,
.voice-chat-card,
.cardtxt {
  position: absolute;
 cursor: move;
}




.cardtxt {
  font-family: monospace;
  
  width: 300px;
  height: 260px;
  background: #292828da;
  border: 2px solid #000;
  border-radius: 15px;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px;
}

.dots {
  display: flex;
  justify-content: last baseline;
}

.dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
}

.dot-1 {
  background-color: rgb(0, 132, 255);
}

.dot-2 {
  background-color: rgb(230, 0, 255);
}

.dot-3 {
  background-color: rgb(0, 255, 89);
}

.top p {
  font-size: 20px;
  font-weight: bold;
}

.dot , .top p {
  margin: 5px;
}

.g-color {
  color: darkgreen;
}



.code {
  font-size: 15px;
}

.red {
  color: rgb(210, 63, 52);
}

.violet {
  color: rgb(181, 40, 203);
}

.blue {
  color: rgb(91, 131, 223);
}

.orange {
  color: rgb(195, 128, 3);
}

.white {
  color: rgb(163, 163, 163);
}

.space-4 {
  margin-left: 35px;
}

.space-4x2 {
  margin-left: 70px;
}

/*编辑器*/
.bottom1 {
 
  outline: none;
  overflow-y: auto;
  padding: 0.5em;
  font-size: 1.2em;
  margin-top: 10px;
  padding: 0 25px;
  height: 160px;
  color: red;
}


.yellow {
  color: yellow;
}

.blue {
  color: blue;
}

.green {
  color: green;
}

.purple {
  color: purple;
}

.orange {
  color: orange;
}


@keyframes fade-in {
    0% { opacity: 0; transform: translateY(-50px); }
    100% { opacity: 1; transform: translateY(0); }
}
#image-container {
display: none;
position: absolute;
bottom: 15%;

width: 200px; /* Set the width of the element */
margin: 0 auto; /* Center the element horizontally */
animation: fade-in 3s;
border-radius: 20px;
border: 2px solid #ccc;


#myDiv {
  position: fixed;
  right: 0;
  bottom: 0;
  animation: shake 0.5s ease-in-out;
}

@media only screen and (max-width: 600px) {
  #myDiv {
    display: none;
  }
}