@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap');
body {
			color: #333;
			background-color: black;
			font-family: 'Roboto Condensed', serif;
			margin:0;
		}
		
		h1, h2 {
			color: #000000;
			font-family: 'Roboto Condensed';	
			text-shadow: 0px 5px 8px rgba(255,61,118,.75);
			margin:0;
		}

		ul, li {
		margin:0;
		padding:0;
		list-style: none;
		display: inline;
}
		
		.main-nav {
	 		background-color: deeppink; 
			color: white;
			padding:20px;
			position:fixed;
			width:100%;
			top:0;
			z-index:999;
		}

		.main-nav a {
			color: white;
			text-decoration: none;
			margin-right: 20px;
		}

		.main-nav a:hover {
			color: pink !important;
			text-decoration: underline;
		}

		.main-nav a:visited {
		color: black;

		}

		.dropdown {
			display: none;
			position: absolute;
			left: 212px;
			padding-top: 20px;
		}

		.dropdown li {
			display: block;
			width: 200px;
			background: deeppink;
			border-top: 1px solid white;
			padding: 10px 
		}

		.dropdown-link:hover .dropdown {
			display: block;
	
		}
		
		.dropdown-link::after {
			content: "+";
			color: yellow;
			font-weight: bold;
		}

		.active {
			color: #ABD921 !important;  
			text-decoration: underline !important;
		}

		.main-header {
				background-image: url("images/HK.jpeg");
				background-size: cover;
				background-position: 0px 50%;
				background-repeat: no-repeat;
				background-color: deeppink;
				padding:40px;
				text-align:center;
				padding-top: 138px;
			}

			.main-content {
				background-color: #fff;
				border-width: 2px;
				border-style: solid;
				border-color: #666; 
				border-radius: 20px;
				box-shadow: 0px 10px 10px rgba(219,58,107,.75);
				width: 600px;
				margin: 100px auto; 
				padding: 25px 50px;
				text-align: left;


			}
			p {
				font-size: 16px;
				line-height: 1.5;
			}

			a {
				color: #C715B4;
				
			}
			.button {
				background-color:black;
				color: white;
				font-size: 20px;
				padding:20px;
				margin-top:50px;
				display:block;
				text-align: center;
				width: 300px;
				margin-left: auto;
				margin-right: auto;
				font-weight: bold;
				text-decoration: none;
				text-transform: uppercase;
				letter-spacing: 1px;
				border-radius: 20px;
				border-bottom:10px solid black;
				transform: translateY(0px);
				transition-property: all; 
				transition-duration: 300ms;
				opacity: .5;
				animation-name: moving-button;
				animation-duration: 2s;
				animation-iteration-count: infinite;
				animation-timing-function: ease-in-out;
				animation-direction:  reverse;
				
			}
			.button:hover {
				background-color: pink;
				color: black;
				border-color: mediumvioletred;
				opacity:1;
			}
			.button:active {
				background:purple;
				color:white;
				margin-top:50px;
				border-bottom:0px solid;
				transform: translateY(10px);
			}
			.main-content img {
				width: 50%;
				margin-left: auto;
				margin-right: auto;
				display: block;
				margin-bottom:30px;

			}

			.main-content img:last-child {
				margin-bottom:0;

			}
			.main-content img:first-child {
				display: none;
			}
			.main-content img:nth-child(3) {
				width: 100%;
			}


.main-header h1 {
	animation-name: popinheader;
	animation-duration: 1s;
}
.main-header h2 {
	animation-name: popinheader;
	animation-duration: 1s;
	animation-delay: 1s;
	opacity: 0;
	transform:translateY(50px);
	animation-fill-mode:forwards;
}

@keyframes popinheader {
			
from {opacity: 0; transform:translateY(50px); }
to {opacity: 1; transform:translateY(0); }
	
	
}

@keyframes moving-button {
	  0% {transform:translateX(0); background-color: #666; width:300px;} 
	 25% {transform:translateX(-200px); background-color: deeppink; width:400px;}
  	 50% {transform:translateX(0); background-color: #666; width:300px;}
	 75% {transform:translateX(200px); background-color: deeppink; width:400px;}
	100% {transform:translateX(0); background-color: #666; width:300px;}
	
}