/* ----------------   GENERAL STYLESHEET   ------------------ */
@import url("https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Orbitron:wght@400..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

/* /////////////// Typography //////////////// */
body {
	/* set your basic default text styles */
	line-height: 1.5;
	background-color: hsl(203, 100%, 11%);
	color: white;
	/* The background colour of the webpage is changed to a 
	dark blue and the text colour to white. */
	margin: 10px 75px 10px 75px;
	/* The margins provide space at the top so that elements
	are not too close to the edge.  */
}

h1,
h2,
h3 {
	line-height: 1.1;
	font-family: "Bai Jamjuree", "Orbitron", sans-serif;
	text-align: center;
	/* The font  for headings is changed to "Bai Jamjuree" and the text is aligned
	at the center */
	font-size: 50px;
	font-weight: 375;
	/* The font size is set to 50px and weight is medium */
}

p {
	margin-top: 1em;
	font-family: "Roboto", "PT Sans", Helvetica, Arial, sans-serif;
	font-size: 25px;
	/* The font for body text is changed to "Roboto" and
	the font size is set to 25px  */
}

/* /////////////// Colours //////////////// */
/* Optionally set your colour variable here. */

/* /////////////// Layout //////////////// */
/* Optional - if you have any layout styles that you've used in a previous project, you can reuse code. Just copy and paste whatever is useful. */

.container {
	/* This sets a default content area that will fill the screen. If any of these rules don't fit your plan, you can edit or delete them. */
	position: relative;
	overflow: hidden;
	/* prevents the page from scrolling */
	height: 100vh;
	/* percentage of the height of the viewport */
	max-width: 100vw;
	/* percentage of the width of the viewport */
}
.logo {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 500px;
	width: 100%;
	height: auto;
	/* Adjusts the size and spacing of the logo 
	and aligns it at the center of the page  */

	/* Logo Animation */
	animation-name: slide-down;
	animation-duration: 900ms;
	/* Defines the typr of animtion that will occur and 
	 how long it will play out */
}
@keyframes slide-down {
	0% {
		opacity: 0;
		transform: translateY(-100%);
		/* The opacity of the logo starts at 0% and 
		occurs on the Y-axis from the top */
	}
	100% {
		opacity: 1;
		transform: translateY(0);
		/* The opacity of the logo changes to 100% at
		the end of the animation */
	}
}
.coming-soon {
	opacity: 0%;
	/* The text appears invisible at the start of the page */
	animation-name: creep;
	animation-duration: 900ms;
	/* Defines the type of animation occuring and  
	how long it will occur */
	animation-delay: 1.5s;
	/* The animation will play after a 1.5 second delay */
	animation-fill-mode: forwards;
	/* the text will retain its style values defined by
	the final keyframe after the animation plays. */
}
@keyframes creep {
	0% {
		opacity: 0;
		transform: translateY(-100%);
		/* At 0%, the opacity of the text is 0 and the
		animation occurs on the Y-axis */
	}
	100% {
		opacity: 1;
		transform: translateY(0);
		/* At 100%, the opacity changes to 100% and the
		text appears below the logo */
	}
}

/* Loading dots from:
https://norbertbmwebdev.substack.com/p/how-to-create-3-animated-loading */

.loading-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	/* Uses a flexbox to center and space the dots so
	they appear beside each other */
	gap: 8px;
	margin-top: 50px;
	/* Spacing beteween dots */
}
.dot {
	/* styling or the dots */
	width: 20px;
	height: 20px;
	background-color: #2779b3;
	border-radius: 50%;

	/* Dots animation */
	animation: bounce 1.2s infinite ease-in-out;
}
.dot:nth-child(1) {
	animation-delay: 0s;
}
.dot:nth-child(2) {
	animation-delay: 0.2s;
}
.dot:nth-child(3) {
	animation-delay: 0.4s;
	/* Animation delays for each dot creates the wave effect */
}
@keyframes bounce {
	0%,
	80%,
	100% {
		transform: scale(0);
		/* dots are hidden at the start and end of the cycle */
	}
	40% {
		transform: scale(1);
		/* dots are visible and full size in the middle */
	}
}
.loading {
	margin-top: 10%;
	margin-bottom: 10%;
	opacity: 0%;
	animation-name: loading;
	animation-duration: 1000ms;
	animation-delay: 4.75s;
	animation-fill-mode: forwards;
	/* Ensures that the animation is invisible at the start and
	plays after a 4.75 second delay */
}
@keyframes loading {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
	/* the opacity of the dots is at 0% at the start of the 
	animation and changes to 100% at the end*/
}
.cta {
	opacity: 0%;
	display: flex;
	justify-content: center;
	margin-top: 15%;
	gap: 0.25rem;
	/* Uses a flexbox for the Call-to-Action so that elements
	appear beside each other and aligned at the center of 
	the page */

	animation-name: call-to-action;
	animation-duration: 1000ms;
	animation-delay: 3s;
	animation-fill-mode: forwards;
	/* The animation plays at 1000ms after a 3 second delay
	and will retain its current style at the end of the animation  */
}
@keyframes call-to-action {
	0% {
		opacity: 0;
		transform: translateX(100%);
		/* At 0%, the elements are at 0% and the animation
		will occur on the X-axis so that the text slides in
		from the right */
	}
	100% {
		opacity: 1;
		transform: translateX(0);
		/* At 100%, the elements are full visible and the animation
		shows the elements slideing in from the right */
	}
}
.social-btn {
	align-content: center;
	width: 100px;
	height: 100px;
	max-width: none;
	object-fit: contain;
	flex-shrink: 0;
	/* The size of the social media icons is changed to 100px
	and aligned at the center */
}
.social-btn:hover,
.social-btn:focus {
	width: 104px;
	height: auto;
	transition-duration: 300s;
	transition: all 100ms ease-in-out;
	/* When hovering over social media icons, the size increases
	to 105px and transition properties ensure it occurs smoothly */
}
.social-btn:active {
	width: 100px;
	/* When the social media icons are clicked, the size reverts back to 100px */
}

/* --------------------MEDIA QUERIES------------------ */

/* Starting at tablet width and larger */

@media only screen and (max-width: 900px) {
	.coming-soon {
		margin-bottom: 50%;
	}
	.loading {
		margin-bottom: 50%;
	}
	/* adjusts spacing of the container classes at mobile width. */
}

/* Starting at desktop width and larger */

@media only screen and (min-width: 1080px) {
	.loading {
		margin-top: 10%;
		margin-bottom: 10%;
		/* adjusts the spacing of container class at desktop wdith. */
	}
}