@font-face{
	font-family: 'Oswald';
	src: url('fonts/oswald.ttf');
	font-weight:200;
}
@font-face{
	font-family: 'Oswald';
	src: url('fonts/oswaldBold.ttf');
	font-weight:400;
}

body{
	margin:0;
	overflow-x:hidden;
	font-family:'Oswald','Arial';
	font-weight:200;
	font-size:0.9em;
	color:#1A1D1E;
	background: #FFF url('img/bg_light.png') right top no-repeat fixed;
	transition: background-color 0.25s;
}
a{
	text-decoration: none;
	color:#309DDC;
	transition: color 0.5s;
}
a:hover{
	color:#1A1D1E;
}
hr{
	border-color: #F3F3F3;
    border-width: 0 0 1px;
}
.italic{
	font-style:italic;
}
.striked{
	text-decoration:line-through;
}

.wrapper{
	width:960px;
	margin:0 auto;
}

.site-header{
	padding:55px 0 5px;
}

/* Site navigation */

.site-navigation, .site-footer{
	border-top: 1px solid #1A1D1E;
	border-bottom:3px solid #1A1D1E;
	font-size:12pt;
}
.site-navigation{
	position:sticky;
	z-index:3;
	top:0;
	background-color:rgba(255,255,255,0.5);
}
.site-footer{
	position: relative;
	z-index:3;
	background-color:rgba(255,255,255,0.85);
}
.site-navigation ul, .site-footer ul{
	display:inline-block;
	margin:0;
	padding:0;
}
.site-navigation li, .site-footer li{
	list-style:none;
	display:inline-block;
}
.nav-item{
	padding-right:15px;
}
.nav-item a{
	display:inline-block;
	padding: 15px 15px 13px 0;
	text-decoration: none;
	color:#1A1D1E;
}
.nav-item span{
	color:#BFBFBF;
}
.site-navigation li a:hover,.site-navigation li.current a{
	text-decoration: none;
	color:#309DDC;
}

.site-navigation .logos{
	float: right;
	margin-top:11px;
}
.site-navigation .logos a{
	display:inline-block;
	width:32px;
	height:32px;
	border-radius:5px;
	background-color:#D0D1D2;
	transition: background-color 0.2s;
	background-repeat: no-repeat;
	background-position: center;
}
.site-navigation .logos a:hover{
	background-color:#1A1D1E;
}
.site-navigation .logos #x a{
	background-image: url('img/logo_x.png');
}
.site-navigation .logos #pixiv a{
	background-image: url('img/logo_pixiv.png');
}
.site-navigation .logos #theme a{
	background-image: url('img/logo_dark.png');
}

/* Site navigation ends */

h1{
	font-weight:200;
	margin:0;
	border-bottom:1px solid #F3F3F3;
}
.site-main{
	overflow:hidden;
	width:100%;
	padding-top:40px;
}

.site-footer {
	clear:both;
}
.site-footer a, .site-footer span{
	opacity:0.5;
	transition: opacity 0.5s;
}
.site-footer li a:hover,.site-footer li.current a{
	text-decoration: none;
	opacity:0.75;
}

/* Home specific */
.site-home{
	width:960px;
	margin:0 auto;
	position: relative;
	z-index:2;
}
.shade{
	width:1109px;
	height:799px;
	position:absolute;
	top:-85px;
	left:-70px;
	z-index:1;
	background:url('img/home_shadow.png') no-repeat
}
.home-grid{
	display: grid;
	grid-template-areas:"text mini1 featured""mini3 mini2 featured";
	grid-gap:10px;
	position:relative;
	z-index:2;
	margin-bottom:50px;
}
.home-text{
	grid-area: text;
	width:316px;
}
.home-text p{
	padding-bottom:0;
	margin-top:15px;
	font-size:16pt;
}
.home-text a{
	display:block;
	width:180px;
	margin-top:30px;
	padding:11px 60px 12px 60px;
	font-size:16pt;
	font-weight:400;
	color:#FFF;
	text-decoration: none;
	transition:background-image 0.25s ease-in-out;
	background-repeat:no-repeat;
}
.more{
	margin-right:15px;
	background-image:url('img/btn_more_light.png');
}
.more:hover{
	background-image:url('img/btn_more_light_hover.png');
}
.comm{
	margin-left:15px;
	background-image:url('img/btn_comm_light.png');
}
.comm:hover{
	background-image:url('img/btn_comm_light_hover.png');
}
#mini-pic1{
	grid-area: mini1;
}
#mini-pic2{
	grid-area: mini2;
}
#mini-pic3{
	grid-area: mini3;
}
.home-pic{
	border-radius:15px;
	overflow:hidden;
	box-shadow:0 0 6px rgba(0,0,0,0.25);
	cursor:pointer;
}
#mini-pic1, #featured{
	margin-top:11px;
}
#featured{
	grid-area: featured;
	width:420px;
	height:595px;
}
.mini{
	width:206px;
	height:292px;
}
.home-pic img{
	position:relative;
	width:100%;
	top:0;
	left:0;
	display:block;
	transition-property:width, top, left;
	transition-duration: 0.25s;
}
.home-pic img:hover{
	width:112%;
	top:-6%;
	left:-6%;
}
.mini.last{
	margin: 0 0 0 auto;
}

/* Portfolio */
.site-portfolio{
	padding-bottom:40px;
}
.site-portfolio .illustration{
	width:32%;
	float:left;
	border-radius:15px;
	margin-right:1%;
	margin-bottom:1%;
	overflow:hidden;
	box-shadow:2px 2px 6px rgba(0,0,0,0.25);
	cursor:pointer;
}
.site-portfolio .landscape{
	width:65%;
}
.site-portfolio .illustration img{
	position:relative;
	width:100%;
	top:0;
	left:0;
	display:block;
	transition-property:width, top, left;
	transition-duration: 0.25s;
}

.site-portfolio .illustration img:hover{
	width:112%;
	top:-6%;
	left:-6%;
}
.clear{
	clear:both;
}

/* Commission page */
.site-commission{
	padding-bottom:40px;
}
.site-commission h1{
}
h2{
	display: block;
    font-size: 1.2rem;
	font-weight: 400;
    border-bottom: 1px solid #F3F3F3;
}
.site-commission h2.updated{
    border-bottom: none;
}
h3{
	display: block;
    font-size: 1.1rem;
	font-weight: 200;
    border-bottom: 1px dotted #F3F3F3;
}
.site-commission .thumbnail{
	width:15%;
	float:left;
	border-radius:10px;
	margin-right:1%;
	margin-bottom:1%;
	overflow:hidden;
	box-shadow:1px 1px 3px rgba(0,0,0,0.33);
	cursor:pointer;
}
.site-commission .thumbnail img{
	position:relative;
	width:100%;
	top:0;
	left:0;
	display:block;
	transition-property:width, top, left;
	transition-duration: 0.25s;
}

.site-commission .thumbnail img:hover{
	width:112%;
	top:-6%;
	left:-6%;
}
.thumbGrid{
	margin-bottom:40px;
}
h2{
	margin-top:40px;
}

/* Dark theme */
body.dark{
	color:#FFF;
	background: #1A1D1E url('img/bg_dark.png')right top no-repeat fixed;
}
.dark a:hover{
	color:#FFF;
}
.dark .site-navigation, .dark .site-footer{
	border-top: 1px solid #FFF;
	border-bottom:3px solid #FFF;
}
.dark .site-navigation{
	background-color:rgba(26,29,30,0.5);
}
.dark .nav-item a{
	color:#FFF;
}
.dark .site-navigation .logos a{
	background-color:#656565;
}
.dark .site-navigation .logos a:hover{
	background-color:#D0D1D2;
}
.dark .site-navigation .logos #theme a{
	background-image: url('img/logo_light.png');
}
.dark h1, .dark h2{
	border-bottom: 1px solid #272B2E;
}
.dark h3{
	border-bottom: 1px dotted #272B2E;
}
.dark .more{
	background-image:url('img/btn_more_dark.png');
}
.dark .comm{
	background-image:url('img/btn_comm_dark.png');
	background-repeat:no-repeat;


}
.dark .more:hover{
	background-image:url('img/btn_more_dark_hover.png');
}
.dark .comm:hover{
	background-image:url('img/btn_comm_dark_hover.png');
}
.dark .site-footer{
	background-color:rgba(26,29,30,0.85);
}
.dark .site-portfolio .illustration{
	box-shadow:2px 2px 6px rgba(0,0,0,0.85);
}
.dark .home-pic{
	box-shadow:0 0 6px rgba(0,0,0,0.85);
}
.dark .site-commission .thumbnail{
	box-shadow:1px 1px 3px rgba(0,0,0,0.90);
}

/* Image zoom overlay */
#zoom-overlay{
	display:none;
	opacity:0;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:5;
	background:rgba(0,0,0,0.5);
	transition:opacity 0.5s;
	cursor:pointer;
}
#illust-zoom{
	display:block;
	margin:3% auto;
	height:92%;
	border-radius:5%;
}

/* Responsive display */
@media screen and (max-width: 960px){
	.wrapper, .site-main .site-home{
		width:98%;
	}
	.home-grid{
		grid-template-areas:"text text text""featured featured featured""mini3 mini2 mini1";
	}
	.home-text{
		width:100%;
	}
	.home-text a{
		display:inline-block;
	}
	.site-home #featured{
		width:100%;
	}
	.site-home #mini-pic1{
		margin-top:0;
	}
	.site-home .mini{
		width:100%;
	}
}

@media screen and (max-width: 650px){
	.site-home .mini{
		height:220px;
	}
	.site-commission .thumbnail{
		width:24%;
	}

@media screen and (max-width: 520px){
	body{
		background-size:100%;
	}
	.site-home .mini{
		height:180px;
	}
	.nav-item, .nav-item a{
		padding-right:0.5em
	}
}