/** Import Font **/
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/**
  *
  * Generic Site Wide Styling
  *
  */
body, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, hr,
dl, dd, ol, ul, figure {
  	margin: 0;
  	padding: 0; 
}

body{
	font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	margin-left: 20%;
	transition: margin 300ms;
  margin-top: 40px;
}

a{
	text-decoration: none;
}

li{
	list-style: none;
}

@media screen and (max-width: 1200px) {
  body {
  	margin-left: 0;
  	margin-top: 120px;
  	transition: margin 300ms;
  }
}


/**
  *
  *	Custom Componets
  *
  */

/** Side Bar **/
.sidebar {
  	height: 100%;
  	width: 20%;
  	position: fixed;
  	z-index: 1;
  	top: 0;
  	left: 0;
  	background-color: #000033;
	//overflow-x: hidden;
	transition: height 300ms, width 300ms;
}

.sidebar h1{
	font-weight: 400;
	font-size: 45px;

	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 100%;
    text-align: center;

    transition: font-size 300ms;
    font-family: 'Press Start 2P', cursive;
    word-spacing: 10px;
}

.sidebar h1 a{
	color: white;
}

.sidebar canvas{
  height: 100%;
}

@media screen and (max-width: 1500px) {
  .sidebar h1{
  	transition: font-size 300ms;
  	font-size: 30px;
  }
}

@media screen and (max-width: 1200px) {
  .sidebar {
  	height: 100px;
  	width: 100%;
  	transition: height 300ms, width 300ms;
  }
}

@media screen and (max-width: 500px) {
  .sidebar h1{
    font-size: 22px;
  }
}

/** Post **/
.post{
	margin-top: 10px;
	margin-bottom: 30px;
	margin-left: 40px;
	max-width: 1200px;
}

.post span{
	color: #828282;
	font-size: 18px;
}

.post .divider{
	padding: 0 4px;
}

.post .author a{
	color: #828282;
}

.post .author a:hover{
	color: rgb(0, 152, 195);
}

.post h2{
	font-weight: 400;
	font-size: 30px;
	color: #0000CD;
	padding-right: 40px;
}

.post h2 a{
	color: #0000CD;
	padding-bottom: 4px;
    border-bottom: 1px solid transparent; /* <- here */
    transition: border-bottom 300ms, color 300ms;
}

.post h2 a:hover{
	color: #000033;
	border-bottom: 2px solid #000033;
}

.post .content{
	padding: 30px;
	padding-right: 100px;
	max-width: 1200px;
	line-height: 1.5;
	font-size: 20px;
}