<style>
		body {
			margin: 0;
			padding: 0;
			font-family: SimSun;
			font-size: 16px;  }
		header {
			background-color: #00BFFF;
			color:#fff;
                                                text-shadow: 0 5px 3px rgba(0,0,0,0.2);
			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: 16px; text-align: center;
			margin-bottom: 16px;}
		section h2 {
			font-size: 16px; text-align: center;
			margin-bottom: 16px;}
		section h3 {
			font-size: 16px; text-align: center;
			margin-bottom: 16px;}
		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); }
                                               .card3-details {
                                              margin: 0;
                                              padding: 0;
                                              border: none;}
                                             .card3-summary {
                                              list-style: none;
                                              cursor: default;
                                             padding: 12px 16px;
                                             font-weight: 500;
                                             outline: none;
                                             text-align: center;}
                                             .card3-summary::-webkit-details-marker {
                                             display: none;}
                                            .card3-details[open] .card3-summary {
                                             color: #0066cc;}
                                            .card3-text {
                                            padding: 10px 16px;
                                            line-height: 1.5;
                                            text-align: left;}

		section .card p {
			font-size: 14px;
			margin-bottom: 20px;  }
		section .card2 p {
			font-size: 14px;
			margin-bottom: 20px;  }
		section .card3 p {
			font-size: 14px;
			margin-bottom: 20px;  }

		footer {
			background-color: #00BFFF;
			color: #0066CC;
			padding: 10px 5px;
			font-size: 14px; text-align: center; 
                                                text-shadow: 0 5px 3px rgba(0,0,0,0.2); }

		@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>