@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;600&display=swap');

body {
     color:#333;
    background: #b4d3b5;
    font-family: 'oswald', serif;
    text-shadow: 0px 5px 8px rgba(255, 255, 255, 0.765);
    margin:0;
}
 h1, h2 {
     color: white;
     font-family: 'oswald', serif;
     text-shadow: 0px 5px 8px rgba(255, 255, 255, 0.765);
     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: #275a11;
         padding:20px;
         position:fixed;
         width:100%;
         top:0;
         z-index: 999;
         color: white;

     }

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

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

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

    .active {
        color: rgb(191, 245, 141) !important;
    }

     .main-header {
         background-color: #15360d;
         background-size: cover;
         padding:80px;
         text-align:center;
         padding-top:138px;
        
     }

    .main-content { 
      background-color: white;
      border-width: 2px;
      border-style: solid;
      border-color: #0b7143;
      border-radius: 20px;
      box-shadow: 5px 5px 10px rgba(0,0,0,.5) ;
      width:600px;
      margin-top:50px;
      margin-left:auto;
      margin-right:auto;
      padding:50px;
      text-align:left;
      

 
    }
.button {
    background-color:#666;
    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: background-color;
    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: rgb(38, 87, 28);
    color: black;
    opacity:1;
}
.button:active {
    background:rgb(105, 167, 28);
    color:white;
    margin-top:50px;
    border-bottom:none;
    transform:translateY(10px);
}
.main-content img {
    width:80%;
    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: popupheaders;
    animation-duration: 1s;
}

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


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

@keyframes moving-button {
    0% {translate:transformX(0); background-color:rgb(215, 100, 33);width:300px;} 
    25% {transform:translateX(-200px); background-color:rgb(199, 178, 19);width:400px;} 
    50% {translate:transformX(0); background-color:rgb(81, 184, 33);width:300px;} 
    75% {transform:translateX(200px); background-color:rgb(66, 187, 169);width:400px;} 
    100% {transform:translateX(0); background-color:rgb(186, 83, 179);width:300px;}

}