body {
        background-color: #006633;
    }
    
    h1 {
        font-family: 'Pacifico', cursive;
        font-size: 2.5em;
    }
    
    p {
        font-size: .75em;
        text-align: left;
        padding: 10px 15px 0 15px;
    }
    
    .greenbox {
        background-color: #A3E0B4;
        color: #000;
        margin: auto;
        width: 450px;
        box-shadow: 0px 0px 15px #000;
    }
    
    .form-label {
        font-size: 1.25em;
    }
    
    form>.item {
        padding: 1rem 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        /* for the underlay */
        position: relative;
        z-index: 1;
        overflow: hidden;
        /* for the label to inherit */
        color: #000;
    }
    
    form .item::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        background-color: rgba(0230, 255, 242, .80);
        transform: translateX(-110%);
        transition: transform 0.2s ease-out;
    }
    
    form .item:focus-within {
        /* for the label to inherit */
        color: #000;
    }
    
    form .item:focus-within::before {
        transform: translateX(0);
    }
    
    #total {
        font-size: 1.5em;
        background-color: #FFF;
    }

    #backbutton {
        padding: 15px;
        border: 1px solid #FFF;
    }
    
#backbutton:hover,
#backbutton:focus,
#backbutton:active {
    background: #FFF;
    color: #000;
    border: 1px solid #000;
    text-decoration: none;
    box-shadow: 0px 0px 15px #000; 
}
    @media screen and (max-width:700px) {
        body {
            background-color: #A3E0B4;
        }
        .greenbox {
            box-shadow: none;
            width: 100%;
        }
    }