@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,800|Open+Sans|Roboto');
body {
	margin: 0;
	display: flex; justify-content: center;
	align-items: flex-start; flex-wrap: wrap;
	font-family: Roboto, Arial;
}
header {
	width: 100%;
	height: 40px;                    
	color: black;
	font-family: Nanum Gothic, Arial;
	font-weight: 900;
	letter-spacing: 2px;
	color: white;
}
a[href] {
	cursor: pointer;
}
a {
	color: black;
}
.header {
	width: 100%;
	height: 40px;
	background-color: #00b5f9;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%2360d3ff' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.centerX {
	display: flex;
	justify-content: center;
}
.centerY {
	display: flex;
	align-items: center;
}
.wrap {
	flex-wrap: wrap;
}
.mw {
	width: calc(100% - 40px);
	max-width: 1100px;
}

.bodyDiv .grid0 {
	display: grid;
	grid-template-columns: 1fr 200px;
	grid-gap: 20px;
}
@media screen and (max-width: 800px) {
	.bodyDiv .grid0 {
		grid-template-columns: 100%;
	}
}

.projects {
	display: grid;
	grid-template-columns: 100%;
	grid-gap: 10px;
}

.card {
	padding: 10px;
	border: 1px solid #eee;
	border-radius: 6px;
	display: grid;
	grid-template-columns: auto 1fr;
	align-content: center;
	grid-gap: 10px;
}
.card .cardImg {
	display: flex; align-items: center;
}
.card .cardImg img {
	height: 60px;
	border-radius: 4px;
	border: 1px solid #eee;
}
.card .cardMain {
	display: grid;
	grid-template-rows: auto auto;
	grid-gap: 4px;
	align-content: center;
}
.card .cardMain .cardDescription {
	color: rgba(0, 0, 0, 0.7);
}

.socials {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 10px;
}

.social {
	width: 100%;
	border-radius: 6px;
	background: var(--theme);
	height: 84px;
	display: flex; flex-wrap: wrap;
	justify-content: center; align-items: center;
}
.social {
	box-shadow: 0 0 0 transparent;
	transition: box-shadow 200ms;
}
.social:hover {
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.social svg {
	width: 40px;
	height: 40px;
	color: white;
}




.badge {
	background: #f2f2f2;
	border-radius: 4px;
	padding: 2px 4px;
	margin-left: 4px;
}

footer {
	width: 100%;
	padding: 40px 0;
	margin-top: 20px;
	background: #eee;
	display: flex; flex-wrap: wrap;
	justify-content: center;
}
.footerPart {
	align-items: flex-start;
	width: 90%; max-width: 200px;
}
.footerPart p {
	margin: 0;
	margin-bottom: 2px;
}