@font-face {
	font-display: fallback;
	font-family: basefont;
	src: url('./../fnt/bounded-vf.ttf');
	src: url('./../fnt/tilda-vf.woff2');
	src: url('./../fnt/montserrat-vf.ttf');
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
}

a {
	cursor: pointer;
}

html {
	font: 13px/1 basefont, system-ui;
	color: #fff;
	--desktop-padding: 40px;
	background: #000;
}

.screenContent {
	position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	height: 100%;
	padding: 80px var(--desktop-padding);
	padding-bottom: 140px;
}

.screenContent.--top {
    justify-content: start;
}

@media (width > 960px) {
	html {
		--desktop-padding: 10vw;
	}
	.screenContent {
		padding: 80px var(--desktop-padding);
	}
	.screenContent.--space-between {
	    justify-content: space-between;
	}
	.screenContent.--bottom {
	    justify-content: end;
	}
}

.screenTitle {
	font-size: 50px;
    text-align: center;
}

.screenTitle.--main {
	margin-top: 80px;
	text-transform: uppercase;
}

.screenTitle.--centered {
	text-align: center;
}

.screenDescription {
	font-size: 16px;
	font-weight: 500;
    line-height: 1.4;
    text-align: center;
}

.screenDescription p {
	margin: 0.5em 0;
}

.screenDescription.--centered {
	text-align: center;
}

.screenSpacer {
	flex-shrink: 0;
	height: 40px;
	border: none;
	visibility: hidden;
	margin: 0;
}

.screenFigure {
	object-fit: contain;
	position: absolute; 
	width: 150%;
	&.--bottom {
		object-position: bottom center;
		bottom: 0; left: 0; right: 0;
	}
	&.--left {
		object-position: bottom left;
		bottom: 0; left: 0;
		height: 300px;
	}
	&.--right {
		object-position: bottom left;
		bottom: 0; right: 0; left: auto;
	}
	@media (width > 960px) {
		& {
			width: 100%;
		}
	}
}

.screenBackground {
	object-fit: cover;
	position: absolute; 
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	opacity1: 0.7;
}

.screenFigurePlanet {
	top: calc(100% - 20px); left: 50%; 
	width: calc(min(55vh, 55vw));
	margin-left: calc(min(55vh, 55vw) * -0.5);
	transform-origin: center 20% !important;
	--zoom: 1.3 !important;
}

.downloadBtn {
	position: fixed; z-index: 1;
	display: block;
	bottom: 0; right: 0;
}

@media (width > 960px) {
	.screenTitle {
		font-size: 70px;
	}
	.screenTitle.--main {
		margin-top: 20px;
		font-size: 110px;
	}
	.screenDescription.--left {
		text-align: left;
		align-self: start;
	}
	.screenDescription.--right {
		text-align: right;
		align-self: end;
	}
	.screenDescription.--padding-left-2 {
		padding-left: calc(100%/12*2);
	}
	.screenDescription.--padding-left-3 {
		padding-left: calc(100%/12*3);
	}
	.screenTitle.--right {
		text-align: right;
		align-self: end;
	}
	.screenSpacer.--spacer-x3 {
		height: 120px; 
	}
	.screenSpacer.--spacer-x4 {
		height: 160px; 
	}
}

  h5 {
	font-size: 16px;
    line-height: 1.4;
  	margin: 0;
  	margin-bottom: 10px;
  }
  h1 {
    font-weight: 900;
    opacity: 1;
  	margin: 0;
  }
@media (width > 960px) {
	h1 {
	}
}
  .section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    /*transition: transform 5s ease-in-out;*/
  }
  
  	.footbar {
		position: fixed;
		z-index: 10;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	    padding: 0px var(--desktop-padding);
	    margin-bottom: 20px;
  	}
  	.footbar > .links {
		display: flex;
		align-items: center;
		gap: 30px;
  		font-size: 20px;
  	}
  	
	.footbar > .links svg {
  		width: 1em; height: 1em; fill: currentColor;
  	}
  	
  	.underlined-link {
  		font-weight: 600;
  		text-decoration: underline;
  		text-underline-offset: 5px;
  	}

  /* Navbar */
  .navbar {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    padding: 0px var(--desktop-padding);
    margin-top: 20px;
  }

  .navbar .logo {
    font-size: 19px;
    font-weight: 900;
  }

  .navbar .links {
    display: flex;
    gap: 20px;
    white-space: nowrap;
  }
  .navbar .links a {
  	font-weight: 500;
	text-decoration: none;
  }

@media (width > 960px) {
	.navbar {
		flex-direction: row;
	}
}

  /* Scroll text styling */
  .scroll-text {
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    color: #f1f1f1;
    opacity: 0.8;
    z-index: 5;
    letter-spacing: 0.15em;
    text-transform1: uppercase;
  }

  .scroll-text.left {
    left: calc(var(--desktop-padding) * 0.5);
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .scroll-text.right {
    right: calc(var(--desktop-padding) * 0.5);
    transform: translate(+50%, -50%) rotate(90deg);
  }


.fp-tableCell {
    display: table-cell;
    vertical-align: center;
    width: 100%;
    height: 100%;
}

.animate {
	--zoom: 1.15;
    transform-origin: center center;
    animation: kenBurns 10s ease-in-out infinite alternate;
}

@keyframes kenBurns {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(var(--zoom));
    }
}