@import url(global.css);
@import url(icons.css);
@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');


html {
	font-size: clamp(16px,1.3vw,20px);
}
body {
	display: flex;
	flex-direction: column;
	font-weight: 300;
}


header {
	display: flex;
	justify-content: space-between;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
}
header a {
	display: block;
	padding: var(--spacingSmall);
	color: #FFF;
	/*font-size: 1.5rem;*/
	text-decoration: none;
}
header .logo {
	width: 9em;
}
#mainMenu li {
	display: inline-block;
}
#mainMenu .button {
	display: block;
	margin-left: var(--spacingSmall);
	letter-spacing: var(--letterSpacing);
	text-transform: uppercase;
	/*font-size: 0.9em;*/
	letter-spacing: var(--letterSpacing);
	text-transform: uppercase;
}
#mainMenu .button.ghost {
	margin: 0 var(--spacingSmall) 0 0.5rem;
	border-color: rgba(255,255,255,0.5);
	color: #FFF;
}
#mobileMenu, #mobileToggle {
	display: none;
}



.container {
	margin: 0 auto;
	padding: 0 var(--spacingLarge);
	max-width: 140ch;
}
#intro {
	padding: var(--spacing);
}
.gradientBg {
	background: linear-gradient(135deg, var(--blue), var(--cyan));
}



/* ============================== layout ============================== */




/* ============================== general ============================== */

main {
	flex: 1;
	padding-bottom: var(--spacingLarge);
}
h1 {
	color: #FFF;
	font-size: 2em;
	font-weight: 600;
}
h1:only-child {
	padding: var(--spacingLarge) var(--spacing) var(--spacing);
	text-align: center;
}
h2 {
	margin: var(--spacingXLarge) 0 var(--spacing);
	font-size: 2em;
	font-weight: 600;
	text-align: center;
}
h3 {
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: left;
}
h4 {
	font-size: var(--fontSmallest);
	font-weight: normal;
	letter-spacing: var(--letterSpacing);
	text-transform: uppercase;
}


p {
	line-height: 1.5;
}
h2 + p {
	margin: -1em auto var(--spacingSmall);
	max-width: 30em;
	font-size: 1.2em;
	text-align: center;
	text-wrap: balance;
}
@media (max-width: 699px) {
	h2 + p {
		margin: var(--spacing);
	}
}



/* ============================== footer ============================== */

footer {
	color: #FFF;
}
footer .container {
	display: flex;
}
footer .towerLinks {
	padding-top: var(--spacingLarge);
	padding-bottom: var(--spacingLarge);
	gap: var(--spacingLarge);
}
footer h4 {
	margin-bottom: var(--spacingSmall);
	opacity: 0.5;
}
footer .towerLinks a {
	display: block;
	padding: 0.2em 0;
	text-decoration-color: #FFF;
	text-underline-offset: 0.15em;
	transition: var(--transition);
}
footer .towerLinks a:not(:hover) {
	text-decoration-color: transparent;
}
footer .towerLinks > div:last-child {
	flex: 1;
	text-align: right;
}
footer .logo + p {
	font-family: Caveat, cursive;
	font-size: 1.5em;
	margin: 0;
	opacity: 0.7;
}

footer hr {
	margin: 0;
	color: #FFF;
	background-color: #FFF;
	opacity: 0.3;
}
footer .finePrint div {
	padding: var(--spacing);
	font-size: var(--fontSmallest);
	opacity: 0.7;
}
footer .finePrint div:first-child {
	padding-left: 0;
	border-right: 1px solid rgba(255,255,255,0.5);
}
footer .finePrint div:last-child {
	padding-right: 0;
	text-align: right;
}