html,body{width:100%;height:100%;margin:0;padding:0;}
body{background:lightblue  url(http://upload.wikimedia.org/wikipedia/commons/9/96/Cloudhoppers.jpg) no-repeat center;background-size:cover;}
#alert{
    position:absolute;
    top:37.5%;bottom:37.5%;left:25%;right:25%;
    background-color:lightblue;
    border:1px solid black;
    border-radius:8px;
    box-shadow: 0 0 16px black;
    transition: all .25s cubic-bezier(0.52, 0.76, 0.52, 0.76);
}
#alert:before{
    display:block;
    position:absolute;
    top:0;bottom:0;left:0;right:0;
    -moz-filter: blur(15px);
    -o-filter: blur(15px);
    -ms-filter: blur(15px);
    filter:url(#blurLayer);
    filter: blur(15px);
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15');
    opacity: .9;
    content:' ';
    background:lightblue  url(http://upload.wikimedia.org/wikipedia/commons/9/96/Cloudhoppers.jpg) no-repeat fixed center;background-size:cover;
}
#alert>div{
    position:absolute;
    top:2em;bottom:.5em;left:.5em;right:.5em;
    background-color:white;
    border:1px solid gray;
    padding:.5em;
}
#alert>div>h3{
    margin:0;padding:0;position:absolute;
    color:white;top:-1.5em;left:0;
}

#alert.close{
    transition: all .25s cubic-bezier(0.70, 0.50, 0.70, 0.50);
    opacity:0;
    transform:scale(0.95,0.9) translate(0, 0px);
}
/* navigation section!! */
#navbar {
   height: 50px;
   background-image: url('/task2222.png');
    /* navbar bg img */
   width: 100%;
   background-color: transparent;;
   justify-content: space-around;
}

#navbar ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: space-around;
 }