/*:root {
	--text: rgb(226, 253, 248);
	--background: rgb(2, 21, 17);
	--primary: rgb(119, 245, 217);
	--secondary: rgb(62, 12, 157);
	--accent: rgb(207, 61, 240);
}

:root {
	--text: rgb(230, 236, 226);
	--background: rgb(7, 9, 6);
	--primary: rgb(181, 198, 169);
	--secondary: rgb(126, 100, 28);
	--accent: rgb(158, 110, 107);
}
*/

:root {
	--text: rgb(229, 238, 235);
	--background: rgb(10, 16, 15);
	--primary: rgb(167, 205, 195);
	--secondary: rgb(54, 104, 91);
	--accent: rgb(115, 188, 170);
}

/* * SELECTOR */

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

/* BODY */

body {
	height: 100vh;
}

/* CLASS */

.no-select {
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* STYLES UNTIL 1000PX */

@media screen and (min-width: 1000px) {

	/* NAV */

	#main-nav {
		width: 100%;
		height: calc(100%/15);

		background-color: var(--background);
		position: relative;
		border-bottom: 1px solid var(--primary);
	}

	#main-nav > h2 {
		color: var(--text);
		font-size: 1.1rem;
		font-family: Montserrat, serif;
		letter-spacing: 0.5rem;

		display: grid;
		place-items: center;
		padding-left: 3vw;
		padding-right: 10rem;

		position: absolute;
		height: 100%;

		transition: letter-spacing 0.3s;
		cursor: pointer;
	}

	#main-nav > h2:hover {
		letter-spacing: 1rem;
	}

	#main-nav > #main-nav-links {
		top: 0;
		right: 0;

		position: absolute;
		height: 100%;
		width: fit-content;

		display: flex;
		border-left: 1px solid var(--primary);
	}

	#main-nav > #main-nav-links > a {
		width: 50%;
		color: var(--text);
		text-decoration: none;
		font-family: Montserrat, serif;
		font-size: 1.1rem;

		display: grid;
		place-items: center;
		transition: background-color 0.3s;
		padding-right: 2vw;
		padding-left: 2vw;
	}

	#main-nav > #main-nav-links > a:hover {
		background-color: rgba(255,255,255,0.1);
	}

	/* MAIN-CONTENT */

	#main-content {
		width: 100%;
		height: calc(100% - calc(100%/15));

		background-color: var(--background);
		display: flex;
	}

	#main-content > #main-courtain {
		position: absolute;
		width: 100%;
		height: calc(100% - calc(100%/15));
		bottom: 0;
		background: rgb(2,0,36);
		background: linear-gradient(180deg, transparent 0%, transparent 60%, var(--background) 100%); 
		z-index: 2;
	}

	#main-content > #main-content-text {
		width: 50%;
		height: 100%;

		display: flex;
		justify-content: center;
		align-items: center;

		transition: all 0.3s;
	}

	#main-content > #main-content-text > #main-content-text-wrapper {
		width: calc(100%/1.5);
		height: fit-content;
	}

	#main-content > #main-content-text > #main-content-text-wrapper > h1 {
		color: var(--text);
		font-size: 5vw;
		font-family: Galada;
		/*font-family: Manrope, serif;*/
		font-weight: 800;

		text-decoration: underline var(--secondary);
		text-decoration-thickness: 10px;
	}

	#main-content > #main-content-text > #main-content-text-wrapper > h3 {
		color: rgba(255,255,255,0.5);
		font-size: calc(1vw + 14px);
		font-family: Montserrat, serif;
		font-weight: 500;

		width: 100%;
	}

	#main-content > #main-content-img {
		width: 50%;
		height: 100%;

		position: relative;
		overflow-x: hidden;
		transition: all 0.3s;
	}

	#main-content > #main-content-img > img {
		position: absolute;
		left: calc(100%/10);
		bottom: 0;

		filter: grayscale(1);
	}

	/* MAIN-SECTION */

	#main-section {
		width: 100%;
		height: 100vh;
		background-color: var(--background);
		border-top: 1px solid var(--primary);

		display: grid;
		place-items: center;
	}

	#main-section > #card-wrapper {
		width: calc(100%/1.5);
		height: calc(100%/2);
		display: flex;
		gap: 5vw;
	}

	#main-section > #card-wrapper > .card {
		position: relative;
		width: calc(100%/3);
		height: 100%;
		border: 2px solid var(--secondary);
		box-shadow: 20px 20px 0px 5px var(--secondary);

		border-radius: 10px;
		transition: box-shadow 0.3s;

		display: flex;
		flex-direction: column;
		align-items: center;
	}

	#main-section > #card-wrapper > .card:hover {
		box-shadow: 20px 20px 0px 0px var(--secondary);
	}

	#main-section > #card-wrapper > .card > h1 {
		font-family: Manrope, serif;
		font-weight: 900;
		font-size: 2vw;
		color: var(--text);

		width: fit-content;
		height: calc(100%/3);

		display: grid;
		place-items: center;

		text-decoration: underline var(--accent);
		text-decoration-thickness: 5px;
	}

	#main-section > #card-wrapper > .card > p {
		font-family: Montserrat, serif;
		color: rgba(255,255,255,0.5);
		font-size: calc(1vw + 7px);

		width: 80%;
		height: calc(100% - calc(100%/3));
		
		padding-top: 2vw;
	}

	#main-section > #card-wrapper > .card > span {
		position: absolute;
		color: var(--secondary);
		font-size: 2vw;

		bottom: 5px;
		right: 15px;
	}

	/* STAR */

	#star {
		width: 100%;
		height: 190px;

		display: flex;
		align-items: center;
		justify-content: center;
		background-color: var(--background);
		position: relative;
	}

	#star > #star-icon {
		width: fit-content;
		color: var(--text);
		font-size: calc(3vw + 25px); 
		text-align: center;
		transition: transform 0.3s;
	}

	/* SECOND-SECTION */

	#second-section {
		width: 100%;
		height: calc(100% - calc(100vh/15));
		background-color: var(--background);

		display: flex;
		justify-content: center;
		align-items: center;
	}

	#second-section > h1 {
		position: absolute;
		font-size: 15vw;
		font-family: Galada;
		color: rgba(255,255,255,0.1);
	}

	#second-section > p {
		width: calc(100%/2);
		font-size: 2vw;
		font-family: Manrope, serif;
		color: var(--text);
		z-index: 1;
	}

	#second-section > p > span {
		text-decoration: underline var(--accent);
		text-decoration-thickness: 5px;
	}

	/* FOOTER */

	#main-footer {
		width: 100%;
		height: calc(100vh/15);

		background-color: var(--background);
		border-top: 1px solid var(--primary);
		position: relative;
	}

	#main-footer > h1 {
		width: fit-content;
		height: 100%;
		color: var(--text);
		font-size: 1.1rem;
		font-family: Montserrat, serif;
		letter-spacing: 0.5rem;

		display: grid;
		place-items: center;

		padding-left: 2vw;
		transition: letter-spacing 0.3s;
	}

	#main-footer > h1:hover {
		letter-spacing: 1rem;
	}

	#main-footer > #footer-a-wrapper {
		position: absolute;
		top: 0;
		right: 0;
		width: fit-content;
		height: 100%;
		border-left: 1px solid var(--primary);
	}

	#main-footer > #footer-a-wrapper > a {
		width: 100%;
		height: 100%;
		display: grid;
		place-items: center;

		color: var(--text);
		font-size: 1.2rem;
		padding-left: 5rem;
		padding-right: 5rem;

		text-decoration: none;
		font-family: Montserrat, serif;

		transition: background-color 0.3s;
	}


	#main-footer > #footer-a-wrapper > a:hover {
		background-color: rgba(255,255,255,0.1);
	}

}