/* https://terra0.org
 * mailto:info@terra0.org */

@import url("/assets/css/normalize.css");
@import url("/assets/css/fonts.css");

:root {
	--bg-color:rgb(252,254,254);
	--fg-color:rgb(24,34,34);
}

*, *::before, *::after {
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	margin:0;
	padding:0;
}

*::-moz-selection {
	background-color:var(--fg-color);
	color:var(--bg-color);
}

*::selection {
	background-color:var(--fg-color);
	color:var(--bg-color);
}

html {
	font-family:"Nitti Grotesk",monospace;
	-webkit-font-kerning:normal;
	font-kerning:normal;
	font-size:calc(1vw + 1vh + 0.5vmin);
	font-style:normal;
	font-weight:normal;
	letter-spacing:normal;
	line-height:1.3;
	margin:0 auto;
	overflow-y:auto;
	/* smooth scrolling */
	-webkit-overflow-scrolling:touch;
	/* remove highlight when clicking link */
	-webkit-tap-highlight-color:transparent;
}

body {
	-webkit-animation:init 1.5s ease-in 0.3s 1 forwards;
	animation:init 1.5s ease-in 0.3s 1 forwards;
	color:var(--fg-color);
	opacity:0;
}

a {
	color:var(--fg-color);
	cursor:-webkit-ne-resize;
	cursor:ne-resize;
	outline:none;
	text-decoration:none;
}

a:link {
	outline:none;
	text-decoration:underline;
}

a:visited {
	outline:none;
	text-decoration:line-through;
}

a:hover {
	outline:none;
	text-decoration:underline;
}

a:focus {
	outline:none;
	text-decoration:line-through;
}

a:active {
	outline:none;
	text-decoration:none;
}

em, i {
	font-style:italic;
}

strong {
	font-weight:bold;
}

ul {
	list-style-type:none;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, pre {
	font-size:inherit;
	line-height:inherit;
	margin-top:0;
	margin-left:0;
	margin-right:0;
	margin-bottom:1.5rem;
}

h2 {
	font-size:1rem;
	margin-bottom:0.75rem;
}

header {
	position:absolute;
	top:50%;
	left:50%;
	margin-right:-50%;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	min-height:100vh;
}

footer {
	background-color:var(--bg-color);
	font-weight:bold;
	padding:0 1.5rem;
	overflow:auto;
	white-space:nowrap;
}

a:link[href*="//"]:not([href*="//terra0.org"]):not(.without-underline)::after,
a:link[href^="mailto:"]:not(.without-underline)::after,
a:link[href^="tel:"]:not(.without-underline)::after {
	content:"↗";
	/* remove a:link text-decoration */
	display:inline-block;
	font-size:0.80rem;
	margin-right:-0.07rem;
	position:relative;
	left:0.03rem;
	/* align smaller text with cap-height */
	vertical-align:top;
}

img[alt=""],
img:not([alt]) {
	border:3px dashed rgb(255,0,0);
}

main {
	margin-top:100vh;
}

main figure img,
main figure video {
	max-height:100%;
	max-height:calc(100vh - 4.7rem);
	max-width:100%;
}

main figure#error {
	position:absolute;
	top:50%;
	left:50%;
	margin-right:-50%;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	z-index:-1;
}

main figure#error img.error {
	max-height:100%;
	max-height:80vh;
	max-width:100%;
	max-width:80vw;
}

main p a:link {
	text-decoration:underline;
}

main div.quote {
	color:var(--bg-color);
	background-color:var(--fg-color);
	min-height:35vh;
	padding:1.5rem;
}

main div.quote > p {
	margin-bottom:0;
	position:relative;
	top:calc((35vh / 2) - 1.75rem);
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}

main section {
	padding-left:1.5rem;
	padding-right:1.5rem;
	padding-bottom:1.5rem;
}

main section:nth-of-type(odd) {
	color:var(--bg-color);
	font-size:6rem;
	font-weight:bold;
	line-height:0.95;
	min-height:100vh;
	padding-top:1.5rem;
	word-wrap:break-word;
	-webkit-hyphens:auto;
	-moz-hyphens:auto;
	-ms-hyphens:auto;
	hyphens:auto;
}

main section:nth-of-type(odd) > p {
	margin-bottom:0;
	position:relative;
	top:calc(50vh - 1.5rem);
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}

main section:nth-of-type(even) > p:not(:last-of-type) {
	margin-bottom:0.5rem;
}

main section:nth-of-type(even) > p:last-of-type {
	margin-bottom:0;
}

main section:nth-of-type(even) {
	background-color:var(--bg-color);
	padding-top:1.5rem;
}

main section:nth-of-type(even):not(:last-of-type) {
	min-height:65vh;
}

video#background {
	min-height:100vh;
	min-width:100vw;
	position:fixed;
	left:0;
	top:0;
	z-index:-2;
}

div#overlay {
	background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAL0lEQVQI12NgYPMwZtCQSGAQYjRnYGYQD+Lll5/PrM2SxMDFwGBsyMCcwMXGaA4AVaQEX4ndGzcAAAAASUVORK5CYII=);
	background-repeat:repeat;
	opacity:0.8;
	min-height:100vh;
	min-width:100vw;
	position:fixed;
	left:0;
	top:0;
	z-index:-1;
}

#logo {
	margin:0 auto;
	margin-top:calc(50vh - 22.5vmin);
	width:42vmin;
}

footer > p {
	float:left;
}

#projects > .grid {
	grid-gap:1.5rem;
}

#projects > .grid > ul > li:first-of-type {
	font-weight:bold;
}

#projects > h2 {
	display:none;
}

#projects > ul#press > li {
	display:inline;
}

#projects > ul#press > li > a:link {
	text-decoration:underline;
}

#projects > ul#press > li:first-of-type {
	font-weight:bold;
}

#projects > ul#press > li:not(:first-of-type):not(:last-of-type)::after {
	content:",\00a0";
}

#team,
#team a {
	color:var(--bg-color);
	background-color:var(--fg-color);
}

#team > #links {
	white-space:nowrap;
}

#team > #links > ul {
	margin-bottom:0;
}

#links > h2 {
	display:none;
}

#links > ul li {
	display:inline-block;
}

#links > ul li:not(:last-of-type) {
	margin-right:1.5rem;
}

.grid {
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(33.3333%,1fr));
	margin-left:35vw;
	width:calc(65vw - 3rem);
}

.without-underline,
.without-underline:link {
	text-decoration:none;
}

@-webkit-keyframes init {
	from {
		opacity:0;
	}
	to {
		opacity:1;
	}
}

@keyframes init {
	from {
		opacity:0;
	}
	to {
		opacity:1;
	}
}

@media (max-width:40em) {
	div.quote,
	main section:nth-of-type(even),
	main section:nth-of-type(even) > h2 {
		font-size:1.6rem;
	}
	.grid {
		grid-template-columns:repeat(auto-fit,minmax(50%,1fr));
		margin-left:0;
		margin-bottom:1.5rem;
		width:calc(100vw - 3rem);
	}
}

@media (min-width:40em) {
	main div.quote > p {
		width:30vw;
	}
	#team > h2,
	main section:nth-of-type(even):not(:last-of-type) > * {
		margin-left:35vw;
		width:calc(65vw - 3.5rem);
	}
}

@media (min-width:60em) {
	main section:nth-of-type(odd) {
		font-size:6rem;
		margin-left:35vw;
		width:calc(65vw - 3rem);
	}
}