@font-face {
	font-family: 'Pacifico';
	src: url('/font/Pacifico-Regular.ttf');
}   

@font-face {
	font-family: 'Srisakdi-Regular';
	src: url('/font/Srisakdi-Regular.ttf');
}   

@font-face {
	font-family: 'Lacquer';
	src: url('/font/Lacquer-Regular.ttf');
}   

@font-face {
	font-family: 'AtkinsonHyperlegible';
	src: url('/font/AtkinsonHyperlegible-Regular.ttf');
}   

@font-face {
	font-family: 'NotoSerif';
	src: url('/font/NotoSerif-VariableFont_wdth,wght.ttf');
}

@font-face {
	font-family: 'NotoSans-JP';
	src: url('/font/NotoSansJP-VariableFont_wght.ttf');
}

.jp-font {
	font-family: "NotoSans-JP";
}

body {
	background-image: url("/img/background.png");
	background-repeat: repeat;

	background-color: black;
	margin: 0;
}

header {
	width: 80%;
	margin: auto;
	padding: 0 20px;

	background-color: #1b0836;

	border-style: double;
	border-color: #ffbdf5;
	border-width: 5px;
}

header ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;

	display: flex;
}

header ul li a {
	display: block;
	text-align: center;

	padding: 10px 10px;

	text-decoration: none;

	color: #ffbdf5;

	font-family: "Pacifico";
	font-weight: 800;
	font-size: 2rem;
}

article {
	width: 80%;
	margin: auto;
	padding: 20px;

	border-style: double;
	border-color: #ffbdf5;
	border-width: 5px;

	background-color: #1b0836;
}

h1 {
	font-family: "NotoSerif";
	font-weight: 800;
	font-size: 2rem;
	margin: 0;

	color: #ffbdf5;
}

h3 {
	font-family: "NotoSerif";
	font-weight: 800;
	font-size: 1.1rem;

	color: #ffbdf5;
}

h5 {
	font-family: "NotoSerif";
	font-weight: 800;
	font-size: 0.8rem;
	margin: 0;

	color: #ffbdf5;
}

p, a {
	font-family: "NotoSerif";
	font-weight: 400;
	font-size: 1rem;

	color: #ffbdf5;
}

.album_tile {
	display: flex;

	border: 1px solid grey;
	padding: 5px;
	margin: 4px;
}

.album_tile h3 {
	margin: 0;
}

.album_tile .left {
	flex: 25%;
}

.album_tile .right {
	flex: 75%;

	padding-left: 10px;
}

.album_tile img {
	max-width: 300px;
	display: block;
	
	margin: auto;
}

@media(max-width: 768px){
	.album_tile {
		flex-direction: column;
	}

	.album_tile .left {
		flex: 100%;
	}

	.album_tile .right {
		flex: 100%;
	}

	.album_tile img {
		width: 100%;
	}
}

.dual_image::after {
  content: "";
  clear: both;
  display: table;
}

.dual_image div {
	float: left;
	max-width: calc(50% - 20px);

	border: 1px solid grey;
	padding: 5px;
	margin: 4px;
}

.dual_image div img {
	width: 100%;
	object-fit: contain;
}

.signature {
	font-family: "Srisakdi-Regular";
	font-weight: 800;
	font-size: 3rem;
	margin: 0;
}