@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Red+Hat+Mono:wght@400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600&display=swap");

body {
	background: transparent;
	background-image: url(images/blob-bg.svg);
	background-size: cover;
	background-attachment: fixed;
	font-family: "Work Sans", "Red Hat Mono", monospace;
	font-size: 14px;
	color: rgb(230, 230, 230);
	letter-spacing: 1px;
	overflow-wrap: break-word;
}
/*
blob-bg
0b0b0b -dark grey
1e3019 - green */

mark {
	display: inline-block;
	line-height: 0em;
	padding-bottom: 0.4em;
	background-color: #1e3019;
	color: white;
	border-bottom: none;
}

.main {
	width: 1300px;
	max-width: 100%;
	display: grid;
	grid-template-columns: 1fr;
	margin: 0 auto;
	align-items: center;
	justify-items: center;
}

.container {
	margin: auto;
	background: rgba(18, 18, 18, 0.95);
	color: rgb(240, 240, 240);
	padding: 50px 30px;
	word-wrap: break-word;
	max-width: 100%;
}

.row2 {
	margin-bottom: 20px;
}

.tooltip {
	text-decoration: underline dashed #587dcc 2px;
}

.prof {
	text-align: center;
}

.profilowe {
	width: 200px;
	border-radius: 3%;
	padding: 0;
}

#o-mnie {
	justify-content: center;
	align-items: center;
}

@media screen and (min-width: 600px) {
	.main {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 100vh;
		align-items: center;
		justify-items: center; /* adjusted */
	}

	.container {
		margin: 0 auto;
		background: rgba(24, 24, 24, 0.9);
		color: white;
		border: 1px solid rgba(92, 92, 92, 0.6);
		border-radius: 20px;
		padding: 30px 50px;
	}
}

@media screen and (max-width: 600px) {
	.name {
		text-align: center;
		padding-bottom: 30px;
	}
	#br {
		display: none;
	}
}

.card {
	background-color: #1e3019;
	border: #434343;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	height: 100%;
}

.btn.btn-primary {
	background: #005a87;
	border-color: #005a87;
	vertical-align: middle;
}

.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary:focus {
	background: hsl(200, 100%, 12%);
	border-color: hsl(200, 100%, 12%);
}

.card-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: flex-end;
}

.btn-img {
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-img img {
	margin-right: 5px;
}

.btn-img span {
	display: inline-flex;
	align-items: center;
	padding-top: 5px;
}