@charset "utf-8";
/* CSS Document */

body,html
{
	overflow-x: clip;
}

body
{
	font-family: Arial;
	margin: 0;
    background-image: url("images/Background.jpg");
    background-size: cover;
}

/*========================================================================================================*/
/* Logo */
.logo
{
    width: 20vw;
    height: auto;
    padding: 25px 30px;
    margin: 20px 20px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
}

.logo img
{
    width: 100%;
    height: auto;
}
/*========================================================================================================*/


/*----------------------------------------------------------------------------------------------------------*/
/* Nav Bar CSS*/
nav
{
    position: absolute;
    top: 2%;
    right: 2%;
    z-index:2;
}

nav ul
{
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0; 
    background: rgba(57, 72, 58, 0.5); 
    border-radius: 5px;
    overflow: hidden; /* So the Nav Bar on the sides allow to be curve as well */
}

nav button
{
    background: none;
    border: none;
    color: white;
    font-size: 1.8vw;
    cursor: pointer;
    padding: 15px 30px;
    display: block;
    text-align: center;
}

#Active_Btn
{
    background: rgba(0, 0, 0, 0.5);
}

#Hamburger_Menu
{
	display: none;
}
/*----------------------------------------------------------------------------------------------------------*/





/*----------------------------------------------------------------------------------------------------------*/
/* Home Page */

	/*==========================================================================================================*/
	/* Intro Banner */
	#Intro_Banner
	{
		display: flex;
		width: 100%;
		height: 100%;
		background-image: url("images/Default_Train.png"), url("images/MRT_Bridge.png");
		background-repeat: no-repeat, repeat-x;    /* repeat only on the x-axis For the Bridge */
		background-position: right -2500px bottom 267px, center calc(100% - -100px); /* Left Value is for Train Adjustment and Right Value is for Train_Bridge Adjustment */
		background-size: auto 180px, auto;   
		animation: Move_Train_Desktop 8s linear infinite;
		overflow-x: hidden;
	}

	#Intro_Card_Left
	{
		width: 40%;
		background: rgba(57, 72, 58, 0.5); 
		padding: 10px 0px 40px 40px;
		box-sizing: border-box; /* So padding doesn't break layout */
	}

	#Intro_Card_Left h1
	{
		font-size: 9.25vw;
		color: white;
	}

	#Intro_Card_Left p
	{
		margin-top: 15px;
		font-size: 1.5vw;
		color: white;
	}

	#Intro_Card_Left button
	{
		padding: 1.2vw 1.4vw;
		margin: 0px 5px;
		background: rgba(57, 72, 58, 0.5);
		border: solid 2px white;
		border-radius: 5px;
		color: white;
		cursor: pointer;
		font-weight: bold;
		font-size: 1.0vw;
	}

	#Intro_Card_Right
	{
		padding: 10px 40px 40px 0px;
		width: 60%;
	}

	#Intro_Card_Right h1
	{
		font-size: 9.25vw;
		color: #39483a;
	}


	#cloud1, #cloud2, #cloud3 
	{
		position: absolute;
		pointer-events: none;
		width: 30vw;
	}

	#cloud1 
	{
		top:  15%;
	}
		
	#cloud2
	{
		top:  35%;
	}
	
	#cloud3 
	{
		top:  45%;
	}
	

	/* Keyframe animation for the train movement on Desktop*/
	@keyframes Move_Train_Desktop
	{
		from
		{
			background-position: right -2500px bottom 267px, center calc(100% + 100px);
		}
		to 
		{
			background-position: left -2500px bottom 267px, center calc(100% + 100px);
		}
	}

	/* Keyframe animation for the train movement on Mobile*/
	@keyframes Move_Train_Mobile
	{
		from 
		{
			background-position: right -2500px bottom 130px, center calc(100% + 220px);
		}
		to 
		{
			background-position: left -2500px bottom 130px, center calc(100% + 220px);
		}
	}




	/*==========================================================================================================*/



	/*==========================================================================================================*/
	/* MiniGame Banner */

	#MiniGame_Banner
	{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background: black;
		color: white;
	}

	#MiniGame_Banner h1
	{
		margin: 50px 0 50px;
		font-size: 3em;
	}

	#Mini_Game_Canvas {
		
		border: 1px solid #fff;
		width: 80%;
		max-width: 1280px;
		aspect-ratio: 16 / 9;
		margin: 0px 0 50px;
	}

	#Game_Instruction 
	{
		width: 58.5%;
		background: rgba(57, 72, 58, 0.5);
		padding: 10px 50px;
		border-radius: 10px;
		margin-bottom: 25px;
	}

	#Game_Instruction h1
	{
		font-size: 35px;
		margin: 10px 0px;
	}

	#Game_Instruction p
	{
		font-size: 20px;
		width: 85%;
	}
	/*==========================================================================================================*/
/*----------------------------------------------------------------------------------------------------------*/



/*----------------------------------------------------------------------------------------------------------*/
/* About Page */

	/*==========================================================================================================*/
	/* Train Length Display */
	#Train_Length_Display
	{
		width: 80%;
		margin: 0 auto; 
	}

	#Train_Length_Display hr
	{
		padding-bottom: 20px; 
		border-radius: 10px;
		border: none;
		border-top: 4.5px solid white; 
	}

	#Train_Length_Display h1
	{
		text-align: center;
		color: white;
		font-size: 20px;
		width: 5%;
		margin-left: 45%;
		padding: 10px 15px;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 10px;
	}
	/*==========================================================================================================*/



	/*==========================================================================================================*/
	/* Train Banner */
	#Train_Image_Banner
	{
		width: 80%;
		margin: 0 auto; 
	}

	#Train_Image_Banner img
	{
		width: 100%;
	}
	/*==========================================================================================================*/



	/*==========================================================================================================*/
	/* Train Info Banner */
	#Train_Info_Banner
	{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
		margin: 0 auto;
		padding: 45px 0px;
		background:  linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/MRT_Bridge.png");
		background-repeat: repeat-x;       /* repeat only on the x-axis For the Bridge*/
		background-position: top center;
		background-size: auto;  
	}
	
	.Train_Info_Card 
	{
		text-align: center;
		width: 200px;
		margin: 20px;
	}

	.Train_Info_Card h1 
	{
		font-size: 20px;
		color: white;
		margin-bottom: 0.5rem;
	}

	.Train_Info_Card img 
	{
		width: 100px;
		height: auto;
	}

	.Bush_Background
	{
		width: 100%;
		height: 200px; 
		background: url("images/Background_Bush.png") repeat-x top;
		background-size: cover; 
		margin-top: -55px; 
	}

	#Types_Of_Lines_Banner
	{
		text-align: center;
		padding: 40px 0px;
		background: rgb(16, 44, 33);
		width: 100%;
		margin-top: -60px;
		height: 100%;
	}

	#Types_Of_Lines_Banner h1
	{
		color: white;
		font-size: 40px;
	}

	.Cards_Container
	{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}


	.Flip_Card
	{
		position: relative;
		background: rgb(0, 0, 0);
		width: 220px;
		height: 350px;
		border-radius: 10px;
		transform-style: preserve-3d;
		transition: transform 1.5s;
		margin: 20px 20px;
	}

	.Flip_Card img
	{
		width: 200px;
		height: 200px;
	}


	.Flip_Card:hover, .Flip_Card.flipped  /* When Hovering over the card it flips it /  But for Mobile Hovering does not work so need to make tap or clicked to work */ 
	{
		width: 220px;
		height: 350px;
		border-radius: 10px;
		transform: rotateY(180deg);
	}

	.Front_Card 
	{
		z-index: 2;
	}

	.Card_Label 
	{
		background: white;
		width: 100%;
		height: 40%;
		text-align: center;
		padding-top: 10px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		position: relative;
	}

	.Line_Name
	{
		font-size: 1.15em;
		color: black;
		font-weight: bold;
		margin: 0;
		padding: 5px 0;
	}

	.Hint_Text
	{
		font-size: 0.85em;
		color: gray;
		padding-bottom: 20px; 
		margin: 0;
	}

	.Red_Underline, .Green_Underline, .Blue_Underline, .Orange_Underline, .Brown_Underline, .Purple_Underline
	{
		width: 60%;
		height: 5px;
		border-radius: 10px;
		margin: 10px auto 0;
	}

	#Red_Train
	{
		background: url('images/Multiple_Train_Sprite.png') no-repeat -2px -2px;
		width: 200px;
		height: 42px;
		margin: 80px;
	}

	#Green_Train
	{
		background: url('images/Multiple_Train_Sprite.png') no-repeat -2px -50px;
		width: 200px;
		height: 43px;
		margin: 80px;
	}
	#Blue_Train
	{
		background: url('images/Multiple_Train_Sprite.png') no-repeat -2px -99px;
		width: 200px;
		height: 43px;
		margin: 80px;
	}
	#Orange_Train
	{
		background: url('images/Multiple_Train_Sprite.png') no-repeat -2px -194px;
		width: 200px;
		height: 42px;
		margin: 80px;
	}
	#Brown_Train
	{
		background: url('images/Multiple_Train_Sprite.png') no-repeat -2px -242px;
		width: 200px;
		height: 43px;
		margin: 80px;
	}
	#Purple_Train
	{
		background: url('images/Multiple_Train_Sprite.png') no-repeat -2px -147px;
		width: 200px;
		height: 43px;
		margin: 80px;
	}


	.Red_Underline
	{
		background: red;
	}

	.Green_Underline
	{
		background: green;
	}

	.Blue_Underline
	{
		background: blue;
	}

	.Orange_Underline
	{
		background: orange;
	}

	.Brown_Underline
	{
		background: brown;
	}

	.Purple_Underline
	{
		background: purple;
	}

	.Front_Card, .Back_Card
	{
		position: absolute;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		backface-visibility: hidden;
	}

	.Back_Card
	{
		transform: rotateY(180deg);
		background: white;
		border-radius: 10px;
	}

	.Description_Text
	{
		font-size: 12.5px;
		color: black;
		text-align: center;
		height: 60%;
		background: #efefef;
		padding: 15px 0px;
	}

	#Red_Line
	{
		border-top: solid 10px red;
	}

	#Green_Line
	{
		border-top: solid 10px green;
	}

	#Blue_Line
	{
		border-top: solid 10px blue;
	}

	#Orange_Line
	{
		border-top: solid 10px orange;
	}

	#Brown_Line
	{
		border-top: solid 10px brown;
	}

	#Purple_Line
	{
		border-top: solid 10px purple;
	}

	.Title_Text
	{
		margin-top: 35%;
		font-size: 1.5em;
		height: 50%;
		color: black;
		text-align: center;
	}

	/*==========================================================================================================*/

/*----------------------------------------------------------------------------------------------------------*/


/*----------------------------------------------------------------------------------------------------------*/
/* History Page */

	/*==========================================================================================================*/
	/* History Banner */
	#History_Banner
	{
		display: flex;
		width: 100%;
		height: 100%;
	}

	#History_Info_Left
	{
		width: 60%;
		background: rgba(0, 0, 0, 0.5);
		color: white;
		margin-top: 100px;
		margin-right: 10%;
		border-radius: 0px 10px 10px 0px;
		padding: 50px 0px;
	}

	#History_Info_Left h1
	{
		margin: 100px 100px 0px;
		font-size: 45px;
	}

	#History_Info_Left p
	{
		width: 40%;
		font-size: 20px;
		margin: 20px 20px 75px 100px;
	}


	#History_Info_Left a
	{
		background-color: transparent;
		color: white;
		border: 2px dotted white;
		padding: 10px 20px;
		border-radius: 5px;
		cursor: pointer;
		margin: 10px 0px 0px 100px;
	}


	#History_Info_Right
	{
		width: 20%;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 10px;
		margin-top: 100px;
		margin-right: 10%;
	}


	.Timeline_btn
	{
		display: flex;
		align-items: center;
		margin: 60px 0px;
		padding: 10px 15px;
		cursor: pointer;
		color: white;
		background: none;
		border: none;
		font-size: 30px;
	}

	.Timeline_Icon
	{
		margin: 0px 4vw;
		width: 1.7vw;
		height: 1.2vw;
	}

	.vl
	{
		border-left: 6px dashed white;
		height: 80px;
		margin-left: 50%;
	}
	/*==========================================================================================================*/


	/*==========================================================================================================*/
	/* History Quiz */
	#Quiz_Section
	{
		margin: 10% 0%;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		
	}

	input[type="radio"]
	{
		display: none; /* Get all Radio icon and set to blank so u wont see the dot */
	}

	.Restart_Button 
	{
		padding: 15px 20px;
		margin: 0px 5px;
		background: rgba(57, 72, 58, 0.5);
		border: solid 2px white;
		border-radius: 5px;
		color: white;
		cursor: pointer;
		font-weight: bold;
	}


	.Quiz_Answer_Icon
	{
		background: white;
		border-radius: 50%;
		width: 40px;
		height: 40px;
		color: rgb(57, 72, 58);
		text-align: center;
		line-height: 40px;
		margin-right: 20px;
	}

	#Answers_Card
	{
		background: rgba(57, 72, 58, 0.5);
		height: 100%;
		width: 50%;
		margin-left: 5%;
		margin-right: 10%;
		border-radius: 5px;
	}

	#Answers_Card fieldset
	{
		display: flex;
		flex-direction: column;
		margin: 6% 10%;
		border: none;
		padding: 0;
	}

	#Answers_Card label
	{
		font-size: 30px;
		border: dashed 2px white;
		border-radius: 10px;
		color: white;
		cursor: pointer;
		display: flex;
		align-items: center;
		margin-top: 2.5%;
		padding: 3.5% 2%;
		text-wrap:auto;
	}

	#Answers_Card .correct
	{
		background: rgba(0, 255, 0, 0.5);
	}

	#Answers_Card .wrong
	{
		background: rgba(255, 0, 0, 0.5);
	}

	#Results_Details h1
	{
		font-size: 30px;
		font-weight: bold;
		color: white;
	}

	#Results_Details p 
	{
		font-size: 30px;
		color: white;
	}

	#Questions_Card
	{
		background: rgba(0, 0, 0, 0.5);
		width: 30%;
		height: 100%;
		margin-right: 2%;
		margin-left: 10%;
		border-radius: 10px;
		border: solid 5px white;
		color: white;
	}

	#Questions_Card h1
	{
		font-size: 30px;
		text-align: center;
	}

	#Questions_Card p
	{
		font-size: 20px;
		text-align: left;
		margin: 5%;
		width: 80%;
	}

	#Score_Board_Section 
	{
		background: rgba(0, 0, 0, 0.5);
		color: white;
		text-align: center;
		width: 60%;
		height: 200px;
		margin: 0 auto 5%;
		border: white 2px solid;
		border-radius: 10px;
	}
	/*==========================================================================================================*/

/*----------------------------------------------------------------------------------------------------------*/



/*------------------------------------------------------------------------------------------------------------------------------------*/
/* Footer */
footer 
{
    width: 90%;
    padding-left: 5%;
	padding-right: 5%;
    background: rgba(57, 72, 58, 0.8);
    border-radius: 10px;
}

.footer-top 
{
	padding-top: 2%;
    display: flex;
    justify-content: space-between; /* Ensures left & right alignment */
    align-items: center;
}

footer h1 
{
    font-size: 1.5em;
    margin: 0;
}

footer .Nav_Links
{
    display: flex;
}

footer .Nav_Links button
{
    border: none;
    color: white;
    font-size: 1.25vw;
    cursor: pointer;
    padding: 1.05vw 2.20vw;
	margin-right: 50px;
    display: block;
    text-align: center;
	background: rgba(0, 0, 0, 0.5); 
    border-radius: 5px;
}

hr 
{
    margin: 15px 0;
    border: 2px solid white;
	border-radius: 5px;
}

.footer-bottom 
{
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}

.footer-bottom p
{
	color: #888888;
	font-size: 15px;
}

.footer-bottom img
{
    height: auto;
    width: 150px;
}
/*------------------------------------------------------------------------------------------------------------------------------------*/



/*----------------------------------------------------------------------------------------------------------*/
/*for when is in mobile size*/
@media (max-width:800px) 
{
    /* unhide menu icon */
    #Hamburger_Menu
    {
        display: block;
    }
    /*hide the menu item list*/
    nav ul {
        display: none;
    }
	
	nav button
	{
		font-size: 4.55vw;
	}
	

    .Menu_Show {
        display: block;
        text-align: center;

    }
	
	/*==========================================================================================================*/
	/* Home Page */
	
	#Intro_Banner
	{
		animation: Move_Train_Mobile 8s linear infinite;
		background-size: auto 80px, 1300px;   
	}
	
	#Intro_Card_Left
	{
		width: 50%;
		padding: 10px 0px 40px 20px;
	}
	
	#Intro_Card_Left h1, #Intro_Card_Right h1
	{
		font-size: 11.5vw;
	}
	
	#Intro_Card_Left p
	{
		font-size: 3.55vw;
	}
	
	#Intro_Card_Left button
	{
		font-size: 3vw;
		padding: 2.5vw 2.7vw;
		margin-bottom: 10%;
	}

	#Intro_Card_Right
	{
		width: 50%;
	}
	
	#Mini_Game_Canvas {
		width: 100%;
		max-width: 720px;

	}
	/*==========================================================================================================*/
	
	
	/*==========================================================================================================*/
	/* About Page */
	#Train_Length_Display h1
	{
		font-size: 10px;
		width: 10%;
	}
	
	.Train_Info_Card 
	{
		width: 150px;
	}
	
	.Train_Info_Card img
	{
		width: 80px;
	}
	/*==========================================================================================================*/
	
	
	/*==========================================================================================================*/
	/* History Page */

	#History_Info_Left h1
	{
		margin: 20px 20px 0px;
		font-size: 25px;
	}
	
	#History_Info_Left p
	{
		margin: 20px 20px 25px 20px;
		font-size: 3.55vw;
		width: 80%;
	}
	
	#History_Info_Left a
	{
		font-size: 2.25vw;
		padding: 3.55vw 4.5vw;
		margin: 10px 0px 0px 20px;
	}
	
	
	.Timeline_btn {
		padding: 0px;
		font-size: 3.55vw;
		margin: 40px 0px;
	}
	
	.vl
	{
		height: 40px;
		border-left: 2px dashed white;
	}
	
	.Timeline_Icon
	{
		width: 20px;
		height: 10px;
		margin: 0px 10px;
	}
	
	#Quiz_Section
	{
		flex-wrap: wrap;
	}
	
	#Questions_Card h1 
	{
		font-size: 20px;
	}
	
	#Questions_Card
	{
		width: 60%;
		margin-right: 0%;
	    margin-left: 0%;
	}
	
	#Questions_Card p 
	{
		font-size: 3.55vw;
	}
	
	#Answers_Card
	{
		width: 60%;
		margin-top: 5%;
		margin-right: 0%;
	    margin-left: 0%;
	}
	
	#Answers_Card label
	{
		font-size: 2.50vw;
	}
	
	.Quiz_Answer_Icon
	{
		width: 20px;
		height: 20px;
		line-height: 21px;
		margin-right: 5px;
	}
	
	#Results_Details h1
	{
		font-size: 10px;
	}
	
	#Results_Details p
	{
		font-size: 2.25vw;
	}
	
	.Restart_Button
	{
		font-size: 2.25vw;
		padding: 2.55vw 4.5vw;
	}
	/*==========================================================================================================*/
	
	/*==========================================================================================================*/
	footer .Nav_Links button {
		font-size: 15px;
		padding: 2.55vw 4.5vw;
		margin-right: 0px;
		margin: 0px 20px;
	}

	footer .Nav_Links {
		margin: 0 auto;
	}

	.footer-bottom img, .footer-bottom p 
	{
		display: none;
	}
	/*==========================================================================================================*/
}
/*----------------------------------------------------------------------------------------------------------*/