@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap');

/* Base Elements */

* {
	margin: 0;
	padding: 0;
	font-family: 'Ubuntu Mono';
}

/* Base Components */

.page {
	height: 100dvh;  /* https://stackoverflow.com/a/70048720/8314159 */
	display: grid;
	place-items: center;
}

/* Entities */

.entity-category {
	color: rgba(255, 255, 255, 0.9);
}

.entity {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	background-color: rgb(66, 66, 66);
	border-radius: 5vmin;
	font-size: max(3vw, 4vh);
	text-wrap: nowrap;
	margin: 0 5%;
	padding: 1% 3%;
}

.entity span {
	font-size: clamp(3vw, 4vh, 5vw);
	padding: 0.5% 2%;
	margin: 0.5%;
	border-radius: 10vmin;
}

.entity a {
	color: rgba(255, 255, 255, 0.9);
	font-size: clamp(4vw, 6.5vh, 10vw);
	flex: 1 0 100%;
	text-align: center;
}

.entity #founder {
	background-image: linear-gradient(to right, #f2709c, #ff9472);
}

.entity #leader {
	background-image: linear-gradient(to right, #9bfbc6, #99f6ff);
}

.entity #manager {
	background-image: linear-gradient(to right, hsl(23, 100%, 71%), hsl(33, 100%, 56%));
}

.entity #strategist {
	background-image: linear-gradient(to right, #81aef8, #c2e9fb);
}

.entity #assistant {
	background-image: linear-gradient(to right, #b381f8, #8ff0ff);
}

/* Page 1 */

#page1 {
	text-align: center;
	background-image: linear-gradient(red, yellow);
}

#intro {
	display: grid;
	place-items: center;
	grid-template-rows: 2fr 1fr 1fr;
	width: 80%;
	height: 75%;
	container-type: size;
}

@media (max-aspect-ratio: 1/1) {
	#intro {
		grid-template-rows: 1fr 1fr 1fr;
	}
}

img#hyperstellar-icon {
	width: 10vmax;
}

#intro a {
	color: black;
	font-size: 15cqmin;
}

#intro p {
	font-size: 3.5cqw;
	text-align: center;
	box-sizing: border-box; /* Ensure padding is included in width */
	flex: 0 0 calc((100% - 20px) / 3); /* For medium: 3 per row, accounting for 2 gaps */
}

#intro #description {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

/* Very narrow viewport (aspect ratio <= 0.8, e.g., smartphone in portrait) */
@media (max-aspect-ratio: 8/10) {
	#intro #description {
		flex-direction: column;
		align-items: center;
	}
	#intro p {
		flex: 0 0 auto;
		width: 100%;
		font-size: 7.5cqmin;
	}
}

/* Very wide viewport (aspect ratio >= 16:9, e.g., widescreen monitor) */
@media (min-aspect-ratio: 21/9) {
	#intro p {
		flex: auto;
		font-size: 7cqh;
	}

	#intro #description {
		gap: 20px;
	}
}

#intro-btns {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 5%;
	padding-top: 5%;
	width: 95%;
	height: 95%;
	font-size: 4cqmin;
}

@media (max-aspect-ratio: 1/1) {
	#intro-btns {
		flex-direction: column;
		font-size: 6cqmin;
	}
}

#intro-btns .btn {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 25%;
	padding: 3%;
	border-radius: 1%;
	color: aliceblue;
	font-size: clamp(2vw, 3vh, 6vw);
}

@media (min-aspect-ratio: 21/9) {
	#intro-btns .btn {
		width: 25%;
		height: 10%;
		font-size: 1.5cqw;
	}
}

#discord-btn {
	/*# is for id, . is for class*/
	background-color: #1327fa;
}

#chinese-btn {
	background-color: #fa1313;
}

/* Page 2 */

#page2 {
	grid-template-rows: 1fr 3fr 3fr;
	background-image: linear-gradient(rgb(51, 102, 255), rgb(238, 102, 229));
}

div#page2 .entity-category {
	font-size: max(5vw, 7vh);
}

/* Page 3 */

#page3 {
	grid-template-rows: 1fr 3fr 3fr;
	background-image: linear-gradient(#db573d, #1f67cc);
}

div#page3 .entity-category {
	font-size: max(5vw, 4vh);
}

div#page3 #sec1 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

div#page3 #sec2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

@media (max-aspect-ratio: 1/1) {
	div#page3 #sec1 {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr 1fr;
		gap: 5%;
	}
	div#page3 #sec2 {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr;
		gap: 5%;
	}
}

div#page3 .entity span {
	font-size: clamp(3vw, 3.5vh, 5vw);
}

div#page3 .entity a {
	font-size: clamp(4vw, 4.5vh, 10vw);
}

/* Page 4 */

div#page4 {
	grid-template-rows: 1fr 2fr 1fr 2fr;
	background-image: linear-gradient(#34e89e, #0f3443);
}

div#page4 h1 {
	color: rgba(255, 255, 255, 0.9);
	font-size: clamp(5vw, 8vh, 10vw);
}

div#page4 img {
	width: 12.5vh;
}