body {
    margin: 0 auto;
    padding: 0;
    background-color: #4d2060;
    color: #ffab00;
}

a {
    color: #5ab100;
    text-decoration: none;
    font-weight: bold;
}

header {
    margin: 0 auto;
    padding: 1rem 0;
    perspective: 100px;
    perspective-origin: 50% 100%;
    text-align: center;
    position: static;
    width: 800px;
}
h1 {
    text-align: center;
    font-size: 400%;
    font-family: monospace;
    color: #5ab100;
    background: bottom center url('sunset.svg') no-repeat;
    padding-bottom: 100px;
    vertical-align: top;
    transform: translate3d(0px, 0px, 0px);
    perspective: 200px;
    perspective-origin: 50% 100%;
}

h1:before {
    display: inline-block;
    content: url('island_l.svg');
    position: absolute;
    left: -20px;
    animation: 10s ease-out arrive_l;
}
h1:after {
    display: inline-block;
    content: url('island_r.svg');
    position: absolute;
    right: 0;
    transform: translateZ(30px);
    animation: 10s ease-out arrive_r;
}
@keyframes arrive_l {
    from {
        transform: translateZ(-100px);
    }
    to {
        transform: translateZ(0px);
    }
}
@keyframes arrive_r {
    from {
        transform: translateZ(-50px);
    }
    to {
        transform: translateZ(30px);
    }
}

main {
    max-width: 40em;
    margin: 1rem auto;
}