@charset "UTF-8";


/* sizes */

/* common. */
html {
	--header-h1-fontsize: 2.0rem;
	--header-h2-fontsize: 1.1rem;
	--header-p-fontsize: 1.0rem;
	--header-button-height: 2.0rem;
	--header-button-minwidth: 5.5rem;
	--header-button-fontsize: 1.0rem;
	--primary-corner-radius: 0.5rem;
	--link-corner-radius: 0.25rem;
}

/* increase scale from 60rem. */
@media screen and (min-width:  60rem) { html { --scale: 1.00; } }
@media screen and (min-width:  65rem) { html { --scale: 1.05; } }
@media screen and (min-width:  70rem) { html { --scale: 1.10; } }
@media screen and (min-width:  75rem) { html { --scale: 1.15; } }
@media screen and (min-width:  80rem) { html { --scale: 1.20; } }
@media screen and (min-width:  85rem) { html { --scale: 1.25; } }
@media screen and (min-width:  90rem) { html { --scale: 1.30; } }
@media screen and (min-width:  95rem) { html { --scale: 1.35; } }
@media screen and (min-width: 100rem) { html { --scale: 1.40; } }
@media screen and (min-width: 105rem) { html { --scale: 1.45; } }
@media screen and (min-width: 110rem) { html { --scale: 1.50; } }
@media screen and (min-width: 115rem) { html { --scale: 1.55; } }
@media screen and (min-width: 120rem) { html { --scale: 1.60; } }
@media screen and (min-width: 125rem) { html { --scale: 1.65; } }
@media screen and (min-width: 130rem) { html { --scale: 1.70; } }
@media screen and (min-width: 135rem) { html { --scale: 1.75; } }
@media screen and (min-width: 140rem) { html { --scale: 1.80; } }
@media screen and (min-width: 145rem) { html { --scale: 1.85; } }
@media screen and (min-width: 150rem) { html { --scale: 1.90; } }
@media screen and (min-width: 155rem) { html { --scale: 1.95; } }
@media screen and (min-width: 160rem) { html { --scale: 2.00; } }
@media screen and (min-width: 165rem) { html { --scale: 2.10; } }
@media screen and (min-width: 170rem) { html { --scale: 2.20; } }


/* light and dark themes */

/* common. */
html {
	--header-button-normal-bg: rgba(255, 255, 255, 0.5);
	--header-button-hover-bg: rgba(255, 255, 0, 0.75);
	--header-button-active-bg: yellow;
}

/* light. */
html {
	--default-text-colour: black;
	--headfoot-bg: linear-gradient(to right, #b8860b, #b448b4);
	--body-bg: #201020;
}

/* dark. */
@media (prefers-color-scheme: dark) {
	html {
		--default-text-colour: white;
		--headfoot-bg: linear-gradient(to right, #8a6408, #602060);
		--body-bg: black;
	}
}


html {
	overflow-x: hidden;
	font-family: sans-serif;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0rem;
	color: var(--default-text-colour);
	background-color: var(--body-bg);
}


/* header */

header {
	background-image: var(--headfoot-bg);
	border-radius: var(--primary-corner-radius);
}

header > h1,
header > h2,
header > p {
	text-align: center;
}

header > img {
	display: block;
	width: 120px;
	height: 120px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1.0rem;
	margin-bottom: 1.0rem;
}

header > h1, header > h2 {
	padding-left: 1.0rem;
	padding-right: 1.0rem;
}

header > h1 {
	font-size: var(--header-h1-fontsize);
}

header > h2 {
	font-size: var(--header-h2-fontsize);
}

header > p {
	font-size: var(--header-p-fontsize);
}

header > nav > ul {
	display: flex;
	justify-content: space-around;
	list-style-type: none;
	padding-inline-start: 0;
	margin-block-start: 0;
	margin-block-end: 0;
}

header > nav > ul > li > a {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	min-width: var(--header-button-minwidth);
	height: var(--header-button-height);
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	margin: 1.0rem;
	font-size: var(--header-button-fontsize);
	color: black;
	text-decoration: none;
	background-color: var(--header-button-normal-bg);
	border-radius: var(--primary-corner-radius);
}

header > nav > ul > li > a:hover {
	background-color: var(--header-button-hover-bg);
}

header > nav > ul > li > a:active {
	background-color: var(--header-button-active-bg);
}

/* increase scale from 60rem. */
@media screen and (min-width: 60rem) {
	header {
		scale: var(--scale);
		transform-origin: center center;
	}
}