/* HTML Reset Stylesheet        *
 * Copyright 2008-2017 Levi Aho *
 * All Rights Reserved          */

* {
	/* Sensible Defaults */
	padding: 0;
	margin: 0;
	background: transparent;
	border: none;
	list-style: none;
	white-space: normal;
	/* Inheritance */
	color: inherit;
	font-family: inherit;
	font-weight: inherit;
	font-size: inherit;
	font-style: inherit;
	text-decoration: inherit;
	text-align: inherit;
	vertical-align: inherit;
	/* experimental */
	box-sizing: border-box;
}

table { border-spacing: 0; }

html {
	font-size: 100%;
	line-height: 120%;
	font-weight: normal;
	text-align: left;
	vertical-align: baseline;
}

/* Hex Nav Stylesheet       *
 * Copyright 2018 Leola Aho *
 * All Rights Reserved      */

/* custom combined font */

@font-face {
	font-family: 'Messy';
	src: url('1942.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	unicode-range: U+00-FF;
}

@font-face {
	font-family: 'Messy';
	src: url('kouzan-mouhitsu.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	unicode-range: U+68CB,U+6B21;
}

/* basics */

html {
	color: black;
	height: 100%;
	background: pink url('pink-fractal-landscape.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-family: 'Messy', serif;
	letter-spacing: -0.5em;
}

h1 {
	font-size: 10vw;
	line-height: 10vw;
	color: hsl(336, 100%, 30%);
	position: absolute;
	top: 2vmin;
	left: 3vmin;
	transform: rotate(-10deg);
}

/* hex button array nav */

nav {
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(10, 8.3333vmin);
	grid-template-rows: repeat(6, 14.4338vmin);
	width: 83.3333vmin;
}

nav a {
	display: block;
	text-align: center;
	font-size: 7vmin;
	
	/* hex height = H = sqrt(3) ÷ 2 */
	/* width: 32.3333vmin; /* 33.3333 - 2 × 0.5 gutters */
	/* height: 27.7128vmin; /* 33.3333 × H - 2 × 1 / sqrt(3) gutters */
	
	width: 32.1786vmin; /* 33.333 - 2 × 1/sqrt(3) gutters */
	height: 27.8675vmin; /* 33.3333 × H - 2 × 0.5 gutters */
	line-height: 27.8675vmin; /* ditto */
	margin: 0.5vmin 0.5773vmin;
	
	clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
	color: hsl(336, 100%, 50%);
	background: hsla(336, 0%, 100%, 0.75);
}

nav a:hover {
	color: white;
	background: hsla(336, 100%, 50%, 0.25);
}

.disabled, .disabled:hover { color: grey; }

/*
nav a:active {
	width: 34.3333vmin;
	height: 29.8675vmin;
	line-height: 29.8675vmin;
	margin: -0.5vmin
}

nav a.small:active {
	width: 16.6667vmin;
	height: 14.4338vmin;
	line-height: 13.4338vmin;
	margin: 0.5vmin;
}
*/

nav a:nth-child(1) { grid-row: 1; grid-column: 4; }
nav a:nth-child(2) { grid-row: 4; grid-column: 1; }
nav a:nth-child(3) { grid-row: 3; grid-column: 4; }
nav a:nth-child(4) { grid-row: 5; grid-column: 4; }
nav a:nth-child(5) { grid-row: 4; grid-column: 7; }
nav a:nth-child(6) { grid-row: 2; grid-column: 7; }
nav a:nth-child(7) { grid-row: 2; grid-column: 1; }

/* extras */

nav a:nth-child(8) {
	grid-row: 6; grid-column: 1;
	margin-left: 13.0774vmin; /* 12.5 offset + gutter */
}
nav a:nth-child(9) {
	grid-row: 6; grid-column: 7;
	margin-left: 4.7440vmin; /* 4.1667 offset + gutter */
}
nav a.small:nth-child(10) {
	grid-row: 4; grid-column: 10;
	
	width: 11.3453vmin;
	height: 9.8253vmin;
	line-height: 9.8253vmin;
	margin-left: 2.6607vmin;
	
	clip-path: polygon(83.333% 0, 100% 33.333%, 66.667% 100%,
		33.333% 100%, 0 33.333%, 16.667% 0);
}

nav a.small {
	font-size: 5vmin;
	width: 15.5120vmin; /* halfsize - gutters */
	height: 13.4338vmin; /* ditto */
	line-height: 13.4338vmin;
}

/* use larger text on kanji nav buttons */

nav a.kanji { font-size: 14vmin; }
nav a.small.kanji { font-size: 7vmin; }

/* truncated triangle profile picture */

#profile {
	width: 49vmin; /* 50 - 0.5 × 2 gutters */
	height: 42.3013vmin; /* 50 × H - gutters */
	grid-row: 1;
	clip-path: polygon(66.667% 0, 100% 66.667%, 83.333% 100%,
		16.667% 100%, 0 66.667%, 33.333% 0);
}

#profile img { width: 100%; }