@import url(colors.css);

body {
	background-color: var(--bg-color);
	font: 14px/1.5 "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: var(--main-color);
	font-weight: 400;
	margin: 0;
	overflow-x: hidden;
	font-size: 120%;
}

.main-content {
	padding: 50px;
	margin: 8px;
	overflow-x: auto;
}
@media only screen and (orientation: portrait){
	.main-content {
		padding: 1em;
		margin: 0.4em;
		overflow-x: auto;
	}
}

a {
	color: var(--subtle-tinted);
}
a:visited {
	color: var(--subtler);
}
a:hover{
	color: var(--subtle-light);
}
a:active{
	color: var(--subtle-glow);
}

p {
	margin-top: 0.3em;
	margin-bottom: 0.3em;
}

h1 {
	color: var(--title);
	margin-left: 0.5em;
	margin-right: 0.5em;
	text-shadow: 0.07em 0.07em 0.05em var(--highlights);
}
h2 {
	text-decoration: underline var(--subtle-framing) 0.05em;
}

iframe {
	border: none;
	width: 100%;
}


.centered {
	text-align: center;
}
.deco-text {
	color: var(--framing);
	font-size: xx-large;
}
.hr {
	background-color: var(--framing);
	height: 3px;
	margin: auto;
	width: 100%;
	margin-top: 1em;
	margin-bottom: 1em;
}
txt-pop {
	color: var(--highlights);
}

.mini-img {
	height: 5em;
}
.language-select {
	position: relative;
	right: 0;
	top: 0;
	display: grid;
	height: min-content;
}
/* .language-btn {
	TODO
} */
.basic-btn {
	color: var(--main-color);
	user-select: none;
	background-color: var(--secondary-bg-color);
	min-width: 3em;
	text-align: center;
	padding: 4px;
	margin: 3px;
	border: none;
	text-decoration: none;
}
.basic-btn:hover {
	color: var(--subtler);
	cursor: pointer;
}
.basic-btn:active {
	background-color: var(--secondary-bg-lowered);
	color: var(--subtle-lowered);
}
#main-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	border-top: 3px solid var(--framing);
	border-bottom: 3px solid var(--framing);
	margin: 0.7em 0em;
}

.home-btn {
	position: absolute;
	left: 0;
	top: 0;
}

.gallery-container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 2em;
}
@media only screen and (orientation: portrait){
	.gallery-container {
		grid-template-columns: 1fr;
	}
}
.gallery-img {
	width: 100%;
}
.gallery-el {
	display: inline-block;
}

/* @font-face {
  font-family: 'linja pona';
  src: url("/fonts/linja-pona-4.9.otf");
  font-weight: 400;
}
.lp {
	font-family: 'linja pona';
	text-rendering: optimizeLegibility;
  font-size: 1.39em;
	font-style: normal;
} */

@font-face {
  font-family: 'linja lipamanka';
  src: url("/fonts/linjalipamanka-normal.woff") format("woff");
}
.ll {
	font-family: 'linja lipamanka';
	text-rendering: optimizeLegibility;
  font-size: 1.2em;
	font-style: normal;
}

.svg-container {
	overflow-x: auto;
}
svg {
	fill: var(--main-color)
}

.particle {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
}

.landscape-row {
	display: grid;
	grid-template-columns: 6fr 4fr;
}

@media only screen and (orientation: portrait){
	non-portrait {
		display: none;
	}
	.landscape-row {
		grid-template-columns: 1fr;
	}
}