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

body,
html {
    height: 100vh;
    background-color: #f2f2f2;
}

footer,
header {
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: lightgray;
    font-size: 20px;
    font-family: 'Comic Sans MS';
}

svg {
    display: block;
    width: 100%;
    margin: 0 auto;
    height: calc(100% - 50px);
}

#red {
    animation: red-animation 10s infinite;
    animation-play-state: paused;
}

#yellow {
    animation: yellow-animation 10s infinite;
    animation-play-state: paused;
}

#green {
    animation: green-animation 10s infinite;
    animation-play-state: paused;
}

@keyframes red-animation {
    0% {
        fill: lightgray;
    }
    1% {
        fill: red;
    }
    50% {
        fill: red;
    }
    55% {
        fill: lightgray;
    }
    100% {
        fill: lightgray;
    }
}

@keyframes yellow-animation {
    0% {
        fill: lightgray;
    }
    35% {
        fill: lightgray;
    }
    36% {
        fill: yellow;
    }
    50% {
        fill: yellow;
    }
    55% {
        fill: lightgray;
    }
    100% {
        fill: lightgray;
    }
}

@keyframes green-animation {
    0%,
    100% {
        fill: lightgray;
    }
    50% {
        fill: lightgray;
    }
    55% {
        fill: green;
    }
    99% {
        fill: green;
    }
}

#birds {
    offset-path: path('M0 40 Q250 110 400 120 T650 100');
    animation: birds-animation 10s linear infinite;
    animation-play-state: paused;
}

@keyframes birds-animation {
    100% {
        offset-distance: 100%;
    }
}

#Cloud1 {
    animation: cloud-animation 15s reverse infinite;
    animation-play-state: paused;
}

#Cloud2 {
    animation: cloud-animation 20s reverse infinite;
    animation-play-state: paused;
}

#Cloud3 {
    animation: cloud-animation 30s reverse infinite;
    animation-play-state: paused;
}

@keyframes cloud-animation {
    0%,
    100% {
        x: 0%;
    }
    50% {
        x: 75%;
    }
}

#walk {
    animation: walk-animation 10s infinite;
    animation-play-state: paused;
}

@keyframes walk-animation {
    0%,
    100% {
        x: 190px;
        y: 180px;
    }
    72% {
        x: 280px;
        y: 450px;
    }
    99% {
        x: 280px;
        y: 450px;
    }
}

.rainbow {
    animation: rainbow-animation 10s reverse infinite;
    animation-play-state: paused;
}

@keyframes rainbow-animation {
    0% {
        stroke-opacity: 0.1;
    }
    50% {
        stroke-opacity: 0.5;
    }
}

#sun {
    animation: sun-animation 10s reverse infinite;
    animation-play-state: paused;
}

@keyframes sun-animation {
    0% {
        fill-opacity: 0.5;
        stroke-dasharray: 2 4;
        cx: 750 cy: 50;
    }
    50% {
        stroke-width: 45;
        fill-opacity: 0.9;
        stroke-dasharray: 2 2;
        cx: 650;
        cy: 80;
    }
}

#car {
    animation: car-animation 10s infinite;
    animation-play-state: paused;
}

@keyframes car-animation {
    0% {
        transform: translate(200px);
    }
    50% {
        transform: translate(-240px);
    }
    100% {
        transform: translate(-900px);
    }
}

#secondCar {
    animation: SecondCar-animation 10s infinite;
    animation-play-state: paused;
}

@keyframes SecondCar-animation {
    0% {
        transform: translate(200px);
    }
    25% {
        transform: translate(-240px);
    }
    50% {
        transform: translate(-245px);
    }
    75% {
        transform: translate(-900px);
    }
    100% {
        transform: translate(-900px);
    }
}

.on:hover {
    cursor: pointer;
}

.info {
    opacity: 0;
    stroke: white;
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    stroke-width: 5;
    transition: stroke-dashoffset 5s linear;
    transition: 2s linear;
}

.text_info {
    opacity: 0;
    transition: 2s linear;
}

svg:hover .info {
    opacity: 1;
    stroke-dashoffset: 0;
    transition: 2s linear;
}

svg:hover .text_info {
    font-size: 1em;
    transition: 2s linear;
    opacity: 1;
}