@media (max-width: 700px), (max-height:550px){
	body{font-size: .70em;}
}

@keyframes backglow{
	0% {text-shadow:0px 0px .3em rgba(155,155,255,0)}
	50% {text-shadow:0px 0px .9em rgba(155,155,255,1)}
	100% {text-shadow:0px 0px .3em rgba(155,155,255,0)}
}
@-webkit-keyframes backglow{
	0% {text-shadow:0px 0px .3em rgba(255,255,255,0)}
	50% {text-shadow:0px 0px .9em rgba(255,255,255,1)}
	100% {text-shadow:0px 0px .3em rgba(255,255,255,0)}
}

@keyframes headerbar{
	from{height:0em; margin-top:1.5em;}
	to{height:3em; margin-top:0em;}
}
@-webkit-keyframes headerbar{
	from{height:0em; margin-top:1.5em;}
	to{height:3em; margin-top:0em;}
}

@keyframes fadein{
	from{opacity:0;}
	to{opacity:1;}
}
@-webkit-keyframes fadein{
	from{opacity:0;}
	to{opacity:1;}
}


#blogframe{
	display:inline;
	width:80%;
	height:32em;
	margin-left:10%;
	margin-right:5%;
	padding-top: 0px;
	margin-top: 0px;
	border-radius:1em;
}
.sidebar{
	float:right;
	display:inline;
	position:fixed;
	height:25%;
	min-height:9em;
	width:3%;
	right:0px;
	transition:width 500ms, height 500ms, background-color 500ms;
	border: 1px solid gray;
	border-radius:1em 0em 0em 1em;
	background-color: rgba(255,255,255,0.1);
	overflow:hidden;
}
.twitterWrap{
	width:10em;
	margin-top:3.5em;
	margin-left:-2em;
	transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
}
.sidebar h3{
	margin-left:1em;
	float:right;
	left:0px;
	color:rgb(180,180,250);
	transition: color 500ms;
}
.sidebar:hover{
	width:30%;
	height:73%;
	background-color:rgba(0,0,0,0.7);
}
.twitter-timeline{
	margin-left:3em;
	margin-top:-20%;
	height: 90%;
	width: 80%;
}

html{
	width:98%;
	height: 98%
}
body{
	background-image:repeating-linear-gradient(
		90deg,rgb(80,80,150),rgb(180,180,250) 20%,rgb(180,180,250) 80%,
		rgb(80,80,150));
	width:98%;
	height:98%;
	font-family:georgia;
	display:block;
}

header {
	position:fixed;
	display:block;
	width:98%;
	z-index:999;
}

header div {
	display:block;
	width:60%;
	text-align: center;
	margin:auto;
	padding-left:5%;
	padding-right:5%;
	background-color:rgba(50,50,50,.5);
	height:3em;
	border-top: 2px solid rgb(250,250,250);
	border-bottom: 2px solid rgb(250,250,250);
	border-radius:.25em;
	box-shadow: .2em .2em .1em .1em rgba(50,50,50,.7);
	animation:headerbar 1s;
	-webkit-animation:headerbar 1s;
}

header ul {
	padding: 0em;
}
header ul li{
	display:inline;
	color:white;
	font-weight:bold;
	text-align:center;
	margin-left:1%;
	margin-right:1%;
	animation:fadein 2.5s;
	-webkit-animation:fadein 2.5s;
}
header ul li a {
	text-decoration:none;
	color:white;
	animation:fadein 2.5s;
	-webkit-animation:fadein 2.5s;
}
header ul li a:hover {
	text-decoration:underline;
	color:rgb(200,200,255);
	animation:backglow 1s infinite;
	-webkit-animation: backglow 1s infinite;
}
article{
	width:98%;
	position:relative;
	display:block;
	margin-left:2%;
	height:33em;
	padding-top:6%;
	border:1px solid rgba(0,0,0,0);
}

footer{
	z-index:998;
	display: block;
	position:fixed;
	width:50%;
	height:3em;
	bottom:1em;
	margin-left:24%;
	margin-right:auto;
	text-align:center;	
	background-color:rgba(50,50,50,.5);
	border-radius:5em;
	box-shadow: .2em .2em .1em .1em rgba(50,50,50,.7);
	animation:headerbar 1s;
	-webkit-animation:headerbar 1s;
}

footer a {
	text-decoration:none;
	color:white;
	margin-bottom: 0em;
	padding-bottom: 0em;
	text-shadow:.1em .1em .1em black;
	animation:fadein 2.5s ;
	-webkit-animation:fadein 2.5s;
}

footer a:hover {
	text-decoration:underline;
	color:rgb(200,200,255);
	animation:backglow 1s infinite;
	-webkit-animation: backglow 1s infinite;
}