/* Color Palette Variables */
:root {
    --color1: #000;
	--color2: #191919;
	--color3: #fff;
	--color4: #323232;
}

/* Global Styles */
body {
    margin: 0;
	padding: 0;
	font-family: 'Poppins', sans-serif;
	color: var(--color3);
	overflow-x: hidden;
    overscroll-behavior: none;
}

.header {
	background-color: var(--color1);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 1rem;
}

.header > img {
	width: 25rem;
}

.header > div {
	display: flex;
	align-items: center;
	position: relative;
}

.header .press-kit-button {
	color: var(--color3);
	position: absolute;
	right: -150%;
	font-weight: bold;
	border: 2px solid var(--color3);
	border-radius: 1.25rem;
	text-decoration: none;
	padding: 0.375rem;
	text-align: center;
	width: 6.8rem;
	transition: color 0.3s;
	box-sizing: border-box;
}

.header .press-kit-button:hover,
.wrapper .section-wrapper .purchase-button:hover {
	border: none;
	background-color: var(--color4);
}

/* Main content */
.wrapper {
	margin: auto 0;
	display: flex;
	flex-direction: column;
	background-color: var(--color1);
}

.wrapper > div:nth-child(odd) {
	background-color: var(--color2);
}

.wrapper > div:nth-child(even) {
	background-color: var(--color1);
}

.wrapper .section-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	gap: 2rem;
    padding: 2.2rem 0;
}

.wrapper .section-wrapper .text-section {
	box-sizing: border-box;
	margin: 0 auto;
	width: 60%;
	max-width: 62.5rem;
	font-size: 1.3rem;
	text-align: center;
}

.wrapper .section-wrapper .purchase-button {
	box-sizing: border-box;
	font-size: 1.5rem;
	width: 11.2rem;
	height: 3.2rem;
	text-align: center;
	padding: 0.5rem;
	border: 2px solid var(--color3);
	border-radius: 1.25rem;
	color: var(--color3);
	font-weight: bold;
	text-decoration: none;
	transition: color 0.3s;
	display: flex;
	justify-content: center;
	align-items: center;
}

.wrapper .section-wrapper .title {
	font-size: 2rem;
}

/* Carousel */
.carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 75rem;
    margin: auto;
}

.carousel.full-width {
	max-width: 100%;
}

.carousel .carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.carousel .carousel-wrapper .carousel-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel .carousel-wrapper .carousel-container .carousel-entry {
    flex: 0 0 100%;
    width: 100%;
}

.carousel .carousel-wrapper .carousel-container.mixed .carousel-entry {
	display: flex;
	gap: 4rem;
}

.carousel .carousel-wrapper .carousel-container.mixed .carousel-entry .text-wrapper {
	flex: 1;
	width: 40%;
}

.carousel .carousel-wrapper .carousel-container.mixed .carousel-entry img {
	flex: 1;
	width: 60%;
}

.carousel .carousel-wrapper .carousel-container.mixed .carousel-entry .text-wrapper {
	display: flex;
	flex-direction: column;
	gap: 4rem;
	margin-top: 5rem;
	text-align: center;
	margin-left: 3.6rem;
	box-sizing: border-box;
}

.carousel .carousel-wrapper .carousel-container.mixed .carousel-entry .text-wrapper .sub-title {
	font-size: 1.3rem;
}

.carousel .carousel-wrapper .carousel-container.mixed .carousel-entry .text-wrapper .text {
	font-size: 1.1rem;
}

.carousel.text-carousel {
	width: 50rem;
}

.carousel.text-carousel .carousel-wrapper .carousel-container .carousel-entry {
	box-sizing: border-box;
	padding: 2rem 4rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	width: 50rem;
}

.carousel.text-carousel .carousel-wrapper .carousel-container .carousel-entry .text,
.carousel.text-carousel .carousel-wrapper .carousel-container .carousel-entry .sub-title {
	text-align: center;
	width: 42rem;
}

.carousel.text-carousel .carousel-wrapper .carousel-container .carousel-entry .sub-title  {
	font-size: 1.3rem;
}

.carousel.text-carousel .carousel-wrapper .carousel-container {
    transition: unset;
}

.carousel .carousel-wrapper .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
	width: 3rem;
}

.carousel .carousel-wrapper .arrow-left { left: 0.625rem; }
.carousel .carousel-wrapper .arrow-right { right: 0.625rem; }

.carousel .carousel-dots {
    display: flex;
    justify-content: center;
	align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0;
    position: absolute;
    bottom: 0.625rem;
    width: 100%;
    z-index: 20;
	box-sizing: border-box;
}

.carousel .carousel-dots .dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: white;
    cursor: pointer;
	box-sizing: border-box;
}

.carousel .carousel-dots .dot--active {
    background: transparent;
    border: 2px solid white;
	width: 0.7rem;
    height: 0.7rem;
}

.carousel.text-carousel .carousel-dots {
	bottom: 0;
}

/* Video section */
.wrapper .section-wrapper video {
	width: 70%;
}

/* Factions section */
.wrapper .section-wrapper .factions-section {
	display: flex;
	gap: 2.6rem;
}

.wrapper .section-wrapper .factions-section > div {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 2.5rem;
	width: 25rem;
	text-align: center;
}

.wrapper .section-wrapper .factions-section img {
	width: 80%;
}

.wrapper .section-wrapper .factions-section .faction-name {
	font-size: 1.5rem;
}

.wrapper .section-wrapper .factions-section .faction-description {
	font-size: 1.2rem;
}

.wrapper .section-wrapper .system-requirements-wrapper {
	margin: 0 auto;
	width: 80%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2rem;
}

.wrapper .section-wrapper .system-requirements-wrapper > * {
	width: 41%;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.wrapper .section-wrapper .system-requirements-wrapper > * .title {
	text-align: center;
}

.wrapper .section-wrapper .system-requirements-wrapper > * .requirement {
	display: flex;
	gap: 0.5rem;
	font-size: 1.2rem;
}

.wrapper .section-wrapper .system-requirements-wrapper > * .requirement .name {
	color: #8e8e8e;
}

/* Discord section */
.discord-logo {
	width: 30rem;
}

.wrapper .section-wrapper .discord-link {
	color: var(--color3);
}

/* Footer */
.footer {
	background-color: var(--color2);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1rem;
}

/* Small devices (Mobile phones, less than 768px) */
@media (max-width: 767px) {
	.header > div {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.header .press-kit-button {
		position: relative;
		right: 0;
	}

	.carousel.text-carousel {
		width: 25rem;
	}
	
	.carousel.text-carousel .carousel-wrapper .carousel-container .carousel-entry {
		width: 25rem;
	}
	
	.carousel.text-carousel .carousel-wrapper .carousel-container .carousel-entry .text,
	.carousel.text-carousel .carousel-wrapper .carousel-container .carousel-entry .sub-title {
		width: 18rem;
	}

	.wrapper .section-wrapper .factions-section {
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.wrapper .section-wrapper .factions-section > div {
		width: 90%;
	}

	.wrapper .section-wrapper .system-requirements-wrapper {
		flex-direction: column;
	}

	.wrapper .section-wrapper .system-requirements-wrapper > * {
		width: 100%;
	}
}