body{
    background-color: #FFFFFF;
    color: #666666;
    background-attachment: fixed;
    font-family: Arial, Verdana, sans-serif;
    background-image: linear-gradient(#eeeeee, #ffffff);
    margin: 0px;
    width: auto;
    min-height: 100vh;
    display: grid;
    grid-template:
        "header header header" 80px
        "nav    nav    nav" 80px
        "main   main   main" 1fr
        "footer footer footer"  80px 
        / 1fr 1fr 1fr   
}

header{
    color: #aca5a5;
    font-family: 'Hurricane', cursive;
    text-align: center;
    height: 45px;
    grid-area: header;
}

h1{
    color: #aca5a5;
}

nav{
    grid-area: nav;
    background-color: #84e5fd;
    color: #FFFFFF;
    text-align: center;
}

nav a:hover{ 
	background-color: #bcdcf7; 
} 

nav a {
    text-decoration: none;
    color: #FFFFFF;
    font-family: 'Kalam', cursive;
    display: block;
}

main{
    grid-area: main;
    color: #aca5a5;
    font-family: 'Kalam', cursive;
    font-size: 15px;
}

#search{
    background-image: url('search.png');
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center;
    height: 400px;
}

footer{
    grid-area: footer;
    color: #aca5a5;
    font-size: .90em;
    font-style: italic;
    text-align: center;
    padding: 1em;
    background-color: #FFFFFF;
}

#form{
    position:relative;
    max-width:300px;	
    margin-bottom:20px;
    }

    #sbox{
    height:50px;
    padding:0 10px; 
    position:absolute; 
    left:0;
    top:0; 
    border-radius:25px;
    outline:0;
    background:#eee;
    }

    #sbtn{
    height:50px;
    width:50px;	
    position:absolute; 
    left:250px; 
    top:0;
    background:#7fbfff;
    color:#fff;
    border:none;
    border-radius:0 25px 25px 0;
    }

    #sbtn .fa-search{
    font-size:20px;	
    position:absolute;
    top:30%;
    left:30%;	
    }
    
    #sbtn:hover{
    color:#888;
    }