<style>
		body {
			margin: 0;
			padding: 0;
			font-family: SimSun;
			font-size: 16px;  }
		header {
			background-color: #00BFFF;
			color: #fff;
			padding: 10px 10px;
			text-align: center;
			font-size: 24px;  }
		nav {
			background-color: #f2f2f2;
			padding: 10px;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;  }
		nav a {
			display: block;
			padding: 10px 20px;
			margin: 10px;
			background-color: #fff;
			color: #333;
			text-decoration: none;
			border-radius: 5px;
			box-shadow: 0 0 5px rgba(0,0,0,.2);
			transition: all .3s;  }
		nav a:hover {
			background-color: #00BFFF;
			color: #fff;  }
		section {
			padding: 30px 10px;
			margin: 0 auto;
			max-width: 1200px;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;  }
		section h2 {
			font-size: 24px;
			margin-bottom: 20px;}
		section .card {
                                                transition: all 0.4s ease;
                                                transform-origin: center;
			padding: 10px;
			margin: 10px;
			border-radius: 5px; 
			box-shadow: 0 0 5px rgba(100,200,250,.4);
                                                width: calc(45% - 20px); 
                                                overflow: auto;}
                                            .card:hover {
                                              animation: shake 0.5s ease-in-out;
                                              transform: scale(1.05); }
                                             @keyframes shake {
                                             0%, 100% { transform: translateX(0) rotate(0deg); }
                                             20% { transform: translateX(-5px) rotate(-2deg); }
                                             40% { transform: translateX(5px) rotate(2deg); }
                                             60% { transform: translateX(-3px) rotate(-1deg); }
                                             80% { transform: translateX(3px) rotate(1deg); }
                                             }
		section .card2 {
                                                  opacity: 0;
                                                  transform: translateY(160px); 
                                                  animation: slideFadeIn 8.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
			padding: 10px;
			margin: 10px;
			border-radius: 5px; 
font-size: 14px;
			box-shadow: 0 0 10px rgba(0,100,255,.2);
                                                width: calc(90% - 20px); 
                                                overflow: auto;}
@keyframes slideFadeIn {
  0% {
    opacity: 0;
    transform: translateY(160px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

		section .card3 {
                                               display: flex; flex-direction: column; text-align: center;
			padding: 10px;
			margin: 10px auto;
			border-radius: 5px; 
			box-shadow: 0 0 5px rgba(100,200,250,.4);
                                                width: calc(90% - 20px); 
                                                height: 40px; overflow: clip;}
                              
		section .card h3 {
			font-size: 18px; text-align: center;
			margin-top: 5px; margin-bottom: 10px;  }
		section .card2 h3 {
			font-size: 18px; text-align: center;
			margin-top: 5px; margin-bottom: 10px;  }
		section .card p {
			font-size: 14px;
			margin-bottom: 20px;  }
		footer {
			background-color: #00BFFF;
			color: #fff;
			padding: 10px 5px;
			text-align: center; }
		@media only screen and (max-width: 768px)
                                 {
			header {
				padding: 10px;
				font-size: 16px;  }
			section .card {
				flex-basis: calc(90% - 15px); 
                                                                margin: 10px 0;  }
		}

.dropdown {
  position: relative;
  display: inline-block;  }
.dropdown-content {
  position: absolute;
  z-index: 1;
  display: none;  }
.dropdown:hover .dropdown-content {
  display: block;}
.dropdown-content a {
  display: block;
  color: #333;
  background-color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0,0,0,.2);
  transition: all .3s;  }
.dropdown-content a:hover {
  background-color: #00BFFF;
  color: #fff;  }	

</style>