/*
	Variables
*/



/*
	Main body
*/
#main {

}

#container {
	width: 80%;
	margin: auto;

	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

/*
	Top Left
*/

#main h1 {
	
	margin: 0;
	margin-top: 10%;
	margin-right: 2.5%;

	word-spacing: .1em;
	line-height: .8em;

	text-align: right;

	font-size: 8em;
	font-weight: 900;

	--gradient-start: var(--color-yellow);
	--gradient-end: var(--color-pink);

}

/*
	Top Right
*/

#trailer {
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 1em;
}

/*
	Blurb
*/

#main article {
	grid-column: 1 / 3;
	margin: 2.5%;

	color: var(--color-tan);
	display: flex;
	flex-direction: column;
    justify-content: flex-end;
    gap: 10% 0;

}

#main p {

	margin: 0;

}

/*
	Divider
*/
.divider {
	grid-column: 1 / 3;

	margin: 1% auto;
	
	width: 100%;
	height: 1.5vh;

	--gradient-start: var(--color-pink);
	--gradient-end: var(--color-dark-pink);
}

/*
	Bottom Left
*/

#twitterContainer {
	margin: auto;
	width: 100%;
	grid-column: 1 / 2;
	grid-row: 4 / 5;
}

/*
	Bottom Right
*/

#interviews {
	margin: 0;
	margin-left: 2.5%;


	z-index: 5;
	grid-column: 2 / 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

#interviews h3 {

	display: inline;

	font-size: 3em;
	font-weight: 900;

	margin: 0;

	text-align: right;

	--gradient-start: var(--color-yellow);
	--gradient-end: var(--color-pink);
}

#interviews li {
	list-style: square;
	color: white;
	font-size: 2em;
}

#interviews a {
	color: white;
}




/*
	Mobile tweaks
*/

@media (max-width: 1100px) {

	#container {

		display: flex;
		flex-direction: column;
		width: 95%;
	}

	#trailer {
		margin: 0;
	}

	.divider {
		display: none;
	}

	#main h1 {
		
		margin: auto;
		margin-top: 5%;
		margin-bottom: 5%;

		text-align: center;

		font-size: 4em;

		display: inline-block;

	}

	#main p {

		margin: 1%;

	}

	#interviews {
		margin: auto;

	}
	
}