@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Mochiy+Pop+P+One&display=swap');
		body {
			color: #333;
			background: #5B64AB;
			font-family: 'Bree Serif', serif;
			margin:0;
		}
		
		h1, h2 {
			color: #009CA9;
			font-family: 'Mochiy Pop P One', sans-serif;
			text-shadow: 0px 5px 8px rgba(116,0,169,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;}
		
		.main-nav {background-color:#7701B9; 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:gray;}

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

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

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

		.dropdown-link::after {content: "uwu"; color:yellow; font-weight:bold;}
		
		.active {color:#44B3AB!important; text-decoration: underline !important;}
		
		.main-header {background-image: url(images/space.jpg); background-size: cover; background-position: 0px 33%; background-repeat:no-repeat; padding:80px; text-align:center; padding-top:138px;}
		
		.main-content {background-color:#fff; border-width:2px; border-style:solid; border-color:#5B64AB; border-radius:20px; box-shadow:0px 5px 8px rgba(0,0,0,0.5); width:600px; margin:100px auto; padding:25px 50px; text-align:left;}

		.button {background-color:gray; 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: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:aqua; color:black; opacity:1;}

		.button:active {background:purple; color:white; 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 {width:50%;}

		.main-content img:nth-child(3) {width:50%}

		.main-header h1 {animation-name:wuzpoppin; animation-duration:1s;}

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

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

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