@import "/~yosh/style/fonts.css";

html {
	background-image: url("bg.webp");
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
}

body {
	font-family: ToshibaTxL1 !important;
	text-size-adjust: none !important;
	-webkit-text-size-adjust: none !important;
	-webkit-font-smoothing: none !important;
	-moz-osx-font-smoothing: grayscale !important;
	font-smooth: never !important;
	color: #f9f5e9;
	text-shadow: 1px 1px #67526a;
	margin: 0;
	padding: 0 16px;
	max-width: 1440px;
}

main {
	display: grid;
	grid-template:
		"a b c" auto
		"g g c" auto
		"z z z" auto
		/
		minmax(300px, 500px)
		minmax(300px, 1fr)
		minmax(200px, 400px);
	gap: 16px
}

section {
	font-size: 16px;
}

aside {
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	padding: 0px 8px;

	display: flex;
	justify-content: center;
}

img {
	object-fit: contain;
	width: 100%;
	margin: 16px 0;
}

h1, h2 {
	font-size: 32px;
	font-weight: normal;
	text-shadow: 2px 2px #7b569d;
	color: #d2a1fe;
	margin: 16px 0;
}

a {
	color: #8ce4ed;
}

a:visited {
	color: #d2a1fe;
}

.right {
	text-align: right;
}
.left {
	text-align: left;
}

#imgs {
	margin: 16px 0;
}

#imgs img {
	max-width: 400px;
}

#imgs figure {
	margin: 16px;
}

hr {
	border-width: 1px 0;
	border-color: #c7acc5;
	border-style: solid;
}

#gallery {
	grid-area: g;
}

#img-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

#img-grid > * {
	border-top: 1px solid white;
	padding-top: 8px;
}

#img-grid figure {
	margin: 0;
}

/*
@media screen and (max-width: 840px) {
	main {
		grid-template-columns: 1fr 1fr;
	}

	imgs {
		text-align: right !important;
	}
}
*/