@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Zen+Kaku+Gothic+Antique:wght@500&display=swap');

:root{
	--primary: #78909c;
	--secondary: #9e9e9e;
	--suctom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%2378909C' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23505'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E");
}

html,body{

	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
	scroll-behavior: smooth;

}

.title{
	font-family: 'Poppins', sans-serif;
	font-weight: bold;
	color: black;
}

.subtitle{
	font-family: 'Poppins', sans-serif;
	color: black;
}

*{
	z-index: 2;
	box-sizing: border-box;
	font-family: 'Zen Kaku Gothic Antique', sans-serif;

}

a{
	color: purple;
	text-decoration: none;
}


/* ========= navbar ===========*/

.navbar{
	width: 100%;
	height: 70px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.navbar .left{
	width: 50%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	border: 1px solid rgba(0,0,0,0.25);
	border-top: none;
	border-radius: 0px 0px 50px 0px;	
}

.navbar .right{
	width: 50%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;	
}

.navbar .right li{

	list-style: none;
	padding: 10px 20px;
	cursor: pointer;

}

/*=========== content ===============*/

.content{
	width: 100%;
	height: calc(100% - 70px);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;	
}

.content .left-content{
	width: 40%;
	height: 450px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-direction: column;
	border-radius: 10px 0px 0px 10px;
	padding: 40px;
	background: white;
	position: relative;
}

.content .left-content:before{

	content: "";
	background-size: cover;
	border: 1px solid rgba(0,0,0,0.25);
	background-color: #FFFFFF;
	background-image: var(--suctom);
	position: absolute;
	width: 100px;
	height: 100px;
	left: -50px;
	top: -50px;

}

.content .left-content:after{

	content: "";
	background-size: cover;
	border: 1px solid rgba(0,0,0,0.25);
	background-color: #FFFFFF;
	background-image: var(--suctom);
	position: absolute;
	width: 100px;
	height: 100px;
	right: -50px;
 	bottom: -50px;

}

.content .left-content p{
	color: gray;
}

.content .left-content button{
	font-size: 16px;
}

.content .right-content{
	width: 40%;
	height: 450px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background: white;
	position: relative;
	border-radius: 0px 10px 10px 0px;
	border: 1px solid rgba(0,0,0,0.25);
}

.content .right-content .markdown-body .highlight pre,
.content .right-content .markdown-body pre{

	border: none !important;

}

.description{

	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

}

.description p{
	padding: 20px;
	text-align: justify;
}

.description .avatar{
	width: 80%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding: 20px;
}

.description .avatar img{
	width: 60px;
	height: 60px;
	margin: 5px;
	border-radius: 100%;
	border: 1px solid rgba(0,0,0,0.25);
}

.content .right-content:after{
	content: "App.seleku";
	position: absolute;
	background: white;
	top: -50px;
	right: 30px;
	width: auto;
	height: 50px;
	border-radius: 10px 10px 0px 0px;
	padding: 0px 20px;
	border-top: 1px solid rgba(0,0,0,0.25);
	border-right: 1px solid rgba(0,0,0,0.25);
	border-left: 1px solid rgba(0,0,0,0.25);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.content .left-content button{
	background: transparent;
}

.content .left-content h1{
	font-size: 3rem;
}

/*============= footer ==============*/

.footer{
	width: 100%;
	height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	font-size: 1rem;	
}

/*============ media-query ============*/

@media screen and (min-width: 300px) and (max-width: 1186px){

	.content .left-content{
		height: auto;
		border-radius: 10px;
	}

}

@media screen and (min-width: 300px) and (max-width: 866px){

	.content{
		height: auto;
	}

	.content .left-content{
		width: 90%;
		height: auto;
		border-radius: 10px;
	}

	.content .left-content:before,.content .left-content:after{

		display: none;

	}

	.content .right-content{
		width: 90%;
		height: auto;
		border-radius: 10px;
		margin-top: 60px;
	}

	.content .right-content .markdown-body pre{
		width: 100%;
		border: none !important;
	}

}

@media screen and (min-width: 300px) and (max-width: 657px){

	.navbar{
		height: auto;
	}

	.navbar .left{
		width: 90%;
		padding: 0px 20px;
		justify-content: flex-start;
	}

	.navbar .right{
		width: 100%;
		margin: 15px 0px;
	}

}

/*============= utility =============*/

.container{
	width: 100%;
	height: 100%;
	padding: 20px;
}

.simple-border{
	border: 1px solid rgba(0,0,0,0.25);
}

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

.p20{
	padding: 20px;
}

.btn{
	outline: none;
	border: none;
	padding: 10px 15px;
	border-radius: 5px;
	font-size: 1.3rem;
	cursor: pointer;
}

.btn-primary{
	background: var(--primary);
	color: white;
}

.btn-primary-outlined{
	background: transparent;
	color: var(--primary);
	border: 0.2px solid var(--primary);
}