.rubik {
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

body {
	/* Variables */
	--bor-rad: 0.375em;
	--col-bg1: #FFF4EB;
	--col-bg2: #FEE5D1;
	--col-tx1: #2C2D24;

	--col-lu-: #EFB9CB;
	--col-mal: #8963BA;
	--col-ced: #6C8C69;
	--col-haz: #FCAB10;
	--col-pol: #EF2D56;
	--col-met: #114B5F;
	--col-wil: #715B64;
	
	background-color: hsl(from var(--col-bg1) h s 80);
	
	margin: 2em 25vw;
	font-family: "Rubik", sans-serif;
	color: var(--col-tx1);
	font-size: 1em;
	font-weight: 400;
}

b { font-weight: 700; }

a { text-decoration: none; }

a::before {
	content: "\ea6f ";
	font-family: "Remixicon";
}

.title>a::before,.news-home>a::before { content:""; }

.news-home>a>.post-title>b {color: var(--col-tx1); padding: 0; }
.news-home>a { color: var(--col-tx1); }

.grid-container-home {
	display: flex; gap: 0.25em; flex-wrap: wrap;
	width: 100%;
	flex-direction: column;
}

.img-logo {
	display: block;
	margin: auto;
	width: 35vw;
	max-height: 20vh;
}

.title,.post {
	background-color: var(--col-bg1);
	padding: 1em;
	border-radius: var(--bor-rad);
	border: 1px solid black;
}

.post:last-child { border-bottom-left-radius: 2em; border-bottom-right-radius: 2em; }
.post:first-child { border-top-left-radius: 2em; border-top-right-radius: 2em; }

.title-text {
	font-size: 1em;
	font-weight: 700;
}

.post-title {
	width: fit-content;
	margin-bottom: 0.5em;
}

.post-title>b {
	color: var(--col-bg1);
	padding: 0.125em 0.5em;
	border-radius: var(--bor-rad);
}

.user-lu- { background-color: hsl(from var(--col-lu-) h s 90); border-color: hsl(from var(--col-lu-) h s 50); }
.user-mal { background-color: hsl(from var(--col-mal) h s 90); border-color: hsl(from var(--col-mal) h s 50); }
.user-ced { background-color: hsl(from var(--col-ced) h s 90); border-color: hsl(from var(--col-ced) h s 50); }
.user-haz { background-color: hsl(from var(--col-haz) h s 90); border-color: hsl(from var(--col-haz) h s 50); }
.user-pol { background-color: hsl(from var(--col-pol) h s 90); border-color: hsl(from var(--col-pol) h s 50); }
.user-met { background-color: hsl(from var(--col-met) h s 90); border-color: hsl(from var(--col-met) h s 50); }
.user-wil { background-color: hsl(from var(--col-wil) h s 90); border-color: hsl(from var(--col-wil) h s 50); }

.user-lu->.post-title { color: hsl(from var(--col-lu-) h s 60); }
.user-mal>.post-title { color: hsl(from var(--col-mal) h s 60); }
.user-ced>.post-title { color: hsl(from var(--col-ced) h s 60); }
.user-haz>.post-title { color: hsl(from var(--col-haz) h s 60); }
.user-pol>.post-title { color: hsl(from var(--col-pol) h s 60); }
.user-met>.post-title { color: hsl(from var(--col-met) h s 60); }
.user-wil>.post-title { color: hsl(from var(--col-wil) h s 60); }

.user-lu->.post-title>b { background-color: hsl(from var(--col-lu-) h s 50); }
.user-mal>.post-title>b { background-color: hsl(from var(--col-mal) h s 50); }
.user-ced>.post-title>b { background-color: hsl(from var(--col-ced) h s 50); }
.user-haz>.post-title>b { background-color: hsl(from var(--col-haz) h s 50); }
.user-pol>.post-title>b { background-color: hsl(from var(--col-pol) h s 50); }
.user-met>.post-title>b { background-color: hsl(from var(--col-met) h s 50); }
.user-wil>.post-title>b { background-color: hsl(from var(--col-wil) h s 50); }

.user-lu->.post-body>i { color: hsl(from var(--col-lu-) h s 60); }
.user-mal>.post-body>i { color: hsl(from var(--col-mal) h s 60); }
.user-ced>.post-body>i { color: hsl(from var(--col-ced) h s 60); }
.user-haz>.post-body>i { color: hsl(from var(--col-haz) h s 60); }
.user-pol>.post-body>i { color: hsl(from var(--col-pol) h s 60); }
.user-met>.post-body>i { color: hsl(from var(--col-met) h s 60); }
.user-wil>.post-body>i { color: hsl(from var(--col-wil) h s 60); }

.user-lu->.post-body>a { color: hsl(from var(--col-lu-) h s 50); }
.user-mal>.post-body>a { color: hsl(from var(--col-mal) h s 50); }
.user-ced>.post-body>a { color: hsl(from var(--col-ced) h s 50); }
.user-haz>.post-body>a { color: hsl(from var(--col-haz) h s 50); }
.user-pol>.post-body>a { color: hsl(from var(--col-pol) h s 50); }
.user-met>.post-body>a { color: hsl(from var(--col-met) h s 50); }
.user-wil>.post-body>a { color: hsl(from var(--col-wil) h s 50); }

.post-quote {
	display: inline;
}

.quote-user {
	color: var(--col-bg1);
	padding: 0.125em 0.5em;
	border-radius: var(--bor-rad);
	width: fit-content;
	display: inline;
}

.quote-user.quote-pol { background-color: var(--col-pol); }

@media screen and (max-width: 720px) {

body {
	margin: 1em;
}

.img-logo {
	width: auto;
	max-height: 40vh;
}

}