AtoZ 時々 鬱な日記


<header>
	<h1>
		<a href="#">
			AtoZ
				<strong>
				時々 鬱な日記</strong>
		</a>
	</h1>
</header>


body{
	width:100vw;
	padding:0;
	margin:0;
	color:#000;
	background-size:25%!important;
	font-family: -apple-system, BlinkMacSystemFont,BlinkMacSystemFont,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Lucida Grande","Lucida Sans",sans-serif;
	}
h1{
	text-indent:-9999px;
	font-size:12em;
	line-height:1.8em;
	border-radius:.4em;
	box-shadow:0 .1em .12em rgba(0,0,0,.3);
	text-align:center;
	height:2.2em;
	width:2.2em;
	background:#ffdd00;
	background:#f2f2f2;
	letter-spacing:-.05em;
	text-indent:-.05em;
	border-top:.015em solid rgba(255,255,255,.5);
	border-left:.015em solid rgba(255,255,255,.5);
	border-bottom:.015em solid rgba(0,0,0,.15);
	border-right:.015em solid rgba(0,0,0,.15);
	position:relative;
}
h1 a{
	text-indent:-9999px;
	display:block;
	width:100%;
	height:100%;
	text-decoration:none;
	position:absolute;
	padding:.25em;
	z-index:3;
	top:-.125em;
	left:-.125em;
}
h1 span{
	display:block;
	text-indent:-9999px;
}
h1:before{
	content:'design';
	display:block;
	font-size:35%;
	position:relative;
	z-index:2;
	top:1.8em;
	letter-spacing:0;
}
h1:after{
	content:'Y38';
	border-radius:.3em;
	display:block;
	width:2em;
	height:2em;
	line-height:1.7em;
	background:#ffdd00;
	position:absolute;
	top:.075em;
	left:.075em;
	border-top:.015em solid rgba(255,255,255,.5);
	border-left:.015em solid rgba(255,255,255,.5);
	border-bottom:.015em solid rgba(0,0,0,.15);
	border-right:.015em solid rgba(0,0,0,.15);
	box-shadow:0 .1em .1em rgba(0,0,0,.4);
}