body {
	background-color : #E5E5FF;
  font-family : 'Roboto';
}
header {
  background-color : #A8A0E5;
  border-radius : 30px;
  padding : 12px;
  margin : 4px 8px;
}
main {
  background-color : #D1CCFF;
  padding : 10px 30px;
  margin : 15px 35px;
  transition : 0.5s;
}
main > h1 {
  font-weight : 400;
}
footer {
	background-color : #A8A0E5;
  color : #16164B;
  padding : 15px 20px;
}
#logo {
  display : block;
	margin-left : auto;
  margin-right : auto;
}
nav {
  height : 90%;
  width : 0;
  position : fixed;
  z-index : 1;
  top : 0;
  right : 0;
  background-color : #3F367C;
  color : #E5E5FF;
  overflow-x : hidden;
  padding-top : 30px;
  transition : 0.5s;
}
nav > a {
  color : #E5E5FF;
  text-decoration : none;
  padding : 5px;
}
nav > a:hover {
  color : #C5C5FF;
}
span {
  font-weight : 500;
  font-size : 24pt;
  position : sticky;
  float : right;
  top : 5px;
  right : 0px;
  background-color : #26214C;
  color : #E5E5FF;
  border : double 4px;
  border-radius : 15px;
  padding : 20px;
  transition : 0.5s;
}
span:hover {
  background-color : #16164B;
  color : white;
}
.img-responsive {
	width : 80%;
  max-width : 300px;
}
.col {
	float : left;
  width : 50%;
}
.row:after {
	content : "";
  display : table;
  clear : both;
}
.text-center {
	text-align : center;
}

@media screen and (max-height: 450px) {
  #side-nav {padding-top: 15px;}
  #side-nav a {font-size: 18px;}
}