extstyling.css

/*For fixing the background image*/
.background{
    background-image:url("animalbg.jpg");
    opacity:0.5;
    background-position:fixed;
    background-repeat:no-repeat;
    width:100%;
    position:relative;
}

/*for making the large button*/
.blarge{
    max-width:300px;
    max-height:100px;
    font-size:23px;
    font-weight:34;
}

/*putting the image and the text together*/
.containerx {
    position: relative;
    text-align: center;
    color: white;
    width:100%;
}

/*putting the text on the image*/
  .centered {
    position: absolute;
    top:30%;
    left:50%;
    width:100%;
    /*height:60em;*/
    /*border:10px solid white;*/
    transform: translate(-50%, -50%);
}

/*Footer*/
.foot{
    width:100%;
    color:white;
    background-color:#222;
    height:100px;
    margin-bottom:-100px;
    bottom:0;
    left:0;
}

.foot2{
  width:100%;
  color:white;
  background-color:#222;
  height:100px;
  position:fixed;
  bottom:0;
  left:0;
}
/*horizontal rule, to be included with the footer*/
.hori
{
    margin-left:20px;
    margin-right:20px;
}
.iconm{
    font-size:30px;
    margin-left:45%;
    display:inline-block;
    text-align:center;
}  
.icon{
    font-size:30px;
    display:inline-block;
    text-align:center;
}  

.h4:hover{
    color:white;
    cursor: pointer;
}

/*Navbar Examples*/
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
  
  li {
    float: left;
  }
  
  li a{
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  li a:hover{
    background-color: #111;
  }