body{
    background: #A0BFD7;
    margin: 0;
}

.content-container{
    width: 100vw;
    height: 100vh;
    display: block;
    overflow: hidden;
    position: relative;
}

.ground{
    display: block;
    position: fixed;
    width: 100%;
    height: 10%;
    bottom: 0;
    background: #567d46;
}

.text{
    top: 20%;
    text-align: center;
    font-family: Arial, Verdana, sans-serif;
    position: relative;
}

h1{
    font-size: 4em;
    margin-top: 0;
    margin-bottom: 20px;
}

h3{
    font-size: 2em;
    margin-top: 0;
}

#cloud01{
    position: absolute;
    top: 30px;
    left: 10%;
    max-width: 50px;
}

#cloud02{
    position: absolute;
    top: 50px;
    left: 28%;
}

#cloud03{
    position: absolute;
    top: 15px;
    left: 85%;
}

.city-hall{
    transform: translate(0px, -100%);
    max-height: 250px;
}

#bike01{
    position: absolute;
    max-width: 200px;
    height: auto;
    left: calc(0% - 200px);
    top: 0;
    transform: translate(0, -100%);
    animation: bike01-move 10s infinite;
    animation-timing-function: linear;
}

#bike02{
    position: absolute;
    max-width: 200px;
    height: auto;
    left: calc(100%);
    top: 0;
    transform: translate(0, -100%);
    animation: bike02-move 18s infinite linear;
    animation-delay: 3s;
}

#bike01-frontwheel{
    animation: wheelspin-bike01 2s infinite linear;
    transform-box:fill-box;
    transform-origin: center;
}

#bike01-rearwheel{
    animation: wheelspin-bike01 2s infinite linear;
    transform-box:fill-box;
    transform-origin: center;
}

#bike02-frontwheel{
    animation: wheelspin-bike02-frontwheel 2s infinite linear;
    transform-box:fill-box;
    transform-origin: center;
}

#bike02-rearwheel{
    animation: wheelspin-bike02-rearwheel 2s infinite linear;
    transform-box:fill-box;
    transform-origin: center;
}

@keyframes wheelspin-bike01 {
    from {transform:matrix(1.00,0.00,0.00,1.00,-68.3269,292.98812);}
    to {transform:matrix(-0.71,-0.71,0.71,-0.71,-68.3269,292.98812);}
}

@keyframes wheelspin-bike02-frontwheel {
    from {transform:matrix(1.00,0.00,0.00,1.00,387.6278,-4.69474);}
    to {transform:matrix(-0.71,0.71,-0.71,-0.71,387.6278,-4.69474);}
}

@keyframes wheelspin-bike02-rearwheel {
    from {transform:matrix(1.00,0.00,0.00,1.00,-1.5,2.583851);}
    to {transform:matrix(-0.71,0.71,-0.71,-0.71,-1.5,2.583851);}
}

@keyframes bike01-move {
    from {left: calc(0% - 200px);}
    to {left: calc(100% + 600px);}
}

@keyframes bike02-move {
    from {left: calc(100%);}
    to {left: calc(0% - 800px);}
}


@media screen and (min-width:768px) {
    .city-hall{
        transform: translate(100px, -100%);
        max-height: 400px;
    }

    h1{
        font-size: 8em;
        margin-bottom: 20px;
    }

    h3{
        font-size: 2.5em;
        margin-top: 0;
    }
}