* { margin: 0; padding: 0; } 
body {
    margin: 20px auto;
    font-family: "Lato";
    text-align: center;
    background-color: #ffaa00; 
    background-image: url(images/helloworld.png);
    background-repeat: no-repeat;
    background-position:top left;
    font-family: sans-serif;
}
       
#wrapper, #loginform {
    margin-left: auto;
    margin-right: auto;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 50px;
    background: #ffffff;
    width: 60%;
    text-align: center;
    border: 2px solid #ffffff;
    border-radius: 25px; 
}

/* Responsive images */
.logo-main, .logo-footer {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.content {
    padding: 15px 0;
}

/* Media queries for mobile responsiveness */
@media screen and (max-width: 768px) {
    #wrapper, #loginform {
        width: 90%;
        padding-right: 10px;
        padding-left: 10px;
    }
    
    .logo-main {
        max-width: 90%;
    }
    
    .logo-footer {
        max-width: 80%;
    }
}
     
h1 {
     color: red;
     font-size: 20;
     text-align: center;       
}

p.scripture {
     color: black;
 }
         
p.welcome {
     color: black;
     text-align: left;
}

footer {
     width: 100%;
     text-align: center;
     padding: 20px 0;
     margin-top: 20px;
}

@media screen and (max-width: 480px) {
     footer {
          padding: 10px 0;
          font-size: 0.9em;
     }
}