.outfit-<uniquifier> {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
.regeneration {
	font-family: "cc-regeneration-variable", sans-serif;
	font-variation-settings: "ital" 0, "wght" 360;
}
html, body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: #141b2d;
	overflow-x: hidden;
	overflow-y: hidden;
	user-select: none;
	-webkit-user-select: none;
}
div, img, span {
	position: absolute;
}
#content {
	width: 100%;
	height: 100%;
}
#bg {
	width: 160vh;
	height: 90vh;
	top: 0;
	left: 50%;
	margin-left: -80vh;
	background-image: url("../img/bg_landscape.jpg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center top;
}
#logos {
	width: 50%;
	left: 50%;
	max-width: 80vh;
}
#coming {
	width: 50%;
	right: 50%;
	max-width: 80vh;
}
#coming span{
	margin: 3.5vh 0 0 5vh;
	font-size: 4vh;
	color: white;
	font-variation-settings: "wght" 200;
	filter: drop-shadow(black 0 0 1vh);
}
#logos img {
    height: 7vh;
    width: auto;
	right: 3vh;
	top: 3vh;
	filter: drop-shadow(black 0 0 1vh);
}
#wl {
	width: 100%;
	padding-left: 2vh;
	font-size: 6vh;
	color: white;
	top: 66vh;
	text-align: center;
}
#cs {
	position: relative;
	margin: 0 1.5vh 1.5vh 1.5vh;
	font-size: 3vh;
	color: white;
	font-variation-settings: "wght" 200;
}
#store_links_enabled {
    top: 76vh;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
#store_links_disabled {
    top: 86vh;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.store_button {
	display: block;
    padding: 1vh 2vh 0.75vh 2vh;
	margin-left: 1vh;
	background: none;
	border-radius: 4vh;
	border-color: #ffffff00;
    cursor: pointer;
}
.store_button svg {
    height: 4vh;
    width: auto;
}
[disabled] {
	opacity: .8;
	cursor: default;
	margin-left: 0;
}
.store_button.enabled {
	border-color: #ffffff66;
	transition-duration: 0.2s;
}
.store_button.enabled:hover {
  border-color: #ffffff;
	background: #141b2d;
}
#copyright {
    font-family: Outfit, sans-serif;
	font-variation-settings: "wght" 200;
    color: white;
    font-size: 1.2vh;
    width: 92%;
    text-align: center;
    top: 96vh;
    display: flex;
    justify-content: center;
    padding: 0 4%;
}
#piccolo_link {
    width: 12vh;
    height: 7vh;
    position: absolute;
    right: 3vh;
    top: 3vh;
}
#krafton_link {
    width: 19vh;
    height: 4vh;
    position: absolute;
    right: 18vh;
    top: 5vh;
}

@media (orientation: portrait) {
	html, body {
		overflow-y: auto;
	}
	#bg {
		width: 100vw;
		height: 111vw;
		margin-left: -50vw;
		background-image: url("../img/bg_portrait.jpg");
	}
	#coming {
		width: 50%;
		right: 50%;
		max-width: 50vw;
	}
	#coming span{
		margin: 3vw 0 0 4vw;
		font-size: 4vw;
		filter: drop-shadow(black 0 0 2vw);
	}
	#logos {
		width: 50%;
		left: 50%;
		max-width: 50vw;
	}
	#logos img {
		height: 8vw;
		width: auto;
		right: 2vw;
		top: 2vw;
		filter: drop-shadow(black 0 0 2vw);
	}
	#wl {
		padding-left: 0;
		font-size: 9vw;
		top: 88vw;
	}
	#cs {
		margin: 0 12vw 4vw 12vw;
		font-size: 7vw;
	}
	#store_links_enabled {
		top: 104vw;
	}
	#store_links_disabled {
		top: 122vw;
		flex-wrap: wrap;
	}
	.store_button {
		padding: 2vw 4vw 1.5vw 4vw;
		margin-left: 2vw;
		border-radius: 8vw;

	}
	.store_button svg {
		height: 8vw;
		width: auto;
	}
	#copyright {
		font-size: 2vw;
		top: 166vw;
		display: flex;
		justify-content: center;
		padding: 0 4% 4vw 4%;
	}
    #piccolo_link {
        width: 14vw;
        height: 8vw;
        right: 2vw;
        top: 2vw;
    }
	#krafton_link {
		width: 23vw;
		height: 6vw;
		right: 19vw;
		top: 3vw;
	}
}