@font-face {
    font-family: 'DepartureMono';
    src: url('/DepartureMono-Regular.woff2') format('woff2');
}

html {
	height: 100%;
}

body {
	background: black;
	background-image: url(/black_grain.webp);
	font-family: 'DepartureMono';
	color: #3c5f5f;
	margin: 0;
	height: 100%;
}

.wrapper {
	width: 100%;
	height: 100%;
	display: flex;
}

.container {
	width: 640px;
	margin: 60px auto;
}

.profile-card {
    background: #000000bf;
    margin: auto;
    padding: 20px;
    border: 1px solid #1d1d1d;
    box-shadow: 0 0 1px #3c5f5f;
}

.profile-header {
    background: #519090;
    color: black;
    font-size: 22px;
    margin-bottom: 20px;
}

.profile-header > span.location-data {
	float: right;
	padding-right: 10px;
}

.profile-header > span.title {
	display: inline-block;
	font-weight: bold;
	width: 256px;
	text-align: center;
}


.row {
	display: flex;
	gap: 20px;
}

.profile-image {
	background: url('ascii_256x256.webp');
	min-width: 256px;
	height: 256px;
}

.panel {
	border: 1px solid #3c5f5f;
}

.profile-description {
    padding: 20px;
    font-size: 20px;
    flex-grow: 1;
    display: flex;
    text-align: center;
    align-items: anchor-center;
}

.profile-description-container {
    flex-grow: 1;
    height: 256px;
    display: flex;
    flex-direction: column;
}

pixel-wrapper {
	background-image: radial-gradient(black 1px, transparent 0);
	background-size: 3px 3px;
}

i.icon {
    background-size: 32px !important;
    width: 32px;
    height: 32px;
    display: inline-block;
    border: 1px solid #226969;
    box-shadow: 0 0 1px 1px #00ffff;
}

i.telegram.icon {
    background: url(/telegram.webp);
}

i.vk.icon {
    background: url(/vk.webp);
}

.social {
    margin-top: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 22px;
}

.social .item {
	color: inherit;
	text-decoration: none;
	display: flex;
	gap: 10px;
}

.social .item > span {
	flex-grow: 1;
	padding-top: 3px;
}

.social .item:hover > span {
	background: #3c5f5f;
	color: black;
}

.social .item:active > span {
	color: #ffad58;
}