Template:Main Page/styles.css

@media (min-width: 720px) {
	.grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.25em;
	}
}

@media (min-width: 1290px) {
	.grid {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0.25em;
	}
}

.text-center {
	text-align: center;
}

.MP-h1 {
	font-size: 2.25rem;
	line-height: 2.5rem;
	font-weight: 700;
}

.column-span-3 {
	grid-column: span 3 / span 3;
}

.column-span-2 {
	grid-column: span 2 / span 2;
}

.column-span-1 {
	grid-column: span 1 / span 1;
}

.column-span-4 {
	grid-column: span 4 / span 4;
}

.sector {
	border: 1px solid;
	border-radius: 8px;
	border-color: rgba(255,255,255,0.1) rgba(13,4,2,0.2) rgba(13,4,2,0.2) rgba(255,255,255,0.1);
}

.sector-heading {
	width:auto;
	margin:2px;
	min-height: 1.5em;
	box-sizing: border-box;
	padding:0.5em;
	overflow:hidden;
	position:relative;
}

.inner-heading {
	border-right: 3em solid transparent;
	position: relative;
	line-height: 1;
	padding-left: 0.5em;
	margin: 0.5em calc(0.5em * -1);
	background: rgb(25,25,25);
}

.heading-wrapper {
	display:inline-block;
	margin-left:4px;
	padding: 0 0.5em;
	background:#202020;
}

.heading-text {
	font-size: 2em;
}

.heading-image {
	position: absolute;
	right:-2.5em;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: auto; height: auto;
}

.sector-content {
	padding-left:1em;
	padding-right:1em;
}

.sm-sector {
	position:relative;
	margin: 2em 0 2em 0;
}

.sm-wrapper {
	display:flex;
	justify-content: center;
	width:auto;
}

.sm-box {
	border: solid transparent;
	border-radius: 0.5em;
	background-color: rgb(20, 20, 20);
	width: min-content;
	height: min-content;
	display: inline-block;
	position: relative;
	margin: 0 0.25em 0 0.25em;
}

.sm-discord {
	padding: 1.15em 0.4em 1.15em 0.4em;
}

.sm-youtube {
	padding: 0.75em 0.4em 0.75em 0.4em;
}

.sm-itch {
	padding: 1.025em 0.4em 1.025em 0.4em;
}

.sm-reddit {
	padding: 0.75em 0.4em 0.75em 0.4em;
}

.sector-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin:0 0 0 1.5em;
	place-content: space-evenly;
}



@media (min-width: 1200px) {
	.sector-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		margin:0 0 0 1.5em;
		place-content: space-evenly;
	}
}

@media (min-width: 1500px) {
	.sector-grid {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		margin:0 0 0 1.5em;
		place-content: space-evenly;
	}
}

@media (min-width: 1900px) {
	.sector-grid {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		margin:0 0 0 1.5em;
		place-content: space-evenly;
	}
}

.item-limit li:nth-of-type(1n+6) {
	display: none;
}