@font-face { font-family: fn1; src: url('KINGRICH.TTF'); } 
@font-face { font-family: fn2; src: url('BEWARE__.TTF'); } 
@font-face { font-family: fn3; src: url('electrox.ttf'); } 
html, body {

        height: 100%;

        margin: 0px;

    }
#right
	{	
		background-color:#FFCCCC;
		height:100%;
		animation-name: example;
		animation-duration: 4s;
	}	
#left
	{
		height:100%;
	}
#border{
		height:98%;
		border:1px double black;
		box-shadow: 10px 10px 5px #888888;
}
#left #contbody
	{
		margin-top:40%;
	}
p {
    font-family: cursive;
}
h1,h2,h3,h4,h5,h6
{
/* font-family: Palatino, "Palatino LT STD", "Palatino Linotype", "Book Antiqua",cursive;	 */
font-family: fn2;font-size:34;
}
.f2{ font-family: fn1; }
#right #contbody
	{
		margin-top:40%;
	}
#left #bottomcont
	{
		position: absolute;
		bottom:5%;
	}
#main
{
		padding-left:5px;
		padding-right:5px;
		padding-top:5px;
}	
/* 
@keyframes example {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
} */
@media(max-width:360px) {
#left
	{
		height:50%;
	}
#right
	{
		height:50%;
	}
#left #contbody
	{
		margin-top:20%;
	}
#right #contbody
	{
		margin-top:20%;
	}
#left #bottomcont
	{
		position: absolute;
		bottom:2%;
	}	
}