* {
  box-sizing: border-box;
}

body {
	margin: 0 auto;
	font-family: uni;
	letter-spacing: 1px;
	image-rendering: crisp-edges;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smooth: always;
}

h2 {
	margin: 0;
	padding: 0;
	font-family: hibiya;
}

a {
	color: blue;
}

a:hover {
	background: whitesmoke;
}

hr {
  border-bottom: none;
  border-width: 0.5px;
}

button {
	font-family: uni;
	cursor: pointer;
}

nav {
	background: white;
	padding: 2.5px;
}

footer {
	position: fixed;
	padding: 2.5px;
	top: 0;
	right: 0;
}

footer a {
	border: solid 0.5px blue;
	background: white;
	text-decoration: none;
	padding: 2.5px;
}

footer span {
	border: solid 0.5px whitesmoke;
	background: whitesmoke;
	text-decoration: none;
	padding: 2.5px;
}

.container {
	display: grid;
	grid-template-rows: auto 1fr;
	height: 100vh;
}

.container-split {
	display: grid; 
	grid-template-columns: auto 1fr; 
	height: 100%; 
	overflow: scroll;
}

.container table {
	width: 100%;
}

.box {
	align-self: center;
	justify-self: center;
	background: white;
	width: 440px;
	padding: 2.5px;
}

.title {
	color: black;
	text-decoration: none;
	margin-right: 0.5ch;
}

.current {
	color: black;
	text-decoration: none;
}

.current:hover {
	background: none;
	cursor: default;
}

.date-short { display: none; }

.date-full { display: inline; }

/* profile */

.profile-container {
	margin: 0 auto;
	align-self: center;
	width: 440px;
	max-height: 100%;
}

/* gallery */

#clicked {
	max-width: 100%; 
	max-height: 97vh;
	padding: 2.5px;
	justify-self: center;
	align-self: center;
}

.gallery-list {
   display: grid;
   align-self: start;
   grid-template-columns: repeat(4, 100px);
   max-height: 100%;
   overflow: scroll;
   padding: 2.5px;
   gap: 2.5px;
}

.thumbnail {
	width: 100px;
	height: 100px;
	object-fit: cover;
}

.thumbnail:hover {
	cursor: zoom-in;
	border: solid 0.5px blue;
}

/* project */

.project-list {
   max-height: 100%;
   overflow: scroll;
   padding: 2.5px;
   gap: 2.5px;
}

.project-list a {
	color: black;
	text-decoration: none;
}

.project-list .current {
	background: whitesmoke;
}

.project-view {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: scroll;
}

.project-view .box {
	width: 50%;
}

.mobile-nav {
	display: none;
}

span.game { color: powderblue; }

span.web { color: palegoldenrod; }

span.illust { color: pink; }

span.other { color: gainsboro; }

/* blog */

.blog-list {
   max-height: 100%;
   overflow: scroll;
   padding: 2.5px;
   gap: 2.5px;
}

.blog-list a {
	color: #9d9d9d;
	text-decoration: none;
	width: 300px;
	display: inline-block;
}

@font-face {
	font-family: "uni";
	src: url("/assets/fonts/uni.ttf");
}

@font-face {
	font-family: "hibiya";
	src: url("/assets/fonts/hibiya.ttf");
}

@media (max-width: 768px) {
	.container-split {
    	grid-template-columns: auto;
  	}

	#clicked {
		align-self: start;
		max-height: 70vh;
	}

	.gallery-list {
		display: flex;
		flex-direction: row;
		overflow-x: auto;
		gap: 5px;
		padding: 5px;
		max-height: auto;
	}

	.thumbnail {
		flex: 0 0 75px; 
		width: 75px;
		height: 75px;
	}

	.project-view .box {
		width: 100%;
	}

	.mobile-nav {
		display: block;
		position: fixed;
		background: white;
		text-align: center;
		bottom: 0;
		width: 100%;
		z-index: 100;
		padding-bottom: 7.5px;
		padding-top: 2.5px;
		text-decoration: underline;
	}
}

@media (max-width: 620px) {
	footer {
		bottom: 0;
		top: auto;
	}

	.date-short { display: inline; }

	.date-full { display: none; }

}

@media (max-width: 440px) {
	.box, .profile-container {
		width: 100%;
	}

	body {
		letter-spacing: 0px;
	}
}