/* font */
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

/* warna warna */
:root {
	--primary: #d8d8d8;
	--sembuh: #11d200;
	--positif: #003edf;
	--meninggal: #df0000;
	--dirawat: #a8d200;
	--vaksinasi: #009994;
	--tombol: #00d3d3;
	--text1: #000000;
	--text2: #515151;
	--text3: #b8b8b8;
	--text4: #ffffff;
}

/* default */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
	outline: none;
}

/* tag css*/
html,body {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	background-color: var(--primary);
}

button {
	border: none;
	cursor: pointer;
}

hr {
	max-width: 800px;
	margin: 10px auto;
	border: none;
	height: 3px;
	background-color: var(--text2);
	box-shadow: none;
	width: 100%;
	border-radius: 5px;
	width: 100%;
}


/* tombol */
.btn {
	border-radius: 4px;
	background-color: var(--tombol);
	font-size: 16px;
	padding: 5px 20px;
	font-weight: bold;
}

/* class */
.box {
	min-height: 100vh;
	padding: 20px;
	max-width: 922px;
	margin: 0 auto;
	position: relative;
}

.tulisan-pendukung {
	font-size: 100px;
	color: var(--text3);
	opacity: 25%;
	font-weight: 900;
	font-family: sans-serif;
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	user-select: none;
}

.box-konten {
	margin-top: 60px;
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.box-konten .bk-item h1 {
	max-width: 470px;
	font-weight: 900;
	font-size: 24px;
}

.box-konten .bk-item p {
	max-width: 410px;
	color: var(--text2);
	margin: 15px 0;
}

.box-konten .bk-item .bk-nav {
	display: flex;
	flex-wrap: wrap;
}

.box-konten .bk-item img {
	width: 100%;
	max-width: 350px;
}

.box-konten .bk-item .bk-nav a {
	padding: 10px;
}

.box-covid .bc-info h2 {
	font-size: 18px;
	text-align: center;
}

.box-covid .bc-info p {
	font-size: 14px;
	text-align: center;
	color: var(--text2);
}

.box-covid .bc-info-list {
	display: flex;
	max-width: 600px;
	margin: 0 auto;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 50px;
}


.bc-info-list .bc-info-item {
	margin: 14px;
}

.bc-info-list .bc-info-item h3 {
	color: var(--text2);
}

.bc-info-list .bc-info-item .bc-info-box {
	padding: 10px 50px;
	min-height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--text4);
	border-radius: 5px;
	font-weight: bold;
	min-width: 180px;
}

.bc-info-box.sembuh {
	background-color: var(--sembuh);
}

.bc-info-box.positif {
	background-color: var(--positif);
}

.bc-info-box.meninggal {
	background-color: var(--meninggal);
}

.bc-info-box.dirawat {
	background-color: var(--dirawat);
}

.box-tips h3 {
	text-align: center;
	margin-bottom: 50px;
}

.box-tips .bt-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 900px;
	margin: 0 auto;
}

.box-tips .bt-list .bt-list-item {
	max-width: 230px;
	margin: 20px;
	padding: 10px;
	border: 2px solid black;
	border-radius: 5px;
	text-align: center;
	background-color: #b9b9b9;
}

.box-tips .bt-list .bt-list-item h4 {
	font-weight: bold;
}

.box-tips .bt-list .bt-list-item p {
	color: var(--text2);
}

/* media query */

@media (max-width: 992px) {

	.tulisan-pendukung {
		display: none;
	}


	.atas .box-konten {
		flex-direction: column-reverse;	
	}


	.atas .box-konten .bk-item img {
		margin-bottom: 50px;
	}

}

@media (max-width: 384px) {

	.box-konten .bk-item .bk-nav a {
		margin: 20px 0 0 10px;
	}

}

@media (max-width: 437px) {

	.box-covid .bc-info-list {
		justify-content: center;
	}

}