body {
    background: url(../img/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    
}

.wrapper {
    margin: 0 auto;
    width: 50%;
    height: auto;
    position: absolute;
    top: 22%;
    left: 25%;
    border-radius: 0.7em;
    backdrop-filter: blur(1em) opacity(1) brightness(0.96);
    padding: 2em;
    text-align: center;
    vertical-align: center;
}

h1 {
    margin: 0 auto;
    color: #303030;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
}   

p {
    font-size: 1.3em;
    color: #303030;
    font-family: 'Lato', sans-serif;
}

/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
    .wrapper {
        width: 90%;
        left: 5%;
    }


  }

  /* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
    .wrapper {
        width: 100%;
        left: 0%;
        top: 0%;
        height: 100%;
    }

    p {
        margin-top: 2em;
    }
  }