@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
body{
    color: #333;
    background: #89c4f4;
    font-family: 'Raleway', serif;
    margin:0;
}

h1, h2{
color: #FFFFFF;
font-family: 'Archivo Black';
text-shadow: 0px 5px 8px rgba(14,12,0,.5);
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: #59abe3;
    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: #666;
}

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

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

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

.dropdown-link::after {
    content: "<3";
    color: yellow;
    font-weight: bold;
}

.active{
    color: yellow!important;
    text-decoration: underline !important;
}



.main-header{
    background-image: url(images/finalboutwhite.jpg);
    background-size: cover;
    background-position: 0px 300px;
    padding:80px;
    text-align:center;
    padding-top: 138px;
    
   
}

.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 auto;
    padding:  25px 50px;
    text-align: left; 

}
.button {
    background-color: grey;
    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: green;
    color: black;
    opacity:1;
}
.button:active {
    background: purple;
    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: 1s;
    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:red; width:400px; }
    50% {transform:translateX(0); background-color:#666; width:300px;}
    75% {transform:translateX(200px); background-color:blue; width:400px;}
    100% {transform:translateX(0); background-color:#666; width:300px;}
}