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


body{
    color: #333;
    background: #EEDBD9;
    font-family: serif;
    margin:0;

   
}

h1, h2 {
    color: #6B190E;
    font-family: 'Shrikhand', cursive;
    text-shadow: 0px 5px 8px rgba(64, 21, 102, .2);
    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-header {
    background-image: url(images/hearts.jpg); 
    background-size: cover; 
    background-position: 0px 350px; 
    background-repeat: repeat; 
    height: 100px;
    padding:80px;
    text-align:center;
    padding-top: 138px;
}

.main-nav {background-color: #FE9EAE; 
    color:#6B190E;
    padding:20px;
    position:fixed;
    width:100%;
    top:0;
    z-index:999;
    
}

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

.dropdown li{ 
    display: block;
    width: 200px;
    background: #FE9EAE;
    border-top:1px solid white;
    padding: 10px;

}

.dropdown-link::after{
    content:"+";
    color: red;
    font-weight: bold;


}

.dropdown-link:hover .dropdown {
    display:block;
    position: absolute;
    left: 228px;
}

.main-nav a {
    color:#6B190E; 
    text-decoration: none;
    width:100%;
    margin-right:20px;
}

.main-nav a:hover {
    color: white !important;
    text-decoration: underline;


}

.main-nav a:visited{
    color: #666


}


.active {color:rgb(2, 102, 62)!important; text-decoration: underline !important;}


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

.button {
    background-color: #FE9EAE;
    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: 4px;
    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: #780619;
    opacity:1;
}

.button:active {
    background: black;
    color: White;
    border-bottom:none;
    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{
    display:none;
}

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


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


}

.main-header h2{
    animation-name: popinheader;
    animation-duration:1s;
    animation-delay: .5s;
    opacity: 0; transform: translateY(0px);
    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);width:300px;}
    25%{transform: translateX(-200px);background-color:#71484e;width:400px; }
    50%{transform: translateX(0);width:300px;background-color:#FE9EAE}
    75%{transform: translateX(200px);background-color:#71484e;width: 400px;}
    100%{transform: translateX(0);width:300px;}

}