*
{
    margin: 0;
    padding: 0;
}

body
{
    width: 600px;
    height: 335px;
    margin: 0 auto;
    background-color: #40c0c0;
    overflow: hidden;
}

div
{
    
}


span
{
    width: 100%;
    display: block;
}


/* .day>.viewport>.curtain-left
{
    background-color: #DF92BE;
}
.curtain-left
{
    display: inline-block;
    width: 60px;
    height: 100%;
    z-index: 3;
    background-color: #40c0c0;
    position: absolute;
    left: 70px;
    top: 0;
}

.day>.curtain-right
{
    background-color: #DF92BE;
}
.curtain-right
{
    display: inline-block;
    width: 60px;
    height: 100%;
    z-index: 3;
    background-color: #40c0c0;
    position: absolute;
    right: 71px;
    top: 0;
} */

.viewport 
{
    height: 100%;
    clip-path: inset(0);
}

.road
{
    position: absolute;
    left: 10%;
    bottom: -32px;
    z-index: 2;
}

.ground
{
    background-color: #DD916D;
    height: 23%;
    /* position: fixed;  */
    bottom: 0;
    clear: both;
}

.sandwich
{
    position: relative;
    /* top: -30px; */
    height: 0;
}

.sky
{
    background-color: #DF92BE;
    height: 77%;
    /* position: fixed;  */
    top: 0;
    clear: both;
}

.dawn
{
    /* background: -webkit-linear-gradient(
        to top,
        #DD916D 25%,
        #DF92BE 25% 100%
    );
    background: -moz-linear-gradient(
        to top,
        #DD916D 25%,
        #DF92BE 25% 100%
    );
    background: linear-gradient(
        to top,
        #DD916D 25%,
        #DF92BE 25% 100%
    ); */
}

.dawn>.viewport>.sky
{
    background-color: #DF92BE;
}
.dawn>.viewport>.ground
{
    background-color: #DD916D;
}

.day
{
    background-color: #DF92BE;
    /* background: -webkit-linear-gradient(
        to top,
        #c08020 25%,
        #40c0c0 25% 100%
    );
    background: -moz-linear-gradient(
        to top,
        #c08020 25%,
        #40c0c0 25% 100%
    );
    background: linear-gradient(
        to top,
        #c08020 25%,
        #40c0c0 25% 100%
    ); */
} 

.day>.viewport>.sky
{
    background-color: #40c0c0;
}
.day>.viewport>.ground
{
    background-color: #c08020;
}

.dusk
{
    /* background-color: #202367; */
}

.dusk>.viewport>.sky
{
    background-color: #202367;
}
.dusk>.viewport>.ground
{
    background-color: #644742;
}

.night
{
    /* background-color: #01001f; */
    /* background: -webkit-linear-gradient(
        to top, 
        #010101 25%,
        #01001f 25% 100%
    );
    background: -moz-linear-gradient(
        to top,
        #010101 25%,
        #01001f 25% 100%
    );
    background: linear-gradient(
        to top, 
        #010101 25%,
        #01001f 25% 100%
    ); */
}

.night>.viewport>.ground
{
    background-color: #010101;
}
.night>.viewport>.sky
{
    background-color: #01001f;
}

.cactus
{
    bottom: 32%;
    z-index: 1;
}

.sign
{
    bottom: 55%;
    z-index: 3;
}

.star-small
{
    width: 2px;
    height: 2px;
    background-color: white;
    opacity: 0;
    position: relative;
    animation-name: scroll-slow;
    /* animation-duration: 225s; */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

.scroll
{
    position: relative;
    opacity: 0;
    animation-name: scroll-slow;
    animation-duration: 100s;
    animation-timing-function: linear;
    animation-fill-mode: both;
}

.scroll-foreground
{
    position: relative;
    opacity: 0;
    animation-name: scroll-slow;
    animation-duration: 40s;
    animation-timing-function: linear;
    animation-fill-mode: both;
}

.splat
{
    width: 2px;
    height: 2px;
    top: -60%;
    background-color: green;
    z-index: 1;
    position: relative;
    animation-name: splat;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-fill-mode: both;
}

.splat-text
{
    position: relative;
    left: 10px;
    top: -15px;
}

#starting-text
{
    animation-name: splat-text;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-fill-mode: both;
}

#splatting-text
{
    animation-name: splatting-text;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-fill-mode: both;
}

.tumbles
{
    position: relative;
    z-index: 3;
    opacity: 0;
    animation-name: tumbles;
    animation-duration: 16s;
    animation-timing-function: linear;
    animation-fill-mode: backwards;
}

.tumblesticky
{
    position: relative;
    z-index: 3;
    opacity: 0;
    animation-name: tumblescroll;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-fill-mode: both;
}

@keyframes scroll-slow
{
    0%      {right: -100%; opacity: 0;}
    1%     {opacity: 1;}
    99%     {opacity: 100%;}
    100%    {right: 5%; opacity: 0;}
}

@keyframes splat
{
    0%      {right: -100%; opacity: 0;}
    1%     {opacity: 1;}
    90%     {right: -28%;}
    91%     {right: -28%;}
    99%     {opacity: 1;}
    100%    {right: -28%; opacity: 0;}
}

@keyframes splat-text
{
    0%      {right: -100%; opacity: 0;}
    1%      {opacity: 1;}
    90%     {opacity: 1;}
    91%     {right: -28%; opacity: 0;}
    100%    {right: -28%; opacity: 0;}
}

@keyframes splatting-text
{
    0%      {opacity: 0;}
    10%     {opacity: 1;}
    100%    {opacity: 1;}
}

@keyframes tumbles
{
    0%      {transform: rotate(360deg); right: -100%; opacity: 0;}
    1%      {opacity: 1;}
    20%     {bottom: 30%;}
    25%     {bottom: 40%;}
    30%     {bottom: 30%;}
    45%     {bottom: 30%;}
    50%     {transform: rotate(0deg); bottom: 40%;}
    60%     {bottom: 30%;}
    75%     {bottom: 40%;}
    80%     {bottom: 30%;}
    99%     {opacity: 1;}
    100%    {transform: rotate(-270deg); right: 10%; opacity: 0;}
}

@keyframes tumblescroll
{
    0%      {right: -100%; opacity: 0;}
    1%      {opacity: 1;}
    99%     {opacity: 1;}
    100%    {right: 15%; opacity: 0;}
}