/* ----------------   GENERAL STYLESHEET   ------------------ */
/* 
* animate.css - https://animate.style/
 * Version - 4.1.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2020 Animate.css
  */

/* --------------- CLASSES ------------- */
.title-fill {
	/* This turns the element into a flex container. */
	display: flex;
	margin-top: 3vh;
	/* This centers items horizontally. */
	justify-content: center;
	/* This centers items vertically. */
	align-items: center;
	/* This is the font the text is displayed in. */
	font-family: "Major Mono Display", monospace;
	/* This gives the element colour. */
	color: white;
	/* animation: name duration timing-function delay iteration-count direction fill-mode; */
	animation: backInLeft 2.5s ease forwards 0.15s;
}

.rotation {
	/* This gives defined space around the element. */
	padding: 2rem 1rem;
	display: flex;
	justify-content: center;
}

.rotation-frame {
	position: relative;
	/* This controls how wide the elements can be on the page. */
	width: 90vw;
	/* This applies a max width on an element. */
	max-width: 900px;
	/* This controls the proportion of the element. */
	aspect-ratio: 16/9;
	/* This allows for all (height, width, top, bottom) overflow is hidden and makes the page not scrollable. */
	overflow: hidden;
	/* This sets the transparency level of the element. */
	opacity: 0;
	/* This changes the position of the element. */
	transform: translateY(100vh);
	animation: slideInUp 2s ease forwards 6s;
}

.rotation-img {
	/* This removes an element from the regular flow and places it relative to its nearest ancestor. */
	position: absolute;
	/* This positions an element relative to its containing block. */
	inset: 0;
	width: 100%;
	/* This sets the height of an element. */
	height: 100%;
	/* This tells the image to fill the container without distortion. */
	object-fit: cover;
	opacity: 0;
	animation: fadeRotation 10s infinite;
}

.rotation-img.img1 {
	/* This specifies the amount of time to wait after an animation is applied before it begins the animation. */
	animation-delay: 6s;
}
.rotation-img.img2 {
	animation-delay: 9s;
}
.rotation-img.img3 {
	animation-delay: 12s;
}

/* ------------- BUTTONS ------------- */

.buttons {
	font-family: "Outfit", sans-serif;
	/* This is the size of the font. */
	font-size: 2em;
	padding: 0.75em;
	color: white;
	/*Text decoration*/
	text-decoration: none;
}

/* Hover states only work when using a mouse. */
.buttons:hover {
	transform: translateY(-5px);
	text-decoration: underline;
}

/* ------------ TYPOGRAPHY ------------- */

.major-mono-display-regular {
	font-family: "Major Mono Display", monospace;
	/* This is the weight styling of the font. */
	font-weight: 400;
	font-style: normal;
}

.Outfit {
	font-family: "Outfit", sans-serif;
	/* This lets the browswer automatically adjust the appearecne of the font for legibility. */
	font-optical-sizing: auto;
	font-weight: 900;
	font-style: normal;
}

body {
	/* This sets the height of each line box within an element. */
	line-height: 1.5;
	/* This is the element minimun width. */
	min-width: 100vw;
	min-height: 100vh;
	/* This is the background colour. */
	background-color: black;
}

h2 {
	font-family: "Outfit", sans-serif;
	font-size: 2em;
	display: flex;
	justify-content: center;
	line-height: 1;
	opacity: 0;
	color: white;
	/* This is the amount of space on the top of an element. */
	margin-top: 10vh;
	animation: slideInUp 2s ease forwards 2.9s;
}

p {
	font-family: "Outfit", sans-serif;
	font-size: 1.5em;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	opacity: 0;
	animation: slideInUp 2s ease forwards 4s;
}

/* ----------- KEYFRAMES ---------- */
/* These are used to control the steps of an animation. */

@keyframes backInLeft {
	0% {
		top: 10vh;
		left: 0vw;
		/* This allows the element to scale without changing the page layout. */
		transform: scale(1);
		opacity: 0.7;
		/* This is the visible area of an element, it hides everything outside of it. */
		clip-path: inset(0 100% 0 0);
	}

	80% {
		top: 10vh;
		left: 25vw;
		transform: scale(1);
		opacity: 0.7;
	}

	100% {
		top: 10vh;
		left: 42vw;
		transform: scale(2.5);
		opacity: 1;
		clip-path: inset(0 0 0 0);
	}
}

@keyframes slideInUp {
	0% {
		transform: translateY(100vh);
		opacity: 0;
	}
	100% {
		transform: translateY(0vh);
		opacity: 1;
	}
}

@keyframes fadeRotation {
	0% {
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	30% {
		opacity: 1;
	}
	40% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

/* --------------- Layout --------------- */
section {
	margin: 10px 20px 20px 10px;
}

.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;
	min-height: 100vh;
}

.header-section {
	display: flex;
	justify-content: flex-end;
	padding: 0 2em 0 0;
}

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

@media only screen and (max-width: 768px) {
	.title-fill {
		/* This makes the container display elements in a column. */
		flex-direction: column;
		display: block;
		width: min-content;
		margin-left: auto;
		margin-right: auto;
		/* This centers text. */
		text-align: center;
		font-size: 1.5rem;
	}
}

/* Starting at desktop width and larger */

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

@media (prefers-reduced-motion: reduce) {
	.rotation-img {
		animation: none;
		opacity: 1;
	}
	.rotation-img.img2,
	.rotation-img.img3 {
		/* This makes the elements not show. */
		display: none;
	}
}