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

/* /////////////// Typography //////////////// */
body {
	/* set your basic default text styles */
	line-height: 1.5;
	font-family: "Fira Sans", Lato, Arial, Helvetica, sans-serif;
	font-size: 16px;
	align-self: center;
}
h1 {
	font-size: clamp(36px, 4vw, 5vw);
	text-align: center;
}
h1,
h2,
h3 {
	line-height: 1.1;
}
/* Heading style settings */
p {
	margin-top: 30px;
}
a:hover img {
	filter: brightness(0%);
}

/* Body copy styles */

/* /////////////// 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;
	/* Acts as main element for any content set to absolute */
	overflow: hidden;
	/* Content that goes outside screen size is hidden from view */
	min-height: 100%;
	display: flex;
	/* Flex parent */
	justify-content: center;
	/* Sets content to center of x-axis */
	align-items: center;
	/* Sets content to center of y Axis */
	flex-direction: column;
	/* As flex cretes inline display for content flex-direction stacks it as if it was block display */
}

/* .center {
	width: 35vw;
} */
.title {
	background-color: white;
	/* Sets background to white */
	padding: 10px;
	/* Creats active area around content */
	animation-name: title;
	/* Enables a keyframe animation */
	animation-duration: 3s;
	/* Animation runs for 3 seconds */
	margin-bottom: 30px;
	/* Space below elements */
}
@keyframes title {
	0% {
		opacity: 0;
	}
	/* At 0% of the animation time the opacity is 0 */
	100% {
		opacity: 1;
	}
	/* At the end of the animation time the opacity is 100% */
}
.loading {
	display: inline;
	/* allows content to run across screen */
}

.dot {
	display: inline;
	animation-name: dot;
	animation-duration: 2.5s;
	animation-iteration-count: infinite;
	/* Animation runs in a loop */
}
/* This animation makes the dots appear 1 at a time slowly as if its loading */
@keyframes dot {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.box {
	display: flex;
	max-width: 100px;
	/* Size of box wont exceed 100px but can shrink for smaller screen sizes */
	max-height: 100px;
}

.box img {
	min-width: 100px;
}
.hover {
	animation-name: pulse;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-delay: 3s;
}

@keyframes pulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}

.img {
	max-width: 100%;
	max-height: 100%;
	/* Image spans entire screen, using percentage means it can scale up and down as browser size changes */
}

.updates {
	display: flex;
	justify-content: center;
	gap: 20px;
	/* Puts space between elements on the elft and right */
	animation-name: updates;
	animation-duration: 2s;
	/* animation-timing-function: ease-out; */
}
@keyframes updates {
	0% {
		opacity: 0;
		transform: translateY(300px);
		/* At start of animation the updates are 300px down the screen */
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
		/* End of animation the content appears where it is set in the html */
	}
}
.bg {
	position: absolute;
	/* Allows content to be placed in a specific place on the screen */
	width: 100%;
	top: -25%;
	/* Content starts 25% off the screen from the top */
	z-index: -1;
	/* Puts content behind regular elemts on the page */
}

.bg img {
	max-width: 3000px;
	animation-name: lineone;
	animation-duration: 15s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	/* Creates a smooth transition from end of animation to start of it */
}

/* Combinator to start animation and set animation rules */

@keyframes lineone {
	0% {
		transform: translate(5px, -5px) skewY(10deg);
		/* moves element 5 px to the right and 5 px upwards while disotriting the image by 10 degrees */
	}

	50% {
		transform: translate(-5px, 0px) skewY(-20deg) scaleX(2);
		/* Increases image size by double on the x axis halfway through animation */
	}
	100% {
		transform: translate(5px, -5px) skewY(10deg);
	}
}

.bgtwo {
	position: absolute;
	width: 100%;
	top: -1%;
	z-index: -1;
}

.bgtwo img {
	max-width: 3000px;
	animation-name: linetwo;
	animation-duration: 30s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

@keyframes linetwo {
	0% {
		transform: translate(5px, -10px) skewY(30deg);
	}

	50% {
		transform: translate(-10px, 0px) skewY(-30deg) scale(2, 3);
		/* scales animation x axis by double and 3 times on y to create distorition */
	}
	100% {
		transform: translate(5px, -10px) skewY(30deg);
	}
}

.bgthree {
	position: absolute;
	width: 100%;
	top: -10%;
	z-index: -1;
}

.bgthree img {
	max-width: 3000px;
	animation-name: linethree;
	animation-duration: 20s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

@keyframes linethree {
	0% {
		transform: translate(-5px, -10px) skewY(-30deg);
	}

	50% {
		transform: translate(0px, 0px) skewY(0deg) scaleX(1);
	}
	100% {
		transform: translate(-5px, -10px) skewY(-30deg);
	}
}

.bgr {
	position: absolute;
	width: 100%;
	top: 75%;
	transform: scale(-1, -1);
	/* This is done to mirror images from there original state to a reverse */
	z-index: -1;
}

.bgr img {
	max-width: 3000px;
	animation-name: lineoner;
	animation-duration: 15s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

@keyframes lineoner {
	0% {
		transform: translate(5px, -5px) skewY(10deg);
	}

	50% {
		transform: translate(-5px, 0px) skewY(-20deg) scaleX(2);
	}
	100% {
		transform: translate(5px, -5px) skewY(10deg);
	}
}

.bgtwor {
	position: absolute;
	width: 100%;
	top: 99%;
	transform: scale(-1, -1);
	z-index: -1;
}

.bgtwor img {
	max-width: 3000px;
	animation-name: linetwor;
	animation-duration: 30s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

@keyframes linetwor {
	0% {
		transform: translate(5px, -10px) skewY(30deg);
	}

	50% {
		transform: translate(-10px, 0px) skewY(-30deg) scale(2, 3);
	}
	100% {
		transform: translate(5px, -10px) skewY(30deg);
	}
}

.bgthreer {
	position: absolute;
	width: 100%;
	top: 90%;
	z-index: -1;
	transform: scale(-1, -1);
}

.bgthreer img {
	max-width: 3000px;
	animation-name: linethreer;
	animation-duration: 20s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

@keyframes linethreer {
	0% {
		transform: translate(-5px, -10px) skewY(-30deg);
	}

	50% {
		transform: translate(0px, 0px) skewY(0deg) scaleX(1);
	}
	100% {
		transform: translate(-5px, -10px) skewY(-30deg);
	}
}

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

/* Starting at tablet width and larger */

@media only screen and (min-width: 769px) {
}

/* Starting at desktop width and larger */

@media only screen and (min-width: 1080px) {
}