/* common layout */
/* disabling user agent style (eliminate preset padding) */
* {
	margin:0;
	padding:0;
}
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

:root {
	--reve-color-violet:  rgba(196, 113, 237, .8);
	--reve-color-purple: rgba(253, 123, 253, .8);
	--reve-color-blue: rgba(15, 194, 235, .8);
	--background-color-header: #ffffff80;	/*radial-gradient(snow,  #d3cecd);*/
	--background-color-menu: linear-gradient(127deg, var(--reve-color-violet), transparent 70.71%),
							 linear-gradient(217deg, var(--reve-color-purple), transparent 70.71%), 
							 linear-gradient(336deg, var(--reve-color-blue), transparent 70.71%);
}

html {
	height: 100%;
	width: 100%;
	font-size: 62.5%;	/* 62.5% of default-size:16px -> 10px */
}

a {
	color: inherit;
	text-decoration: none;
}

/* Font-style */
body {
	position: static;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo, Osaka", "MS Pゴシック", "MS PGothic", "Fira Sans", sans-serif, serif;
	font-size: 100%;
}

/* profile style */
.profile {
	display: inline-flex;
	align-items: center;
}
.profile img {
	margin: 0 1vw;
}

/* cover layer for background */
.overlay-main {
	position: absolute;
	top: 0;
	min-width: 100%;
	min-height: 100%;
}

/* scroll bar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #fff;
  border: none;
  border-radius: 10px;
  box-shadow: inset 0 0 2px #777; 
}
::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
  box-shadow: none;
}

/* light, dark mode */
.light {
	display: unset;
}
.dark {
	display: none;
}

/* header */
header {
	/* position and size */
	position: relative;
	height: 10vh;
	/* alignment */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: space-between;
	-ms-flex-pack: space-between;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	/* layer priority */
	z-index: 10;
	/* color */
	background-color: var(--background-color-header);
}
/* overwrite profile style */
header .profile img {
	height: 10vh;
}
header .profile section.title h1 {
	font-size: 5vmin;	/* relative font-size compared to root font */
}
header .profile section.title p {
	font: normal 2.4vmin "Palatino Linotype", serif;	/* relative font-size compared to root font */
}
/* menu button */
header .button-menu {
	/* shape as circle */
	border-radius: 80%;
	text-align: center;
	width: 10vh;
	height: 10vh;
	/* font */
	font: bold 2.5vh "Fire Sans", courier;
	/* disappear outline when clicking */
	outline: none;
	/* color */
	background: var(--background-color-menu);
	border: 1px solid lightgray;
}
header .button-menu:active {
	background: lightgray;
	border: none;
}

/* navigation */
nav {
	position: absolute;
	width: 100%;
	height: 80vh;
	top: 50vh;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);	/* for Safari */
	/* animation */
	transition: opacity .5s, visibility .5s;
	/* fade out */
	opacity: 0;
	visibility: hidden;
	/* background */
	background: var(--background-color-menu-mask);
	backdrop-filter: blur(5px);
}
nav.visible {
	/* fade in */
	opacity: 1;
	visibility: visible;
}

nav.menu > * {
	position: inherit;
	height: 20vmin;
	top: 50%;
	transform: translateY(-50%);
	/* background */
	background: var(--background-color-menu);
}

nav.menu ul {
	/* no bullet icon */
    list-style: none;
}

nav.menu a {
	font-size: 5vh;
}

nav.menu a img {
	max-height: 3vh;
}

/* main */
main {
	/* height = body(window) - header - footer */
	height: calc(100vh - 10vh - (7.2em + 5px));
}

/* footer */
footer {
	position: fixed;
	width: 100%;
	bottom: 0;
	/* height = (sns + p) * i.fas  + padding-top<sns> */
	min-height: calc((2.4em + 1.6em) * 1 + 5px);
	/* color */
	background-color: var(--background-color-header);
	/* layer priority */
	z-index: 10;
}
footer p{
	text-align: right;
	font-size: 1.6em;
	margin: 0 10px;
}

div.inner ul.sns {
	list-style: none;
	font-size: 2.4em;
	padding-top: 5px;
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: space-around;
	-ms-flex-pack: space-around;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
    align-items: center;
}

i.fas, i.fab {
	color: black;
	font-size: 1em;
}

/* dark mode (setting only color or image in this section) */
@media (prefers-color-scheme: dark){
	/* change the value of the variables */
	:root {
		--background-color-header: #1f1f1f80;	/*radial-gradient(snow,  #d3cecd);*/
	}
	/* font and background color */
	body {
		color: lightgrey;
		background-color: black;
	}
	/* scrollbar */
	::-webkit-scrollbar-track {
		background: #777;
		box-shadow: inset 0 0 2px #333; 
	}
	::-webkit-scrollbar-thumb {
	  background: #ccc;
	}
	/* light, dark mode */
	.light {
		display: none;
	}
	.dark {
		display: unset;
	}

	header .button-menu {
		color: lightgray;
	}

	i.fas, i.fab {
		color: lightgray;
	}
	
}

/* adjusting to small screen size */
@media screen and (max-width: 480px) {
	nav.menu > * {
		height: 50vmin;
	}
}