@charset "utf-8";
/* CSS Document */


  @import url('https://fonts.googleapis.com/css2?family=Gentium+Book+Plus:ital@1&display=swap');
		
		body
		{color: #333333; 
		background: #FFE5EC; 
		font-family: tahoma, arial, sans-serif;
		margin:0;}

		h1,h2
		{color: #FB6F92; 
		font-family: 'Gentium Book Plus', serif;
		text-shadow: 0px 5px 8px rgba(225, 76, 227, 1);
		margin:0;}
		
		ul, li
		{margin:0;
		padding:0;
    	list-style: none;
    	display: inline;}

		p 		
		{font-size:16px;
    	font-weight:normal;
   		line-height: 1.5;} 
		
		nav
		{font-family: tahoma, arial, sans-serif;
		background-color: #FFC2D1;
		color: black;
		padding:20px;
		position:fixed;
		border-width: 2px;
		border-style: solid;
		border-color: #FB6F92;
		border-radius: 20px;
		box-shadow: 0px 5px 8px rgba(255, 179, 198,.5);
		z-index:999;}
		
		.main-nav a
		{color: black;
		text-decoration: none;
		padding:20px;
		margin-right: 20px;}
		
		.main-nav a:hover
		{color:white !important;
		text-decoration:underline;}

		.main-nav
		{color:rebeccapurple;}

		.main-nav a:visited
		{color: rebeccapurple;}

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

		.main-header
		{background-image: url("images/background.jpg");
		background-size: cover;
		background-position: 0px 320px;
    	padding:100px;
    	text-align:center;
    	padding-top: 138px;}
		
		.main-content
		{background-color: #fff;
		border-width: 2px;
		border-style: solid;
		border-color: #FB6F92;
		border-radius: 20px;
		box-shadow: 0px 5px 8px rgba(255, 179, 198,.5);
		width:1100px;
    	margin: 100px auto;
    	padding: 20px 20px;
    	text-align: left;}

		.button
		{background-color:black;
		color:white;
		font-size:24px;
		padding: 20px;
		margin-top:40px;
		display:block;
		text-align:center;
		width:300px;
		margin-left:auto;
		margin-right:auto;
		font-weight:bold;
		text-decoration:none;
		text-transform:uppercase;
		letter-spacing:2px;
		border-radius:20px;
		border-bottom: 10px solid #707070;
		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:#FFC2D1;
		color:#FB6F92;
		border-bottom: 10px solid #FB6F92;
		opacity:1;}

		.button:active
		{background:#FB6F92;
		color:white;
		transform: translateY(10px);
		border-bottom:none;}

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

		.dropdown li
		{display:block;
		width:225px;
		background:#FB6F92;
		border-top:1px solid #FFC2D1;
		padding:10px;}

		.dropdown-link:hover .dropdown
		{display:block;}

		.dropdown-link::after
		{content:"(ง •̀_•́)ง ผ(•̀_•́ผ)";
		color:#FB6F92;
		font-weight:bold;}

		.main-content img
		{width:50%;
		margin-left:auto;
		margin-right:auto;
		display:block;
		margin-bottom:10px;}

		.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:2s;}
		
		.main-header h2
		{animation-name: popinheader;
		animation-duration:2s;
		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(0px);}}

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