@import url('https://fonts.googleapis.com/css2?family=Neuton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rozha+One&display=swap');
.main-nav{ background-color: rgb(156, 60, 0); color: rgb(210, 251, 255);padding: 20px;position: 20px;width: 100%;top: 0; z-index: 999;}
.main-nav a{ color: rgb(178, 247, 255); text-decoration: none;margin-right: 20px; }
.main-nav a:hover{ color: aquamarine !important; text text-decoration: underline;}
.main-nav a:visited{ color: rgb(84, 43, 0); }
.active{ color: rgb(19, 149, 255) !important; text-decoration: underline !important;}
.main-header{ background-image: url(images/thurstonpattern2.jpg);background-size:cover; background-position: center top;background-color: rgb(228, 228, 121);padding: 80px;text-align: center;padding-top: 138px;}
.main-content{ background-color: #ffffff;border-width: 2px;border-style: solid;border-color:#666;border-radius: 20px;box-shadow: 0px 5px 8px rgb(0,0,0,.5);width: 600px;margin: 100px auto;padding: 20px 50px;text-align: left;}
 h1, h2{ color:#ffffff; font-family: 'Rozha One', serif; text-shadow:0px 5px 8px rgba(210, 251, 255, 0.5); letter-spacing: 7px; text-transform: uppercase;}
ul, li{margin: 0;padding: 0;list-style: none; display: inline;}
.dropdown{ display: none; position: absolute; left:214px; padding-top: 20px;}
.dropdown li{ display: block; width: 200px; background: aqua; border-top: 1px solid white; padding: 10px;}
.dropdown-link:hover .dropdown{ display: block;}
.dropdown-link::after{content:"(>.<)"; color: #00c8ff; font-weight: bolder; letter-spacing: 2px;}
 body{color: #333; background: s#bdfffd; font-family: 'Neuton', serif;margin: 0;}
 p {font-size: 16px; font-weight: normal; line-height: 1.5;}
 .button{background-color: rgb(0, 255, 247); color: white;font-size: 24px; 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: 5px; border-radius: 20px 0px 20px 0px; border-bottom: 10px solid rgb(17, 36, 29); transform: translateY(0); 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: #ff8c00; color: black; opacity: 1; width:300px;}
.button:active{ background-color: #00c8ff; color: #666; transform: translateY(10px); border-bottom: 0px;}
.main-content img{width: 80%; margin-left: auto; margin-right: auto; display: block; margin-bottom: 35px;}
.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: 500ms;}
.main-header h2{ animation-name: popinheader ; animation-duration: 500ms; animation-delay: 500ms; 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(0);background-color: #666; width: 300px;} 25%{transform: translateX(-200PX); background-color: aqua; width: 400px;}
 50%{transform: translateX(0); background-color: #666; width: 300px;} 75%{transform: translateX(200px); background-color: #ff8c00; width: 400px;} 100%{transform: translateX(0); background-color: #666; width: 300px;}}