@charset "UTF-8";
/* edited on 31-JAN-26 by mrx */

@import url("../fonts/playfair-display-v21/css/playfair-display-v21.css");
@import url('../fonts/fontawesome-5.15.4/css/all.css');

/* ----- variables ----- */

:root {
	--background-color: #ff8000;
	--deep-background-color: #191919;
	--font-awesome: 'Font Awesome 5 Free';
	--font-family: 'Playfair Display', serif;
	--font-size: var(--font-size-base);
	--font-size-base: 1.66667vmax; /* for device dependent calculation */
	--font-weight: 400;
	--link-color: #ff0099;
	--link-color-hover: #807060;
	--line-height: 1.33333;
	--safe-area: 2.0vmax;
	--signal-color: #ff00ff;
	--text-color: #ffffff;
}

/* ----- website style ----- */

html { /* foundation */
	background-color: var(--deep-background-color);
	color: var(--text-color);
	font: var(--font-weight) var(--font-size) / var(--line-height) var(--font-family);
	height: -webkit-fill-available;
	hyphens: manual;
	-webkit-text-size-adjust: 100%;
}

body { /* the content */
	background-color: var(--background-color);
	min-height: 100vh;
	min-height: -webkit-fill-available;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

header {
	background-color: var(--signal-color); /* TODO(mrx): change to proper colour or remove this line */
}

nav {
	background-color: var(--signal-color); /* TODO(mrx): change to proper colour or remove this line */
}

main { /* TODO(mrx): check @media too */
	border: var(--background-color) solid 1px; /* HACK */
}

section {
	margin: var(--safe-area) calc(2 * var(--safe-area)) ;
}

article {
	text-align: justify;
}

footer {
	margin-top: calc(2 * var(--safe-area));
	padding-bottom: var(--safe-area);
}

/* ----- elements ----- */

* { /* reset all elements */
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

a {
	color: var(--link-color);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--link-color-hover);
	font-weight: 600;
}

a:active {
	color: var(--link-color-hover);
	font-weight: 800;
}

a .logo {
	margin: calc(4 * var(--safe-area)) calc(2 * var(--safe-area)) calc(2 * var(--safe-area));
}

/* ----- classes ----- */

.columns {
	columns: 2 320px;
	column-gap: calc(3.0 * var(--safe-area));
	column-rule: 0.16667vmax dotted var(--text-color-caption);
	margin: 0 var(--safe-area) 0 var(--safe-area);
}

.half-line-margin-after-paragraph {
	margin-bottom: 0.5rem;
}

.indention {
	text-indent: var(--safe-area);
}

.logo {
	width: calc(33.33333vmax);
}

.tab {
    padding-left: calc(2 * var(--safe-area));
}

.text-align-center {
	text-align: center;
}

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

/* ----- media queries ----- */

@media	only screen and (max-height: 480px), /* simulate mobile safari [landscape] on desktop */
		only screen and (max-width: 480px), /* simulate mobile safari [portrait] on desktop */
		only screen and (max-device-width: 480px) {

	:root {
		--font-size: calc(1.33333 * var(--font-size-base));
	}

	.not-on-mobile {
		display: none;
	}

}

@media	only screen and (max-height: 480px), /* simulate mobile safari [landscape] on desktop */
		only screen and (max-device-width: 480px) and (orientation: landscape) {

	main {
		margin-left: calc(env(safe-area-inset-left) - 2.66667vmax);
		margin-right: calc(env(safe-area-inset-right) - 2.66667vmax);
	}

	.not-in-landscape {
		display: none;
	}

}

@media	only screen and (max-width: 480px) and (orientation: portrait), /* simulate mobile safari [portrait] on desktop */
		only screen and (max-device-width: 480px) and (orientation: portrait) {

	.not-in-portrait {
		display: none;
	}

}