body {
background-color:#4E4226;
}
#container {
position:relative;
height:700px;
width:500px;
margin:50px auto;
overflow:hidden;
border:4px solid #5C090A;
background:#4E4226 url('https://webkit.org/blog-files/leaves/images/backgroundLeaves.jpg') no-repeat top left;
}
#leafContainer {
position:absolute;
width:100%;
height:100%;
}
#message {
position:absolute;
top:160px;
width:100%;
height:300px;
background:transparent url('https://webkit.org/blog-files/leaves/images/textBackground.png') repeat-x center;
color:#5C090A;
font-size:220%;
font-family:'Georgia';
text-align:center;
padding:20px 10px;
box-sizing:border-box;
background-size:100% 100%;
z-index:1;
}
p {
margin:80px 15px;
}
a {
color:#5C090A;
text-decoration:none;
}
em {
font-weight:bold;
font-style:normal;
}
.phone {
font-size:150%;
vertical-align:middle;
}
#leafContainer>div {
position:absolute;
width:100px;
height:100px;
animation-iteration-count:infinite,infinite;
animation-direction:normal,normal;
animation-timing-function:linear,ease-in;
}
#leafContainer>div>img {
position:absolute;
width:100px;
height:100px;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-timing-function:ease-in-out;
transform-origin:50% -100%;
}
@keyframes fade {
0% {
opacity:1;
}
90% {
opacity:0.7;
}
100% {
opacity:0;
}
}@keyframes drop {
0% {
transform:translate(0px,-50px);
}
100% {
transform:translate(0px,650px);
}
}@keyframes clockwiseSpin {
0% {
transform:rotate(-50deg);
}
100% {
transform:rotate(50deg);
}
}@keyframes counterclockwiseSpinAndFlip {
0% {
transform:scale(-1,1) rotate(50deg);
}
100% {
transform:scale(-1,1) rotate(-50deg);
}
}