html, body{ margin:0;padding:0;background:darkslateblue;}

#container{padding:0;margin:0;width: 100%;height: 100%;
}

#titlebar{
margin: 1em;
background: black;
color: white;
border-radius:1em;
font-weight:bold;
line-height:3em;
min-height: 1px;
/*
-webkit-box-shadow: -1px -1px 1px 2px rgba(255,0,0,0.75);
-moz-box-shadow: -1px -1px 1px 2px rgba(255,0,0,0.75);
box-shadow: -1px -1px 1px 2px rgba(255,0,0,0.75);
*/
}

#titlebar a, #titlebar span{
margin: 0.5em 1em 0.5em 1em;
padding: 0.5em 1em 0.5em 1em;
background: black;
color: white;
border-radius:1em;
font-weight:bold;
text-decoration: none;
}
#titlebar a:hover{
color: red;
}
#titlebar span:hover{
color: gold;
}
 #titlebar a:hover{
-webkit-box-shadow: -1px -1px 1px 2px rgba(212, 175, 55,0.75);
-moz-box-shadow: -1px -1px 1px 2px rgba(212, 175, 55,0.75);
box-shadow: -1px -1px 1px 2px rgba(212, 175, 55,0.75);

}

#body div{
display:inline-block;
padding: 1em;
background: #4a203b;
margin: 1em;
color: gold;
border-radius:1em;
}
#body{
/*height: 100%;*/
/*min-height: 50em;*/
min-height: 40em;;
padding-bottom: 5em;
overflow-y:auto;
overflow-x:none;
}

#footer{
/*border-radius:1em;*/
line-height:2em;
min-height: 1px;
position:fixed;
bottom:0;
display:block;
width: 100%;
background: darkslateblue;
}

#footer > div{
margin: 0.5em;
min-height: 2em;
background: #4a203b;
border-radius: 0.5em;
 }

#footer span{

padding: 0em 0.5em 0em 0.5em;
margin:  0em;
}




/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
  
	body{
	font-size:1em;
	}
  
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
  
 		body{
		font-size: 1em;
	}
  
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
  
 

	body{

		font-size:2em;
		/*background-color:red;*/
  	}
  
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
 
	body{

	font-size:1.5em;
	/*background-color:red;*/
	  }

  
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/


@media (min-width: 481px) and (max-width: 767px)  {


        body{

        font-size:3em;
        /*background-color:red;*/
          }

}


@media (min-width: 481px) and (max-width: 767px) and (orientation: landscape)  {


        body{

        font-size:2em;
        /*background-color:red;*/
          }

}


/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
  

	body{

		font-size:3em;
		/*background-color:red;*/
  	}

  
}

@media (min-width: 320px) and (max-width: 480px)and (orientation: landscape)  {


        body{

                font-size:2em;
                /*background-color:red;*/
        }


}