@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');
h1,h2 {

    color: #fefae0;
    font-family: 'Josefin Sans', sans-serif;
    margin:0;
}
ul,li{
    margin:0;
    padding:0;
    list-style:none;
    display:inline;
}


body {
    color:#333;
    background:#A9b388;
    font-family: 'Josefin Sans', sans-serif;
    margin:0;
}


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

.main-nav {
        background-color:#c4661f;
        color:#fff0e0;
        font-family: 'Josefin Sans', sans-serif;
        padding:20px;
        position:fixed;
        width:100%;
        top:0;
        z-index: 999;
    }

.main-nav a {
            color:#A9b388;
            text-decoration: none;
            padding:auto;
            width:100%;
            margin:20px;
            
}

.main-nav a:hover {
    color:#fefae0 !important;
    text-decoration:underline;
}
.main-nav a:visited {
    color:#4d2f04;
}

.dropdown{
    display:none;
    position:absolute;
    left:435px;
    padding-top:20px;
}
.dropdown li {
    display:block;
    width: 250px;
    background:#c4661f;
    border-top: 1px solid white;
    padding: 10px;
}
.dropdown-link:hover .dropdown {
    display: block;
}
.dropdown-link::after {
    content: "*";
}
.active {
    color:#A9b388 !important;
    text-decoration: underline !important;
}

.main-header {
           
            background-image: url(images/background.jpg);
            background-position:center;
            background-color:#c4661f;
            background-size:cover;
            background-repeat:no-repeat;
            padding:80px;
            text-align:center;
            padding-top: 136px;
}

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

.button {
    background-color:#A9b388;
    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: 15px;
    border-bottom: 10px solid #666;
    Transform: translateY(0px);
    transition-property: all; 
    transition-duration: 300ms;
    opacity: .5;
    animation-name:movingbutton;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: reverse;
}
.button:hover {
    background-color:#c4661f;
    color:#fefae0;
    opacity: 1;
}
.button:active {
    background-color:#c4661f;
    color:#fefae0;
    margin-top:50px;
    border-bottom:none;

}

.main-content img {
    width:50%;
    margin-left:auto;
    margin-right:auto;
    display:block;
    margin-bottom:10px;
}
.main-content img:last-child {
    margin-bottom:0px;
}
.main-content img:first-child {
    display:none;
}
.main-content img:nth-child(3) {
    width:100%;
}

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

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

@keyframes movingbutton {
    0%{transform:translateX(0); background-color:#c4661f; width:300px;}
   25%{transform:translateX(-200px); background-color:#A9b388; width: 400px;} 
   50%{transform:translateX(0); background-color:#c4661f; width:300px;}
   75%{transform:translateX(200px); background-color:#A9b388; width: 400px;}
   100%{transform:translateX(0); background-color:#c4661f; width:300px;}
}