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

	#main-nav {
		width: 100%;
		height: 2rem;
		background-color: var(--background);

		position: relative;
		border-bottom: 1px solid white;
	}

	#main-nav > h2 {
		position: absolute;
		width: fit-content;
		height: 100%;
		left: 10px;

		font-size: 0.9rem;
		font-family: Montserrat, serif;
		color: white;
		display: flex;
		align-items: center;
	}


	#main-nav > #main-nav-links {
		position: absolute;
		width: fit-content;
		height: 100%;

		right: 0;
		display: flex;
		flex-direction: row;
		gap: 2vw;
		padding-right: 2vw;
		padding-left: 2vw;
		align-items: center;
		border-left: 1px solid white; 
	}

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

	#main-nav > #main-nav-links > a:hover {

	}

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

		background-color: var(--background);
		display: flex;
		flex-direction: column;
		position: relative;
	}

	#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: 100%;
		height: calc(100%/2);

		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: 8vw;
		font-family: Galada;
		/*font-family: Manrope, serif;*/
		font-weight: 800;

		text-decoration: underline var(--secondary);
		text-decoration-thickness: 5px;
		width: 100%;
		text-align: center;
	}

	#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%;
		text-align: center;
	}

	#main-content > #main-content-img {
		width: 100%;
		height: calc(100%/2);

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

	#main-content > #main-content-img > img {
		position: absolute;
		bottom: 0;
		transform: translateX(25%);

		filter: grayscale(1);
		width: calc(100%/1.5);
	}

	#main-section {
		width: 100%;
		height: fit-content;
		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: fit-content;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10vw;

		padding-top: 10vw;
		padding-bottom: 10vw;
	}

	#main-section > #card-wrapper > .card {
		position: relative;
		height: 350px;
		width: 300px;
		border: 2px solid var(--secondary);
		box-shadow: 10px 10px 0px 3px 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: 10px 10px 0px 0px var(--secondary);
	}

	#main-section > #card-wrapper > .card > h1 {
		font-family: Manrope, serif;
		font-weight: 900;
		font-size: 1.8rem;
		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: 1.2rem;

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

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

		bottom: 5px;
		right: 15px;
	}

	#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 {
		width: 100%;
		height: calc(50% - calc(100vh/15));
		background-color: var(--background);

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

		margin-top: -7vw;
	}

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

	#second-section > p {
		width: 75%;
		font-size: 1rem;
		font-family: Manrope, serif;
		color: var(--text);
		z-index: 1;
	}

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

	#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: 0.9rem;
		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: 1rem;
		padding-left: 3rem;
		padding-right: 3rem;

		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);
	}
}