pre {
    white-space:pre-wrap !important;
    word-wrap:break-word !important;
}

#content > .side#right {
	width: 68%;
}

#content > .side#right > .title-area {
    xborder: 1px solid black;
    border-radius:5px;
	font-size: 25px;
    padding:15px;
    padding-right:25px;
    margin-bottom:5px;
	background:#22262a;
    display:inline-block;
	position: relative;
}

.side#right > .title-area > .category-title {
    color: #47d18c;
    font-weight: 300;
}

.side#right > .title-area > .snippet-title {
    color: #c6d2c8; /* e49967  c6d2c8*/
    font-weight: 300;
}

.side#right > .title-area > .snippet-tooltip  {
	position: absolute;
	visibility: hidden;
	opacity: 0;
	xdisplay: inline;
	background-color: rgba(0, 170, 187, 0.8);
	color: #fff;
	xtext-shadow: 0px 0px 5px black;
	font-weight: 300;
	font-size: 15px;
	text-align: center;
	padding: 8px 15px;
	border-radius: 3px;
	margin-top: -10px;
	margin-left: -50px;
	z-index: 1;
	transition: opacity 0.2s, margin-top 0.2s;
	width: 400px;
}

.side#right > .title-area > .snippet-tooltip:after { /* add speech bubble arrow on bottom of tooltip */
	content: '';
	position: absolute;
	top: 0;
	left: 10%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-bottom-color: rgba(0, 170, 187, 0.8);
	border-top: 0;
	margin-left: -20px;
	margin-top: -20px;	
}

.side#right > .title-area:hover .snippet-tooltip {
	visibility: visible;
	opacity:1;
	margin-top:50px;
	margin-left: -90%;
}

#content > .side#right > #code-area {
    background:#22262a;
}

#content > .side#right > #code-area > code {	
	padding:5px;
    background-color: rgba(0,0,0,0.3);
}

@media (max-width: 600px){

	.side#right {
		width: 100vw;
	}
}