@import url("/css/pages/project.default.css");
:root{
	--texture-size: 64px;


	--divider-img: url('/packs/boom/img/stone_andesite_smooth.png');
/*	--hero-banner: url('./img/screenshot.0.png');*/
	--main-bg: url('./img/nether_brick.png');
	--title-art-bg: url('/packs/boom/img/brick.png');
	--pack-details-bg: url('./img/nether_brick.png');
	--variants-bg: url('./img/brick.png');
	--downloads-bg: url('./img/smooth_stone_bricks.png');
	--downloads-bg: url('./img/stone.png');
	--sub-packs-bg: url('./img/smooth_stone_bricks.png');



}

main,
section,
h1#title-art,
div.section-divider{
background: round left top/var(--texture-size);
image-rendering:pixelated;
display: block;
}



main{background-image: var(--main-bg);}
/*div#hero-banner{background-image: var(--hero-banner);}*/
/*section#trailer-section{background-image: var(--trailer-bg);}*/
h1#title-art		{background-image: var(--title-art-bg);}
section#pack-details{background-image: var(--pack-details-bg);}
section#variants{background-image: var(--variants-bg);}
section#downloads{background-image: var(--downloads-bg);}
section#sub-packs{background-image: var(--sub-packs-bg);}




	div.section-divider{height: var(--texture-size);}

	section#trailer-section + div.section-divider{background-image: url('/packs/boom/img/stone_andesite_smooth.png');}
	h1#title-art + div.section-divider{background-image: url('/packs/boom/img/stone_andesite_smooth.png');}
	section#pack-details + div.section-divider{background-image: url('/packs/boom/img/stone_andesite_smooth.png');}
	section#variants + div.section-divider{background-image: url('/packs/boom/img/stone_andesite_smooth.png');}
	section#downloads + div.section-divider{background-image: url('/packs/boom/img/stone_andesite_smooth.png');}
	section#sub-packs + div.section-divider{background-image: url('/packs/boom/img/stone_andesite_smooth.png');}









section#trailer-section{
min-height: 576px;
width: 100%;
max-width: none;
padding-left: 0;
padding-right: 0;
}


@media screen and (max-width: 1108px){
section#trailer-section{
min-height: 0;
aspect-ratio: 16 / 9;
}
}

	section#trailer-section > .trailer-wrapper{
	width: 75%;
	max-width: 1024px;
	padding: 0 2rem;
	margin: auto;
	position: relative;
	}









@media screen and (max-width: 768px){
:root{
	--texture-size: 32px;
}
}



#trailer{
	outline: solid black 4px;
}

