@import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&family=Mochiy+Pop+P+One&family=Montserrat&family=Oswald:wght@300&family=Varela+Round&family=ZCOOL+KuaiLe&display=swap');

.mybody {
	background: #2B3246;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  font-family: 'Varela Round', sans-serif;
	  font-size: 1.5em;
}

.center {
  position: fixed;
  top: 6%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1000;
}

.success {
  border-radius: 5px;
  min-width: 220px;
  min-height: 40px;
  text-align: left;
  display: none;
  align-items: center;
  padding: 10px;
  background-color: #2B3246;
  cursor:pointer;
  box-shadow:  9px 9px 18px #262c3e,
    -9px -9px 18px #30384e;
  color: #0ad406;
  margin-top: 60px;
  z-index: 1000!important;;
}
.success:hover{
  background-color: rgba(147, 209, 117, 0.50);
  transition:0.5s;
}

.color {
  animation: color 2s linear infinite;
}


.info {
  border-radius: 5px;
  width: 220px;
  height: 30px;
  text-align: left;
  display: none;
  align-items: center;
  padding: 10px;
  background-color: #2B3246;
  cursor:pointer;
  box-shadow:  9px 9px 18px #262c3e,
    -9px -9px 18px #30384e;
  color: rgb(82, 125, 243);
  margin-top: 60px;
  z-index: 1000!important;
}
.spin {
  animation: spin 2s linear infinite;
}

.info:hover
{
  background-color: rgba(82, 125, 243, 0.50);
  transition:0.5s;
}

.warning {
  border-radius: 5px;
  min-width: 280px;
  min-height: 40px;
  text-align: left;
  display: none;
  align-items: center;
  padding: 5px;
  background-color: #2B3246;
  cursor:pointer;
  box-shadow:  9px 9px 18px #262c3e,
    -9px -9px 18px #30384e;
  color: rgb(247, 149, 72);
  margin-top: 60px;
  z-index: 1000!important;;
}

.warning:hover{
  background-color: rgba(247, 149, 73, 0.50);
  transition:0.5s;
}


.rotate {
  animation: rotate 2s linear infinite;
}
.error {
  position: relative;
  border-radius: 5px;
  min-width: 220px;
  min-height: 40px;
  text-align: left;
  display: none;
  align-items: center;
  padding: 10px;
  background-color: #2B3246;
  cursor:pointer;
  box-shadow:  9px 9px 18px #262c3e,
    -9px -9px 18px #30384e;
  color: rgb(255, 10, 1);
  margin-top: 60px;
  z-index: 1000!important;;
}

.error:hover
{
  background-color: rgba(255, 10, 1, 0.33);
  transition:0.5s;
}


.shine {
  animation: shine 2s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes color {
  50% {
   color: #2B3246;
  }
  100% {
    color: #0ad406;
  }
}

@keyframes rotate {
 0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(90deg);
  }
  40% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(-90deg);
  }
}

@keyframes shine {
  0% {
   color: #2B3246;
  }
  50% {
    text-shadow:
      0 0 5px #fff,
      0 0 10px #fff,
      0 0 40px red,
      0 0 60px red,
      0 0 80px red;
  }
}

/* 媒体查询：当屏幕宽度小于或等于600px时 */
@media screen and (max-width: 600px) {
    .info {
        border-radius: 5px;
        width: 220px;
        height: 30px;
        text-align: left;
        display: none;
        align-items: center;
        padding: 10px;
        background-color: #2B3246;
        cursor:pointer;
        box-shadow:  9px 9px 18px #262c3e,
          -9px -9px 18px #30384e;
        color: rgb(82, 125, 243);
        margin-top: 160px;
        z-index: 1000!important;;
    }

    .warning {
        border-radius: 5px;
        min-width: 280px;
        min-height: 40px;
        text-align: left;
        display: none;
        align-items: center;
        padding: 5px;
        background-color: #2B3246;
        cursor:pointer;
        box-shadow:  9px 9px 18px #262c3e,
          -9px -9px 18px #30384e;
        color: rgb(247, 149, 72);
        margin-top: 160px;
        z-index: 1000!important;;
      }

      .error {
        position: relative;
        border-radius: 5px;
        min-width: 220px;
        min-height: 40px;
        text-align: left;
        display: none;
        align-items: center;
        padding: 10px;
        background-color: #2B3246;
        cursor:pointer;
        box-shadow:  9px 9px 18px #262c3e,
          -9px -9px 18px #30384e;
        color: rgb(255, 10, 1);
        margin-top: 160px;
        z-index: 1000!important;;
      }

      .success {
        border-radius: 5px;
        min-width: 220px;
        min-height: 40px;
        text-align: left;
        display: none;
        align-items: center;
        padding: 10px;
        background-color: #2B3246;
        cursor:pointer;
        box-shadow:  9px 9px 18px #262c3e,
          -9px -9px 18px #30384e;
        color: #0ad406;
        margin-top: 160px;
        z-index: 1000!important;;
      }
  }