/* CSS VARIABLES */
:root {
	--blue: #4156A6;
	--teal: #37ADA3;
	--orange: #FF6036;
	--light: #eeeff7;
	--grey: #333;
    --dark: #222;
}
/* UNIVERSAL */
html {
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	font:62.5%/1.5 "bariol","Helvetica Neue",Helvetica,Arial,sans-serif;
}
body {
	margin:0;
	background-color:#f07351;
	letter-spacing:.08em;
	font-size:1.6rem;
	line-height:2.4rem;
}
html,body {
	height:100%;
}
img {
	max-width: 100%;
}

/* WEB FONT */
@font-face {
	font-family:'bariol';
	src:url('../fonts/Bariol_Regular-webfont.eot');
	src:url('../fonts/Bariol_Regular-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/Bariol_Regular-webfont.woff2') format('woff2'),url('../fonts/Bariol_Regular-webfont.woff') format('woff'),url('../fonts/Bariol_Regular-webfont.ttf') format('truetype'),url('../fonts/Bariol_Regular-webfont.svg#bariol_regularregular') format('svg');
	font-weight:normal;
	font-style: normal;
}

/* To use the Bariol font,add class="bariol" to your chosen element */
.bariol {
	font-family: bariol,sans-serif;
}

/* SIDEBAR */
#home {
	height: 230px;
	width:100%;
	position:static;
	margin:0;
	padding:1.5rem 0 1rem 2%;
	box-sizing:border-box;
	background:var(--light) url('../images/nichijou.gif') right bottom no-repeat;
	color: var(--orange);
	overflow:hidden;
	background-position: center bottom;
	display: flex;
	flex-direction: column;
	align-items: center;
}
#home h1 {
	width:200px;
	margin: 0 auto;
}

/* NAVIGATION */
#nav ul {
	list-style:none;
	padding: 0;
	margin: 0;
}
#home img {
	width:100%;
}
#nav li {
	float:left;
	font-size:2rem;
	font-weight:bold;
	line-height:1.5;
	margin-top: 1rem;
	margin-bottom: 1rem;
}
#nav li + li {
	margin-left: 2rem;
}
#nav li a {
	display:block;
}
#nav li a:hover {
	color: var(--teal);
}

/* CONTENT AREA */
#content {
	position:static;
	width:35em;
	max-width:90%;
	color:var(--dark);
	padding:5% 0% 10% 6%;
}
#content h1 {
    font-size:3.6rem;
	line-height:4.8rem;
	color:#fff;
	margin-top:.5rem;
}
#content h2 {
	font-size:3.1rem;
	line-height:4.8rem;
	margin:4.8rem 0 0rem 0;
	color:#fff;
}
#content h3 {
	font-size:2.6rem;
	color:#fff;
	line-height:4.8rem;
	margin:2rem 0 .4rem 0;
}
#content p {
	margin:0 0 1.6rem;
}
article {
	margin-bottom:4.8rem;
}
.article ul,.article ol {
	margin:2.4rem 0 2.4rem 2.4rem;
}
.article ul li {
	list-style-type:circle;
}
#content img {
	max-width: 600px;
}

/* POST META */
header .meta {
	margin:1rem 0 3.8rem 0;
	font-size:2.1rem;
	font-weight:bold;
}
header .meta time {
	color:#fff;
	display:block;
	margin-bottom:10px;
}
header .meta .tag {
	margin:.3rem .1em .3rem .1em;
	color:#fff;
	background-color:var(--teal);
	padding:.4rem .9rem;
	font-size:1.7rem;
	border-radius:25px;
}
header .meta .tag:hover {
	color:var(--teal);
	background-color: #fff;
}

/* TYPOGRAPHY / MISC */
a {
	text-decoration:none;
	color:inherit;
}
h1,h2,#nav li,header .meta {
	font-family:"bariol",sans-serif;
	text-transform:uppercase;
	font-weight:bold;
}
a img {
	border: none;
}
.avatar {
	margin: 6px 8px 0 0;
	float: left;
}
.avatar-wrapper {
    min-height: 110px;
}
.border {
	border: 3px solid var(--blue);
	padding: 2px;
}

/* INLINE HYPERLINK HOVER EFFECT */
#content p a::before,#footer a::before {
	position:absolute;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height:100%;
	content:'';
	transition:transform 0.2s;
	transform:translateY(95%);
}
#content p a,
#footer a {
	overflow:hidden;
	position:relative;
	display:inline-block;
	outline:none;
	vertical-align:bottom;
	text-decoration:none;
	white-space:nowrap;
	z-index:2; /* Needed for footer links */
}
#content a:hover::before,
#content a:focus::before,
#footer a:hover::before,
#footer a:focus::before {
	transform:translateY(0);
}
#content p a::before {
	background-color:#fff;
}
#footer a::before {
	background-color:var(--blue);
}
#content p a {
	color:var(--grey);
}
#footer a {
	color: #fff;
}

/* FOOTER */
#footer {
	padding:1.5rem 6%;
	font-size:13px;
	background-color:var(--teal);
	border-top:3px solid #fff;
	color: #fff;
}

/* SOCIAL ICONS */
.social {
	padding:0;
	margin:0;
	display:inline-block;
}
.social li {
	display:inline-block;
	list-style:none;
}
#footer .social li a {
	color:var(--blue);
}
.social li a:before {
	display: none;
}
/* Removes hover effect animation */
#footer .social li a:hover {
	color:#fff;
}
#footer .social li a:hover .fa-inverse {
	color: var(--blue);
}
/* Color of logo */
/* MEDIA QUERIES */
@media all and (min-width:900px) {
	#home {
		height:100%;
		width:30%;
		padding:5% 3% 10%;
		background-position: right bottom;
		position:fixed;
		top:0;
		left:0;
	}
	#home h1 {
		margin: 0;
	}
	#nav ul {
	    margin-top:20%;
	}
	#nav li {
		font-size:2.5rem;
		line-height:3.6rem;
		margin:0;
		float:none;
	}
	#nav li + li {
		margin-left: 0;
	}
	#content {
		max-width:60%;
		position:relative;
		top:0;
		left:30%;
	}
	#footer {
		padding: 1.5rem 2rem 1.5rem 32%;
	}
}
@media all and (min-width:1200px) {
	body::before {
		background-color:var(--light); /* You can change this background colour to have 3 different stripes of color */
		content:"";
		height:100%;
		position:fixed;
		width:10%;
	}
	#home {
        -webkit-transform:skewx(-5deg);
		transform:skewx(-5deg);
		transition-property:all;
		padding:5% 7% 10%;
	}
	#nav,#home h1 {
		transform:skewx(5deg);
	}
	#home h1 {
		width:275px;
	}
	#home img {
	    width:100%;
		max-width:275px;
	}
	#nav li {
		font-size:2.8rem;
		text-align:center;
	}
	#content {
		left: 35%;
	}
	#footer {
		display: flex;
		justify-content: space-between;
	}
}