body{
    background: url(../flames/bg_pic1.jpg) no-repeat center center fixed;
    background-position: cover;
}
.container{
    margin:0 auto;
    text-align: center;
    font-family: monospace;
}
.content{
    margin:0 auto;

    width:80%;
}
#heading{
    width:100%;
    background-color: mediumaquamarine;
    font-size: 20px;
}
span{
    text-align: left;
    display: block;
    font-size: 20px;
}

.section1{
    margin:20px;
    box-shadow:1px 1px 10px 1px white;
    padding: 20px;
}
input{
    padding: 12px;
    margin:10px 10px 10px 10px; 
    outline:none;
}
.result{
    font-size:20px;
}
.result input{
    color:black;
    margin-bottom: 10px;
}

.result h4{
    display: block;
    background-color: orchid;
    border-radius: 10px;
}

.btn button{
    padding:10px;
    border: 10px;
    outline:10px;
}
footer{
    position:fixed;
    width:100%;
    font-family: monospace;
    text-align:center;
    background-color: lightblue;
    left:0;
    bottom:0;
}

@media only screen and (min-width:426px){
    body{
        background: url(../flames/dp.jpg) no-repeat center center fixed;
        background-position: cover;
    }
    .container{
        color:white;
    }
    #heading{
        width:100%;
    }
    #heading h2{
        font-size: 10px;
    }
    span{
        text-align: center;
    }
    .result input{
        font-weight: 900;
        font-family: cursive;
        font-size: 20px;
        color:white;
    }
    footer{
        text-align: center;
        font-size: 20px;
        padding: 10px;
    }
    .btn button:hover{
        background-color: limegreen;
        color:white;
    }
}