@import "normalize.less";

@linkColor: #63c900;

.title {
    text-transform: capitalize;
}
::selection {
    background-color: #dc143c;
    text-shadow: none;
    color: #fff;
}

html{
    width: 100%;


    body {
	text-align: center;
	font-family: 'Noto Serif', serif;

	div#header{
	    border-bottom: double #ddd;
	    padding: 10px 0;
	    opacity: 0.9;
	    
	    ul {
		min-width: 55%;
		max-width: 650px;
		margin: 0 auto;
		text-align: left;

		li {
		    display: inline-block;
		    margin: 0 2%;

		    a {
			color: @linkColor;
			font-size: 16px;
			text-shadow: 0 0 1px;
			.title();
		    }
		}
	    }
	}
	div#wrapper{
	    width: 100%;
	    border-top: 1px solid #eee;
	    border-bottom: 1px solid #eee;
	    margin: 0 auto;
	    margin-top: 3%;

	    div#inner-wrapper {
		min-width: 50%;
		max-width: 650px;
		margin: 0 auto;
		text-align: left;

		div#main {
		    display: inline-block;
		    padding: 10px 5px;
		    padding:1% 1px;
		    width: 80%;
		    border-right: 1px solid #eee;
		    padding-bottom: 10%;

		    small {
			margin-left: 1%;
		    }

		    a {
			color: @linkColor;
		    }

		    // post 
		    .meta {
			border-top: thin solid #eee;
			border-bottom: thin solid #eee;
			margin-top: 2%;
		    }

		    .body {
			margin-top: 5%;
		    }

		    .tags {
			margin-top: 10%;
			border-top: double #eee;
			border-bottom: double #eee;
		    }
		}

		div#sidebar {
		    display: inline-block;
		    vertical-align: top;
		    width: 19%;
		    box-sizing: border-box;

		    h2 {
			margin-top: 5%;
			margin-left: 8%;
		    }

		    .sidebar-tags {
			margin-left: 20%;

			li {
			    margin-left: 10%;
			    list-style-type: square;
			    a {
				color: @linkColor;
			    }
			}
		    }
		}
	    }
	}

	div#footer{
	    padding-top: 1%;
	    a {
		color: @linkColor;
	    }
	}
    }
}