:root {
	--bg01: #080808;
	--bg02: #121212;
	--bg03: #202020;
	--gold00: #f0d123;
	--gold01: #f5d062;
	--gold02: #f8ed73;
	--blue: #165DEF;
	--cyan: #138EFF;
	--green00: #28f87b;
	--green01: #20C060;
	--green02: #1fb05a;
	--purple: #972ce9;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {font-size: 50%}

body {
	font-size: 2.2rem;
	background-color: black;
	color: white;
}

/* Container tags */

nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* Structure */
	gap: 1rem;
	padding: 1rem;
	/* Visuals */
	background-color: black;
	border-bottom: 0.2rem var(--gold00) solid;
	color: var(--gold00);
}

nav > img {
	height: 8rem;
	aspect-ratio: auto;
}

nav > div {
	display: flex;
	align-items: center;
	justify-content: right;
	gap: 4rem;
}

footer {
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: left;
	/* Structure */
	padding: 3rem 1rem;
	/* Visuals */
	background-color: black;
}

#footer-header {
	font-size: 8rem;
	font-weight: bold;
	padding: 0;
}

#footer-contacts {
	display: flex;
	flex-flow: column wrap;
	align-items: center;
	/* Structure */
	width: 100%;
	padding: 2rem 0;
	gap: 2rem;
	/* Visuals */
	font-size: 2.2rem;
}

#footer-contacts > div {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4rem;
}

#footer-contacts h4 {
	letter-spacing: 1px;
	text-align: right;
}

#footer-contacts p {text-align: left}

/* Common container IDs */

#welcome {
	display: flex;
	align-items: center;
	flex-flow: column;
	justify-content: center;
	/* Structure */
	padding: 2rem 10%;
	gap: 1.6rem;
	/* Visuals */
	text-align: justify;
}

#welcome > div {padding: 0 15%}

#welcome button {
	margin: 3.2rem;
	padding: 2rem 3rem;
	font-size: 2.6rem;
}

#welcome button:hover {transform: perspective(6rem) translateZ(1rem)}

#academy {
	display: grid;
	grid-template-rows: 1fr 1fr;
	justify-items: center;
	align-items: center;
	/* Structure */
	height: 30rem;
	padding: 0;
	margin: 2rem;
	/* Visuals */
	background-size: cover;
	background-attachment: fixed;
	border: 2px var(--purple) solid; 
}

#academy > a {
	display: grid;
	align-content: center;
	/* Structure */
	height: 5rem;
	aspect-ratio: 11 / 2;
	/* Visuals */
	background-color: aliceblue;
	border: 2px solid black;
	border-radius: 1rem;
	box-shadow: 10px 10px #0006;
	color: black;
	text-align: center;
	transition: 200ms;
}

#academy h3 {font-weight: 300}

#academy > a:hover {transform: perspective(6rem) translateZ(1rem)}

a > button {
	display: grid;
	align-content: center;
	/* Structure */
	margin: 1rem;
	padding: 1.4rem 2.4rem;
	/* Visuals */
	background-image: linear-gradient(var(--gold01), var(--gold00));
	border: 2px solid var(--gold02);
	border-radius: 1.5rem;
	cursor: pointer;
	font-weight: bold;
	font-size: 2.2rem;
	transition-duration: 200ms;
}

/* Common Classes */

#footer-icons {
	display: flex;
	justify-self: center;
	/* Structure */
	width: auto;
	gap: 5rem;
}

.logo {height: 7rem;	aspect-ratio: 1 / 1}

.line {
	height: 0.3rem;
	margin: 2rem 1rem;
	/* Visuals */
	background-color: white;
	background-size: cover;
}

/* Text */

h1 {
	font-size: 6rem;
	color: transparent;
	background-image: linear-gradient(var(--gold02), var(--gold00));
	background-clip: text;
	text-align: center;
}

h4 {font-size: 3rem}

h1, h2, h3, h4, h5, h6 {font-family: 'Anton'}

p {font-family: 'Carter One'}

small {font-family: 'Carter One'; color: gainsboro}

a {
	font-family: 'Carter One';
	text-decoration: none;
	font-weight: bold;
}

/* Media Queries */

@media (min-width: 768px) {
	html {font-size: 56%}
	nav {flex-direction: row;	justify-content: space-between}
	#welcome {padding: 1rem 16%}#academy {
		grid-template-rows: 1fr;
		grid-template-columns: 1fr 1fr;
		align-items: end;
		/* Structure */
		height: 25rem;
		padding: 4rem 0;
	}

	#academy > article {height: 6rem; width: 36rem}
	footer {flex-flow: row;	justify-content: space-around}
	.logo {height: 9rem;	aspect-ratio: auto}
	h1 {font-size: 7rem}
}

@media (min-width: 1024px) { /* Laptops & Landscape Tablets */
	
	html {font-size: 62.5%}
	
	#footer-header {font-size: 8rem}
	
	.logo {height: 11rem;	aspect-ratio: auto}

	h1 {font-size: 8rem}

}

@media (min-width: 1440px) { /* WXGA+ */
	html {font-size: 75%}
}