/*css reset*/
	/* http://meyerweb.com/eric/tools/css/reset/ 
	   v2.0 | 20110126
	   License: none (public domain)
	*/

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block;
	}

	body { line-height: 1; }

	ol, ul { list-style: none; }

	blockquote, q { quotes: none; }

	blockquote:before, blockquote:after,
	q:before, q:after { content: '';  content: none; }

	table { border-collapse: collapse;  border-spacing: 0; }
/*akhir css reset*/





/*awal all*/
	html {
		scroll-behavior: smooth;
	}

	.container { margin-left: 10.17%;  margin-right: 10.17%; }

	.more { margin-top: 30px;  margin-left: 81%; }

	.line {
		height: 6px;
		margin-top: 10px;
		margin-bottom: 10px;
		margin-right: 59.5%;
		border-radius: 8px;
	}

	.intro .line { margin-right: 16.2%; }
/*akhir all*/





/*awal navbar*/
	.navbar {
		display: grid;
		height: 45px;
		position: fixed;
		z-index: 999;
		width: 100%;
		align-content: center;
	}

	.nav {
		display: grid;
		grid-template-columns: 1fr 1fr;
		margin: 0px auto;
		width: 79.6%;
	}

	.logo { align-self: center; }

	.logo img { display: none; }


	.qa {
		display: flex;
		align-items: center;
		justify-content:space-around;
	}

	.qa img { display: none; }

	.qabutton { padding: 5px;  border-radius: 5px; }

	.qa .themeButton {
		height: 25px;
		line-height: 25px;
		padding: 10px;
		text-align: center;
		display: flex;
		justify-content: center;
	}

	select { outline: none; width: 100%; }
/*akhir navbar*/





/*awal intro*/
	.intro {
		height: 319px;
		padding-top: 47px;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		grid-template-areas: 
		'rizkia hello'
		'more more'
	}

	.rizkia {
		margin-top: 50px;
		align-self: center;
		margin-left: 17%;
	}

	div .rizkia p { margin-bottom: 47px; }

	.hello {
		margin-top: 50px;
		align-self: center;
		justify-content:;
		display: grid;
		grid-template-rows: 1fr 0.3fr;
	}

	.hello p { margin: 0px;  margin-left: 18%; }

	p.hellotext  { margin-bottom: 52px; }

	.more.bio { grid-area:  more; margin-top: 10px;  margin-left: 81%; }
/*akhir intro*/





/*service bar*/
	.service {
		margin-bottom: 96px;
		display: flex;
		padding: 20px;
	}

	.skillbox {
		width: 79%;
		margin: 0 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		text-align: center;	
	}
/*akhir service bar*/





/*awal my work*/
	.workdisplay {
		margin-top: 30px;
		padding-top: 30px;
		padding-left: 30px;
		padding-right: 30px;
		box-sizing: border-box;
		display: grid;
		justify-items: center; 
		grid-template-columns: repeat(auto-fit, minmax(263px, 1fr));
		grid-gap: 30px;
	}

	.workthumb {
		width: 100%;
		margin-bottom: 30px;
		transition: 0.3s;
	}


	.workthumb:hover { transform: scale(1.1); }

	.workthumb img { width: 100%;  border-radius: 8px; }

	.visit {
		margin-top: 67px;
		margin-bottom: 96px;
		display: grid;
		justify-items: end;
	}

	.visit img { margin-top: 13px; }
/*akhir my work*/





/*awal reviews*/
	.reviewdisplay {
		margin-top: 30px;
		padding-top: 30px;
		padding-left: 30px;
		padding-right: 30px;
		box-sizing: border-box;
		display: grid;
		justify-items: center; 
		grid-template-columns: repeat(auto-fit, minmax(399px, 1fr));
		grid-gap: 30px;
	}

	.review {
		width: 91.6%;
		height: 96px;
		margin-bottom: 30px;
		padding: 5px;
	}
/*akhir reviews*/






/*media query*/
@media all and (max-width: 900px) {
	.nav { grid-template-columns: .5fr 1fr; }
}

@media all and (max-width: 768px) {
	.container { margin: 0 auto; width: 90%; }

	.more { margin-top: 10px;  margin-left: 80%; }

	.nav { display: flex; }

	.logo {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.logo img { display:block; }

	.qa {
		display: flex;
		width: 40%;
		height: 185px;
		box-sizing: border-box;
		flex-direction: column;
		align-self: space-between; 
		/*margin-top: 240px;*/
		position: absolute;
		top: 45px;
		right: -40%;
		z-index: 9999;
		text-align: center;
		transition: 0.5s;
	}

	.qa .themeButton { width: 80%; }

	.show { right: 0%; }

	.qa div img {
		display: inline-block;
		position: absolute;
		right:  25.4%;
		top: 0%;
	}
}

@media all and (max-width: 767px){
	.intro {
		padding-top: 100px;
		margin-bottom: 100px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.rizkia{
		/*background-color: black;*/
		align-self: start;
		margin-left: 8.6%;
	}

	.hello {
		display: none;
	}

	.more.bio {
	/*background-color: aqua;*/
	margin-top: 20px;
	margin-right: 20%;
	}

	.service { display: flex;  flex-direction: column; }

	.skillbox { margin: auto;  margin-bottom: 20px; }

	.myworktitle { margin-left: 8.6%; }

	.workdisplay {
		margin-top: 20px;
		padding-top: 20px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.workthumb { margin-bottom: 20px; }

	.visit { justify-items: end; margin-right: 30px; }

	.reviewstitle { margin-left: 8.6%; }

	.reviewdisplay {
		padding-top: 20px;
		padding-left: 4.6%;
		padding-right: 4.6%;
		grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
	}

	.review { margin-bottom: 20px; }
}