body{
	background-color:#DBDBDB;
	color:#000000;
	font-size:19px;
	text-align:left;
    background-image: url(deco_pattern.jpg);
    background-repeat:repeat;
    background-size:auto;
}

h1{
    text-align: center;
    font-family: 'Dancing Script', cursive;
}

a:link{
    color:#000000;
}

a:visited{
    color:#000000;
}

img{
    float:right;
    margin:0px 20px 20px 20px;
    display:block;
    opacity:0;
    width:400px;
    height:auto;
    margin-top:20px;
}

.box{
    background-color:#ffffff;
    margin-left:10%;
    margin-right:10%;
    padding:20px;
    margin-top:20px;
    opacity:0;
    display:inline-block;
    border-radius:10px;
    animation: fadeIn 2s ease forwards;
    clear:both;
}

.text{
    font-family: 'Old Standard TT', serif;
    margin:20px;
    opacity:0;
    animation: fadeIn 2s ease forwards;
}


#parker1{
    animation: fadeIn 2s ease forwards;
    margin-top:0px;
    display:inline-block;
}

#manhattan{
    animation: fadeIn 2s ease forwards;
    
}

#round_table{
    animation: fadeIn 2s ease forwards;
    animation-delay:10.5s;
}

#parker_campbell{
    animation: fadeIn 2s ease forwards;
    animation-delay:15.5s;
}

#parker2{
    animation: fadeIn 2s ease forwards;
    animation-delay:20.5s;
}

#box1{
    display:inline-block;
}

#box2{
    animation-delay:5s;
}

#box3{
    animation-delay:10s;
}

#box4{
    animation-delay:15s;
}

#box5{
    animation-delay:20s;
}

/*Media Query*/

@media screen and (max-width:500px) {
  .box{
    width:300px;
    margin-left:2%;
    margin-right:2%;
  }

  img{
    float:none;
    margin-left:17%;
    width:200px;
  }

  .text{
    font-size:21px;
  }
}

/*Text Animations*/

#text1{
    animation-delay:1s; 
}

#text2{
    animation-delay:1.5s;
}

#text3{
    animation-delay:2s;
}

#manhattan{
    animation-delay:5.5s;
}

#text4{
    animation-delay:5.5s; 
}

#text5{
    animation-delay:6s;
}

#text6{
    animation-delay:6.5s;
}

#text7{
    animation-delay:7s;
}

#text8{
    animation-delay:10.5s; 
}

#text9{
    animation-delay:11s;
}

#text10{
    animation-delay:11.5s;
}

#text11{
    animation-delay:12s;
}

#text12{
    animation-delay:12.5s; 
}

#text13{
    animation-delay:13s;
}

#text14{
    animation-delay:13.5s;
}

#text15{
    animation-delay:14s;
}

#text16{
    animation-delay:14.5s;
}

#text17{
    animation-delay:16s;
}

#text18{
    animation-delay:16.5s;
}

#text19{
    animation-delay:17s;
}

#text20{
    animation-delay:17.5s; 
}

#text21{
    animation-delay:18s;
}

#text22{
    animation-delay:18.5s;
}

#text23{
    animation-delay:19s;
}

#text24{
    animation-delay:21s;
}

#text25{
    animation-delay:21.5s;
    font-size:17px;
    font-family: 'Special Elite', serif;
    margin-right:30px;
    margin-left:30px;
}

#text26{
    animation-delay:22s;
}

#text27{
    animation-delay:22.5s;
}

#text28{
    text-align:center;
    animation-delay:23s;
    background-color:#ffffff;
    padding:10px;
    width:30%;
    margin:auto;
    border-radius:10px;
    margin-top:20px;
}

@keyframes fadeIn{
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}