* {
	margin: 0px;
	padding: 0px;
	text-decoration: none;
	/*list-style-type: none;*/
}

body {
	background-color: rgb(254, 247, 235);
	/*background-color: #171b1e;*/
	background-color: #171b1e;
	font-family: 'Raleway', sans-serif;
	font-size: 18px;
	color: #C0C0C0;
	color: #FAEBD7;
}

/* =================== */
/* ===== Content ===== */

.content {
	margin: auto;
	text-align: center;
}

.img-container {
	margin: auto;
	margin-bottom: 32px;
	width: 140px;
	height: 120px;
}

img {
	border-radius: 50%;
	width: 100%;
	height: 100%;
}

hr {
	margin: 0 auto;
	/*color: beige;*/
}

.social a {
	display: inline-block;
	margin: 20px;
}

.social a img {
	max-width: 30px;
	max-height: 30px;
}

/* =================== */
/* ===== Cards ======= */

.card-container {
	position: relative;
	background-color: inherit;
	width: 50%;
	padding: 18px;
	margin: auto;
	margin-top: 58px;
	margin-bottom: 58px;

	border-radius: 16px;
	transition: all 0.25s ease-in-out;	
}

.card-container h2 {
	margin-bottom: 12px;
	font-size: 16px;
}

.card-container h3 {
	margin-bottom: 12px;
	font-size: 16px;
}

.card-container hr {
	max-width: 60%;
	margin: auto;
	margin-bottom: 18px;
}

.card-container p {
	text-align: center;
	font-size: 18px;

	word-break: break-all;
	white-space: normal;
	
}

.card-container .email {
	font-size: 16px;
	transition: all 0.25s ease-in-out;
}

.card-container:hover {
	bottom: 16px;
	box-shadow: 3px 3px 6px #0d0e13;
	background: white;
	background-color: #262f32;

}

.card-container .email:hover {
	color: rgb(178,34,34);
}

/* ======================= */

.flex-container {
	display: grid;
	grid-template-columns: auto auto;
}

.skill-list-container {
	width: 100%;
	margin-bottom: 28px;
}

.skill-list-container ul {
	margin: auto;

	list-style-type: none;
}

.skill-list-container ul li {
	margin: 6px;
}


/* ======================= */
/* ===== Media query ===== */

@media (max-width: 507px) {

	.img-container {
		margin-bottom: 28px;
		width: 120px;
		height: 80px;

	}
	img {
		width:100px;
		height:80px;
	}

	.card-container h2 {
		font-size: 10px;
		color: red;
	}

	.card-container p, li {
		font-size: 10px;
	}

}