html, body {
    height: 100%;
    margin: 0;
}

#wrapper1 { /* background */
    width: 100%; height: 100%;
    min-height: 100%; 
    background: #e09010;
    background-image: linear-gradient(180deg, rgba(224, 160, 192, 1) 0%, rgb(224, 144, 16) 40%, rgba(224, 48, 32, 1) 100%);
    /* background-attachment: fixed; */
    background-size: 100% auto; 
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: inline-block;
}

#wrapper2 { /* necessary since to fix display??? i hate this */
    display: inline;
}

body { 
    color: rgba(0,0,0,0.87); 
    font-family: Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0; 
    /* background-attachment: fixed; */
    /* background-size: 100% auto;  */

    /* @media(max-width: 800px) {
        background-attachment: scroll;
    } */
    }
      
.message { 
    background: white; 
    
    max-width: 360px; 
    margin: 100px auto 16px; 
    padding: 32px 24px; 
    border-radius: 3px; }
      
.message h2 { 
    color: #ffa100; 
    font-weight: bold; 
    font-size: 16px; 
    margin: 0 0 8px; }

.message h1 { 
    font-size: 22px; 
    font-weight: 300; 
    color: rgba(0,0,0,0.6); 
    margin: 0 0 16px;}

.message p { 
    line-height: 140%; 
    margin: 16px 0 24px; 
    font-size: 14px; }

.message a { 
    display: block; 
    text-align: center; 
    background: #039be5; 
    text-transform: uppercase; 
    text-decoration: none; 
    color: white; 
    padding: 16px; 
    border-radius: 4px; }

.message, .message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }

#load { 
    color: rgba(0,0,0,0.4); 
    text-align: center; font-size: 13px; }
      
@media (max-width: 600px) {
    body, #message { 
        margin-top: 0; 
        background: white; 
        box-shadow: none; 
    }
        
    body { 
        border-top: 
        16px solid #ffa100; 
    }
}