/* 
===============
Fonts
===============
*/
@import url("https://use.typekit.net/kjv7kxq.css");
/* 
===============
Variables
===============
*/
:root {
    /* brand color */
    --clr-primary-1: #f27c15;
    /* brand darker secondary */
    --clr-primary-2: #d95b10;
    /* brand darkest */
    --clr-primary-3: #582417;
    /* logo text */
    --clr-text: #f2f0d9;
    --ff-primary: 'marker-aid", sans-serif';
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--ff-primary);
    font-weight: 400;
}

.sky {
    height: 66.6vh;
    background-color: var(--clr-primary-1);
    display: flex;
    flex-direction: column;
    justify-content:flex-end;
}
.sun {
    height: 20vh;
    width: 20vh;
    background-color: var(--clr-text);
    border-radius: 50%;
    margin: 0 40px 40px auto;
}
.sky-bottom {
    background-color: var(--clr-primary-2);
    height: 33.3vh;
}
.van-container {
    position: relative;
    height: 100%;
}
.van {
    position: absolute;
    -webkit-animation:slide-in 5s infinite; /* Chrome, Safari, Opera */
    animation:slide-in 5s;
    max-width: 100%;
    height: auto;
    bottom: 0;
    overflow: hidden;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes slide-in
{
    0%   {
        transform: translateX(-100vw)
    }
    100%  {
        transform: translateX(0)
    }
}

/* Standard syntax */
@keyframes slide-in
{
    0%   {
        transform: translateX(-100vw)
    }
    100%  {
        transform: translateX(0)
    }
}


.ground {
    height: 33.4vh;
    background-color: var(--clr-primary-3);
    display: flex;
    justify-content: center;
}
.title {
    max-width: 100%;
    height:60%;
    padding: 40px;
}