body {
	background:white;
	color:var(--dark);
}

#app {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	position: relative;
	justify-content: start;
	gap: var(--gap);
	padding-top: var(--gap);
}

.ma_content{
	font-size: 14px;
	font-weight: 400;
	line-height: 140%;
}

@media (min-width: 768px) {
	.ma_content{
		padding-block: 2rem;
	}
}

.ma_sub_content{
	font-size: 14px;
	font-weight: 400;
	line-height: 140%;

	h2, h3{
		font-weight:400;
		text-transform: uppercase;
		margin:0;
	}
}

.app_project{
	.ma_content{
		font-size: 14px;
	}
}

.ma_grid{
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap);
	width: 100%;
	max-width:calc(var(--max-width) + 32px);
	margin: 0 auto;
	padding:0 16px;
}

.ma_container{
	width: 100%;
	max-width:calc(var(--max-width) + 32px);
	margin: 0 auto;
	padding:0 16px;
}

@container (min-width: 768px) {
	.ma_grid {
		grid-template-columns: 306fr 433fr;
		gap: calc(var(--gap) * 2);
	}
}

.ma_sub_content{
	padding: var(--gap) 0 var(--gap) 36px;
}


.sticko {
	position: sticky;
	top:32px;
}


.footer{
	color: white;
	background-color: black;
	font-size: 14px;
	line-height: 140%; /* 19.6px */
	text-wrap: balance;
	padding-block: 20px;
	margin-top: auto;
}

.fl_content{
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 24px;
	align-items: center;
}

.footer .mag_right{
	display: flex;
	justify-content: end;
	padding-top:8px;
}

.credits{
	padding-top: 16px;
	font-size: 13px;
}

.footer a{
	color: white;
	text-decoration: underline;
}

.footer a:hover{
	color: var(--accent);
	text-decoration: none;
}