* { 
	box-sizing: border-box;
}
html, body {
    min-height:100%;
    
}
body {
    position:relative;
    background-image: linear-gradient(darkgreen, lightgreen); 
    background-repeat:no-repeat; 
    background-size:cover; 
    font-family:verdana, sans-serif; 
    margin:0;
    font-size: 1.3rem;
	text-rendering: optimizeLegibility;
}
main {
    color:white; 
    text-align:center; 
    padding-top:10vh; 
    background-image:url('/images/bg_claw.png'); 
    background-repeat:no-repeat; 
    background-position:bottom right; 
    background-size:auto 45%;
    height:100vh;
    
}
h1 {
    text-transform:uppercase; 
    text-shadow:2px 2px black; 
    color:Chartreuse; 
    letter-spacing:3px; 
    font-family:Georgia, serif;
    
}
@keyframes bear{
    0%   {top:-80vh;}
    90%  {top:2vh;}
    100% {top:0vh;}
}
#bear {
    position:relative;
    animation-name:bear;
    animation-duration:600ms;
    animation-timing-function: ease-out;
}
/* Comic Speech Bubble */
@keyframes bubble {
    0%   {opacity:0; top:-10vh;}
    90%  {opacity:1; top:3vh;}
    100% {opacity:1; top:0vh;}
}
.comic {
    top:-90vh;
    animation-name:bubble;
    animation-duration:200ms;
    animation-delay:1500ms;
    animation-fill-mode: forwards;
    font-family: "Comic Sans MS", "Arial Black", sans-serif;
    display: inline-block;
    color: black;
    background-color: #fff;
    border: 2px solid black;
    padding: 0 20px;
    border-radius: 20px;
    box-shadow: 5px 5px 5px rgba(0,0,0,.5);
    position: relative;
}

.comic:after {
    content: "";
    display: block;
    background-color: #fff;
    border: 2px solid black;
    border-width: 0 2px 2px 0;
    width: 24px;
    height: 24px;
    /* box-shadow: 5px 0 5px rgba(0,0,0,.5); */
    position: absolute;
    top: -15px;
    left: 30px;
    transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    -o-transform: rotate(225deg);
}