@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	--background: #ffffff;
	--foreground: #171717;
}

@media (prefers-color-scheme: dark) {
	:root {
		--background: #171717;
		--foreground: #ededed;
	}
}

body {
	color: var(--foreground);
	background: var(--background);
	font-family: Arial, Helvetica, sans-serif;
}

.home-background {
	z-index: -1;
	background-color: #2f4f4f;
	height: 100vh;
	width: 100vw;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}

.home-background h2 {
	font-family: 'Montserrat' sans-serif;
	font-weight: bold;
	font-size: 3vw;
	text-transform: uppercase;
	text-shadow: 3px 3px #16a085;
}

.home-background .bg-1 {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 40vw;
	background-image: url('/assets/images/background.svg');
	background-size: cover;
}

.home-background .bg-2 {
	z-index: 999;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background-image: url('/assets/images/background-moutains.svg');
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: contain;
}

.home-background .train {
	position: absolute;
	bottom: 0;
	left: -50vw;
	width: 100vw;
	height: 22.5vw;
	/* overflow: hidden; */
}

.train.moving {
	animation: moving-train 20s linear infinite;
}

.train .train-text {
	font-family: 'Montserrat' sans-serif;
	position: absolute;
	top: -50px;
	left: 25vw;
	word-wrap: normal;
	max-width: 250px;
	height: 80px;
	padding-left: 5px;
	border-left: solid 1px #FFF;
}

.train .moving-train {
	display: flex;
	align-items: baseline;
}

.moving-train .wagon-l {
	background-image: url('/assets/images/XGC_T2_AB_L.gif');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom right;
	height: 3.7vw;
	width: 16vw;
}

.moving-train .wagon-m {
	background-image: url('/assets/images/BRGC_T2_R.gif');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom;
	height: 5vw;
	width: 11.5vw;
}

.moving-train .wagon-r {
	background-image: url('/assets/images/XGC_T2_R.gif');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom left;
	height: 3.7vw;
	width: 16vw;
}

@keyframes moving-train {
	0% {
		left: -50vw;
		;
	}

	100% {
		left: 125vw;
	}
}