@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

:root {
	--warna-primer: rgb(24, 126, 95); /* Emerald Green #187e5f */
	--warna-sekunder: #fce22f; /* Gold (Mustard) #d4af37 */
	--warna-tertier: rgb(253, 252, 246); /* Soft Beige (Ivory) #fdfcf6 */
	--warna-kuartener: #a18d62; /* Rosewood (Deep Maroon) #6d2e46 */
	--warna-teks: 51, 51, 51; /* Warna teks */
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "Inter", sans-serif;
	font-style: normal;
	font-size: 16px;
	height: 100%;
}

.wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: var(--warna-tertier);
	justify-content: space-between;
}

.container {
	padding-top: calc(65px + 3px);
	max-width: 65rem;
	margin: 0 auto;
}

a {
	text-decoration: none;
	color: #262626;
}

a:visited {
	color: black;
}

h1,
h2,
h3 {
	color: var(--warna-primer);
}

.center {
	text-align: center;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.judul {
	font-size: 1.6rem; /* Sesuaikan ukuran */
	font-weight: 700; /* Tebalnya */
	line-height: 1.4; /* Jarak antar baris */
	margin-bottom: 2rem; /* Spasi bawah */
}

.subjudul {
	font-size: 1.3rem; /* Sesuaikan ukuran */
	font-weight: 700; /* Tebalnya */
	line-height: 1.4; /* Jarak antar baris */
	margin-bottom: 0.7rem; /* Spasi bawah */
	margin-top: 1.5rem; /* Spasi atas */
}
.highlight {
	color: var(--warna-sekunder);
	font-weight: bold;
}

#akses_bg .button {
	width: 100%;
	outline: none;
	cursor: pointer;
	font-size: 0.9em;
	border: none;
	background: #f46262;
	border-radius: 5px;
	height: 45px;
}

#header {
	height: 65px;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	/* background: var(--warna-primer); */
	padding: 0 20px;
	color: var(--warna-tertier);
	z-index: 1000;

	/* padding-bottom: 15px; */
	background: linear-gradient(
		to top,
		#003c2a,
		var(--warna-primer),
		var(--warna-primer),
		var(--warna-primer),
		var(--warna-primer),
		var(--warna-primer)
	);
	box-shadow: 0 4px 4px 1px rgba(0, 0, 0, 0.4); /* efek bayangan bawah */
}

#header span {
	float: right;
	font-size: 0.9rem;
}

#footer_bottom {
	padding: 3px 30px;
	background: var(--warna-primer);
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
	color: var(--warna-tertier);
}

#footer_bottom a {
	text-decoration: none;
	color: var(--warna-tertier);
}

@media screen and (max-width: 900px) {
	#footer_bottom {
		flex-direction: row-reverse;
		align-items: center;
		padding-bottom: 1rem;
		padding-top: 0.5rem;
		font-size: 18px;
	}
}