.app 
{
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    background-image:
    linear-gradient(to bottom, rgba(0,0,0,0), rgba(0, 0, 0, 0.3)),
    url('../img/background.jpg');
    background-blend-mode: color-burn;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: white;
    margin-bottom: 20px;
    margin-top: 20px;
}

.app .content
{
    background-color: rgba(0, 0, 0, 0.2);
    padding: 20px;
    margin-top: 100px;
}

.app .content h1
{
    font: 600 2rem sans-serif;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 10px;
    margin-top: 40px;
}

.app .content h2
{
    font: 400 1.4rem sans-serif;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 20px;
}

.app .content p
{
    font: 100 1rem sans-serif;
    color: #fff;
    margin-bottom: 20px;
}


.app .content .buttons
{
    display: flex;
    margin-top: 40px;
    margin-bottom: 40px;
}

.app .content .button
{
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    background-color: #4c7faf;
    color: white;
    text-decoration: none;
    margin-right: 10px;
}

@media (max-width: 600px)
{
    /* makes responsive to different mobile devices */
    .container {
        padding: 10px;
    }
    .app .content h1
    {
        font-size: 1.8rem;
    }
    .app .content h2
    {
        font-size: 1.2rem;
    }
}