/*
Theme Name: Avaruus.Space
Description: Avaruus.Space
Author: AvaruusOlio
Theme URI: https://avaruus.space
Author URI: https://avaruus.space
Version: 1.0
-----------------------------------------------------------------------------*/

@font-face {
    font-family: "nasalization";
    src: url("../fonts/nasalization.woff2") format("woff2");
    font-display: auto;
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
}

@font-face {

	font-family: "work-sans";
	src: url("../fonts/work_sans.woff2") format("woff2");
	font-style: normal;
	font-weight: 400;
	font-stretch: normal;
}

@font-face {

	font-family: "work-sans";
	src: url("../fonts/work_sans_bold.woff2") format("woff2");
	font-display: auto;
	font-style: normal;
	font-weight: 700;
	font-stretch: normal;
}

@font-face {

  font-family: "work-sans";
  src: url("../fonts/work_sans_medium.woff2") format("woff2");
  font-display: auto;
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
}

@font-face {

  font-family: "work-sans";
  src: url("../fonts/work_sans_semibold.woff2") format("woff2");
  font-display: auto;
  font-style: normal;
  font-weight: 600;
  font-stretch: normal;
}

@font-face {

  font-family: "work-sans";
  src: url("../fonts/work_sans_extrabold.woff2") format("woff2");
  font-display: auto;
  font-style: normal;
  font-weight: 800;
  font-stretch: normal;
}

@font-face {

  font-family: "work-sans";
  src: url("../fonts/work_sans_black.woff2") format("woff2");
  font-display: auto;
  font-style: normal;
  font-weight: 900;
  font-stretch: normal;
}

*, *::before, *::after {

	box-sizing: border-box;
}

html, body, h1, h2, h3, h4, h5, p, ul, ol, li, figure, header, section, figcaption, footer, blockquote {

	margin: 0;
	padding: 0;
}

ul, ol {

	list-style: none;
}

b, strong {

	font-weight: 700;
}

html {

  --dark: #2D2D2C;
  --light: #e1e1e1;
  --white: #fff;
	--gold: #f6c44b;
	--content-width: 88.5rem;
	--content-padding: clamp(1rem, 5vw, 2rem);
	--font-header: "nasalization", -apple-system, BlinkMacSystemFont, sans-serif;;
	--font-text: "work-sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

html, body {

	scroll-behavior: smooth;
}

body {

	-ms-touch-action: manipulation;
	touch-action: manipulation;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	text-rendering: optimizeSpeed;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1;
	font-size: 16px;
	background: var(--dark);
	color: var(--light);
  font-family: var(--font-text);
  font-weight: normal;
  font-style: normal;
	background-image: url(../images/pattern.png);
	background-attachment: fixed;
  background-repeat: repeat;
  background-position: center center;
  background-color: #000;
}

h1, h2, h3, h4, h5 {

  font-family: var(--font-header);
  font-weight: 400;
  font-style: normal;
}

::selection {

  background: rgba(255, 255, 255, 0.8);
  color: var(--dark);
}

img::selection {

  background: rgba(255, 255, 255, 0.5);
}

::-moz-selection {

	background: rgba(255, 255, 255, 0.8);
  color: var(--dark);
}

img, svg {

	display: block;
	max-width: 100%;
}

a {

	color: inherit;
	text-decoration: none;
}

p {

  font-size: 1rem;
}

.sr_only {

  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* Button */

button, a.button {

  --size: clamp(1rem, 4vw, 1.125rem);
	-webkit-font-smoothing: inherit;
	-moz-osx-font-smoothing: inherit;
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	display: inline-block;
  margin: 0;
  width: auto;
	overflow: visible;
	outline: none;
	font-family: var(--font-text);
  font-size: var(--size);
	font-weight: 900;
  line-height: 0.7;
  text-transform: uppercase;
	cursor: pointer;
	user-select: none;
	padding: 1.125rem 1.875rem;
  border: 2px solid var(--brown-dark);
	background: transparent;
	color: var(--brown-dark);
  text-align: center;
  transition: none;
}

button.selected, a.button.selected {

  background: var(--gold);
}

button::-moz-focus-inner {

  border: 0;
  padding: 0;
}

button.loading {

	pointer-events: none;
	color: transparent;
}

/* Loader */

.loader, .loading:after {

  border: 0.3rem solid var(--light);
  border-top: 0.3rem solid var(--brown-dark);
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  animation: spin 1s linear infinite;
	transition: none;
}

.loading:after {

	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -1rem 0 0 -1rem;
}

@keyframes spin {

  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media screen and (pointer: fine) {

  button:not(.menu):hover, a.button:hover {

    background: var(--brown-dark);
		color: var(--white);
  }
}

@media screen and (max-width: 30rem) {

  button, a.button {

    padding: 1rem;
    min-width: 0;
  }
}

/* Header */

header,
header.content {

	position: relative;
	padding: 2rem var(--content-padding);
	text-align: center;
}

header.content {

	padding: 2rem 0;
}

header h1 {

	--size: clamp(1.25rem, 5vw, 2.5rem);
	font-size: var(--size);
	color: var(--white);
	line-height: 1.15;
  letter-spacing: calc(var(--size) * 0.001 * 100);
	margin: 1rem 0;
}

header h1:only-child {

	margin: 0;
}

header h1 span {

	color: var(--gold);
}

header h2 {

	--size: clamp(0.875rem, 5vw, 1rem);
	font-size: var(--size);
	color: var(--white);
  letter-spacing: calc(var(--size) * 0.001 * 100);
	padding-bottom: 1rem;
}

header time {

	display: block;
	color: var(--gold);
}

header.content p {

	font-size: clamp(1rem, 4vw, 1.25rem);
	font-style: italic;
	line-height: 1.6;
	margin: 2rem auto;
	color: rgb(153, 153, 153);
	max-width: 48rem;
}

header.content figure {

	margin: 1rem 0;
	padding: 0;
}

header.content figure img {

	width: 100%;
	height: auto;
}

header.content figure figcaption {

	display: block;
	margin-top: 1rem;
	font-style: italic;
}

body:not(.support) svg {

	display: none;
}

body.support svg + img {

	display: none;
}

/* Logos */

.text_logo {

	max-width: 35rem;
	margin: 2rem auto;
	overflow: visible;
}

header.small .text_logo {

	max-width: 24rem;
	margin-bottom: 1rem;
}

.text_logo path {

	fill: var(--white);
}

.text_logo path:nth-of-type(8) {

	fill: var(--gold);
}

.logo {

	max-width: clamp(5rem, 35vw, 12rem);
	margin: 0 auto;
	overflow: visible;
}

header.small .logo {

	max-width: clamp(3rem, 35vw, 9rem);
}

.logo polygon,
.logo polyline,
.logo ellipse {

	fill: none;
	stroke: var(--gold);
	stroke-width: 26;
}

.logo polygon {

	filter: drop-shadow(0 0 30px rgb(255 255 255 / 0.3));
	fill: rgba(255, 255, 255, 0.07);
}

.logo path {

	fill: var(--gold);
	filter: drop-shadow(0 0 16px rgb(255 255 255 / 0.4));
}

/* Lang */

.lang {

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
}

.lang a {

	display: block;
}

.lang a:not(.selected) svg,
.lang a:not(.selected) img {

	filter: grayscale(1);
	opacity: 0.75;
}

.lang a svg,
.lang a img {

	height: clamp(1rem, 5vw, 1.5rem);
	width: auto;
}

@media screen and (pointer: fine) {

	.lang a:hover svg,
	.lang a:hover img {

		filter: grayscale(0);
		opacity: 1;
	}
}

/* Nav */

nav {

	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	padding: 1rem 2rem;
	border-top: 2px solid var(--gold);
	margin: 0 auto;
	color: var(--white);
	font-family: var(--font-header);
	background: rgba(0, 0, 0, 0.75);
}

nav ul {

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	font-size: 1rem;
}

nav svg,
nav img {

	width: 1.5rem;
	transform-origin: center center;
	transform: rotateZ(45deg);
	animation: rotate 15s linear infinite;
}

nav svg:last-of-type,
nav img:last-of-type {

	transform: rotateZ(-45deg);
	animation-name: rotate_2;
}

@keyframes rotate {

	from {
		transform: rotateZ(0deg);
	}
	to {

		transform: rotateZ(360deg);
	}
}

@keyframes rotate_2 {

	from {
		transform: rotateZ(360deg);
	}
	to {

		transform: rotateZ(0deg);
	}
}


nav svg circle {

	fill: none;
	stroke: var(--light);
	stroke-width: 30;
}

nav svg path {

	fill: var(--light);
}

/* Main */

main {

	position: relative;
	max-width: var(--content-width);
	margin: 0 auto 2rem auto;
	padding: 0 var(--content-padding);
	min-height: 30vh;
	z-index: 1;
}

/* Posts */

.posts {

	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 2rem;
}

.posts .post {

	display: grid;
	gap: 1rem;
}

.posts .post figure {

	padding: 0;
	padding-bottom: 56.25%;
	background-color: var(--dark);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: var(--bg);
}

.posts .post h2 {

	--size: clamp(1rem, 5vw, 1.5rem);
	font-size: var(--size);
	color: var(--white);
	line-height: 1.15;
  letter-spacing: calc(var(--size) * 0.001 * 100);
}

.posts .post p {

	font-size: clamp(0.875rem, 4vw, 1rem);
	line-height: 1.6;
}

/* Article */

.article {

	max-width: 54rem;
	margin: 0 auto;
}

.article.main {

	text-align: center;
}

.article h2 {

	--size: clamp(1.25rem, 5vw, 2rem);
	font-size: var(--size);
	color: var(--white);
	line-height: 1.15;
  letter-spacing: calc(var(--size) * 0.001 * 100);
}

.article h2 + p {

	margin-top: 4rem;
}

.article p {

	font-size: clamp(1rem, 4vw, 1.25rem);
	line-height: 1.6;
	margin: 2rem 0;
}

/* Footer */

footer {

	position: relative;
	margin-top: 8rem;
	text-align: center;
	overflow: hidden;
}

footer avaruus-hr {

	z-index: 2;
	transform: translateY(50%);
}

footer avaruus-globe {

	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	transform: translateX(-48%) translateY(-51%);
	opacity: 0.2;
}

footer .inner {

	position: relative;
	background: rgba(0, 0, 0, 1);
	padding: 10rem clamp(1rem, 5vw, 2rem);
	padding-bottom: 8rem;
}

body:not(.support) footer .inner {

	border-top: 2px solid var(--gold);
}

footer .inner:before {

	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: radial-gradient(
    circle at bottom,
    rgba(0, 0, 128, 0.6),
    rgba(0, 0, 0, 0)
  );
}

footer .inner .wrap {

	position: relative;
	z-index: 2;
}

footer .text_logo {

	max-width: 22rem;
	margin: 0 auto;
	padding: 0 1rem;
}

footer .logo {

	max-width: clamp(5rem, 8vw, 7rem);
	margin: 2rem auto;
}

footer .logo polygon,
footer .logo polyline,
footer .logo ellipse {

	filter: none;
	fill: none;
	stroke: var(--white);
	stroke-width: 26;
}

footer .logo path {

	filter: none;
	fill: var(--white);
}

footer a {

	font-size: clamp(1rem, 4vw, 1.25rem);
	line-height: 1.6;
	text-decoration: underline;
}