<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 h1 {
			font-size: 22px; text-align: center;
			margin-bottom: 20px;}
		section h2 {
			font-size: 20px; text-align: center;
			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); }
                                               .text-content {
                                               line-height: 1.5;
                                               display: -webkit-box;
                                               -webkit-line-clamp: 1;
                                               -webkit-box-orient: vertical;
                                               overflow: hidden; }
                                               .toggle-btn {
                                               color:#0066cc;
                                               font-size:16px;
                                               cursor:pointer;
                                               margin-top:4px; }
                                               .toggle-btn:active + .text-content,
                                               .text-content:active {
                                               -webkit-line-clamp: unset; }  
                            
		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>