/* archivo-narrow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Archivo Narrow';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/archivo-narrow-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* archivo-narrow-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Archivo Narrow';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/archivo-narrow-v30-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* archivo-narrow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Archivo Narrow';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/archivo-narrow-v30-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* archivo-narrow-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Archivo Narrow';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/archivo-narrow-v30-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



:root {

	/*** colors ***/
	--black: #000000;
	--pink: #ff0066;
	--hipink: #ff0099;
	--lightpink: #f39aca;
	--fontcolor: var(--black);
	--fontcolorhighlight: var(--pink);
	--bgcolor: #000000;
}




body {
	margin: 16vw 0 0;
	background-color: #ff0000;
	color: var(--fontcolor);
	font-family: "Archivo Narrow", "Arial Narrow", sans-serif;

	font-weight: 400;

	font-size: 20px;
	font-size: clamp(20px, 1.6vw, 30px);
	/* prevent iphone from auto-resizing text (in landscape)	*/
	-moz-text-size-adjust: 100%;
	line-height: 26px;
	line-height: clamp(26px, 2.2vw, 40px);

	background:url(../atrophia_1800x1200_2024-by-vinzenz-wyser.jpg);
	background-size: 100%;
	background-repeat: no-repeat;
}

.big {
	font-size:20px;
	font-size:clamp(20px, 3vw, 30px);
	font-weight:700;
}

.small {
	font-size:16px;
	font-size:clamp(14px, 1.2vw, 18px);
	font-weight:400;
	line-height:clamp(16px, 1.3vw, 20px);
}


h1 {
	font-size: 40px;
	font-size: clamp(60px, 9vw, 120px);
	font-weight:700;
	font-style:italic;
	margin:0;
	line-height:clamp(20px, 3vw, 40px);
}

h1 .big {
	line-height: 26px;
	line-height: clamp(26px, 0.5vw, 40px);

}

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

footer a {
	color:#000000;

}

a:hover {
	color:var(--hipink);
}


.pink {
	color:var(--pink);
}

h1 > .sub {
	font-style:normal;
	padding-left:6vw;
	font-size:20px;
	font-size:clamp(20px, 3.5vw, 40px);
	font-weight:700;
}


.flex-container {
	display: flex;
  	flex-direction: row;
  	justify-content: left;
  	margin-left:8vw;
}



.flex-container > div {
 	background-color: rgb(255,255,255,0.8);
	border-radius:0.8vw;
	padding:3vw;
	padding-top:2vw;
  	margin-right:2vw;
  	width:50%;
	max-width:420px;
}


.flex-container > h1 {
	background:none;
	width:100%;
	margin-bottom:4vw;
}

.s-only {
	display:none;
}

@media (max-width: 1000px) {
  .flex-container {
    flex-direction: column;
  }
  .flex-container.reverse {
    flex-direction: column-reverse;
  }

  .flex-container > div {
  	width:90%;
  	max-width:none;
  }

  .flex-container > div > div {
  	padding-right:6vw;
  }

  .l-only {
  	display:none;
  }

  .s-only {
  	display:unset;
  }

}