* {
	margin:0;
	padding:0;
	box-sizing:border-box;
}

body { 
	display: flex;
	font-family: "Xanh Mono", monospace;
	background-image: url("../background.jpg");
	background-size: cover;
	background-position: center;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	color: rgb(210,210,210);
}

.container {
	display:flex;
	flex-direction: row;
	gap: 30px;
	background-color: rgba(10,15,15, 0.5);
	border: 1px solid rgba(190,220,255, 0.6);
	outline: 2px solid rgba(0,0,0, 0.5);
	padding: 40px
}

.avatar {
	width: 60px;
	height:60px;
}

.main {
	display:flex;
	flex-direction: column;
	gap: 5px;
}

.section {
	display: flex;
	flex-direction: column;
	justify-content:center;
	gap: 30px;
}

.username {
	font-size: 18px;
	font-weight: 900;
	color: rgba(180,210,230, 0.7);
}

h1 {
	font-size: 16px;
}

a,p {
	text-decoration: none;
	color: rgb(210,210,210);
	font-family: "Xanh Mono", monospace;
	font-size: 14px;
	transition: 0.2s;
}

a:hover {
	color: rgb(180,210,230);
}

.title {
	color: rgb(180,210,230);
	font-weight: 900;
}

.sub {
	display: flex;
	flex-direction: column;
	gap: 2px
}

body::before {
	content: "";
	position: fixed;
	inset: -60px;
	z-index: -1;
	pointer-events: none;
	background: url("../resources/noise.png") repeat;
	mix-blend-mode: overlay;
	opacity: 0.35;
	animation: grain 0.3s steps(1, end) infinite;
}

.comment {
	color: rgba(255,255,255, 0.5);
	font-size: 9px;
}

@keyframes grain {
	0%, 100% { transform: translate(0, 0); }
	10% { transform: translate(-42px, 27px); }
	20% { transform: translate(35px, -49px); }
	30% { transform: translate(-18px, -12px); }
	40% { transform: translate(51px, 31px); }
	50% { transform: translate(-33px, 44px); }
	60% { transform: translate(24px, -37px); }
	70% { transform: translate(-47px, 9px); }
	80% { transform: translate(12px, 52px); }
	90% { transform: translate(44px, -24px); }
}