@font-face {
	font-family: "InterVariable";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("/fonts/InterVariable.woff2") format("woff2");
}
@font-face {
	font-family: "InterVariable";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("/fonts/InterVariable-Italic.woff2") format("woff2");
}

.content {
	max-width: 1200px;
	margin: auto;
}

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

p {
	font-size: 1.25rem;
	line-height: 1.5;
	hyphens: auto;
	color: #ffffff;
	margin: 0 0 1rem 0;
	margin-block: 1lh;
}

a:link {
	color: #e0ee78;
	text-decoration: none;
}
a:visited {
	color: #e0ee78;
}
a:hover {
	text-decoration: underline;
}

::selection {
	color: #342e2b;
	background-color: #e0ee78;
}
::-moz-selection {
	color: #342e2b;
	background-color: #e0ee78;
}

h1, h2, h3 {
	letter-spacing: 0.05rem;
	text-transform: lowercase;
	line-height: 1.1;
	hyphens: auto;
	color: #ffffff;
	margin: 0 0 0.5rem 0;
}

h1 {
	font-size: clamp(3rem, 2.5385rem + 2.0513vw, 4rem);
	font-weight: 800;
	border-bottom: .15rem solid;
	border-bottom-color: #ffffff;
	padding-bottom: .4rem;
}
h1::before {
	content: "-->";
	padding-right: 0.7rem;
}
h2 {
	font-size: clamp(2.4rem, 2.1231rem + 1.2308vw, 3rem);
	font-weight: 650;
}
h3 {
	font-size: clamp(2.1rem, 1.9154rem + 0.8205vw, 2.5rem);
	font-weight: 600;
}

h4, h5, h6 {
	letter-spacing: 0.05rem;
	text-transform: lowercase;
	line-height: 1.3;
	hyphens: auto;
	color: #ffffff;
	margin: 0 0 0.5rem 0;
}
h4 {
	font-size: clamp(1.8rem, 1.7077rem + 0.4103vw, 2rem);
	font-weight: 600;
}
h5 {
	font-size: clamp(1.6rem, 1.5308rem + 0.3077vw, 1.75rem);
	font-weight: 500;
}
h6 {
	font-size: clamp(1.4rem, 1.3538rem + 0.2051vw, 1.5rem);
	font-weight: 450;
}

.menu {
	font-size: clamp(1.1rem, 1.3538rem + 0.2051vw, 1.3rem);
	line-height: 1.35;
	font-weight: 550;
	text-transform: lowercase;
	margin: 0;
	color: #ffffff;
}

figure {
	border: 0.5rem #ffffff solid;
	border-radius: 0.25rem;
	border-width: 0.15rem;
	padding: 0.5rem 1rem 0.5rem 1rem;
	margin: 0rem 0 1.5rem 0;
}

figcaption {
	font-size: clamp(0.85rem, 0.85rem + ((1vw - 0.2rem) * 1.995), 1rem);
	line-height: 1.5;
	letter-spacing: 0.05rem;
	font-weight: 400;
	margin: 0.2rem 0 0 0;
	color: #ffffff;
	hyphens: auto;
}
figcaption::before {
	content: "-->";
	padding-right: 0.5rem;
}

.indextxt {
	font-size: clamp(1.5rem, 1.5rem + ((1vw - 0.2rem) * 1.995), 2.1rem);
	line-height: 1.2;
	font-weight: 500;
	margin: 0 0 2rem 0;
	color: #ffffff;
	hyphens: auto;
	border-bottom: .15rem solid;
	border-bottom-color: #ffffff;
	padding-bottom: 1rem;
}

.datepost {
	font-size: clamp(0.85rem, 0.85rem + ((1vw - 0.2rem) * 1.995), 1rem);
	line-height: 1.2;
	letter-spacing: 0.05rem;
	font-weight: 550;
	text-transform: lowercase;
	text-align: right;
	margin: 0 0 1.5rem 0;
	color: #ffffff;
	hyphens: auto;
}
.datepost::before {
	content: "⬒";
	padding-right: 0.5rem;
}

.note {
	margin: 0 0 2rem 0;
	border-bottom: .15rem solid;
	border-bottom-color: #ffffff;
	padding-bottom: 0.5rem;
}
.datenote {
	font-size: clamp(0.85rem, 0.85rem + ((1vw - 0.2rem) * 1.995), 1rem);
	line-height: 1.2;
	letter-spacing: 0.05rem;
	font-weight: 550;
	text-transform: lowercase;
	margin: 0 0 1.5rem 0;
	color: #ffffff;
	hyphens: auto;
}
.datenote::before {
	content: "⬒";
	padding-right: 0.5rem;
}

hr {
	display: block;
	color: #ffffff;
	margin: 0.5rem auto 0.5rem auto;
	border-style: inset;
	border-width: .13rem;
}

.sh {
	font-weight: 300;
	font-size: 1.5rem;
	line-height: 1.5;
	margin: 0 0 1.5rem 0;
	color: #ffffff;
	hyphens: auto;
}

blockquote {
	text-indent: 1rem;
	font-style: italic;
	font-weight: 400;
	font-size: 1.4rem;
	line-height: 1.5;
	margin: 2rem 0 2rem 0;
	color: #ffffff;
	border-left: .15rem solid;
	border-left-color: #ffffff;
	padding-left: 1rem;
	hyphens: auto;
}
blockquote::before {
	padding-right: 0.5rem;
}

.footer {
	font-size: 1rem;
	line-height: 1.5;
	text-align: center;
	letter-spacing: 0.05rem;
	font-weight: 400;
	text-transform: lowercase;
	color: #ffffff;
	position: fixed;
	left: 0;
	bottom: 0.7rem;
	width: 100%;
}

.pics {
	margin: 1.25rem 0 1rem 0;
}

img {
	border-radius: 0.2rem;
}

.grid-menu {
	display: grid;
	grid-template-columns: 33.33% 33.33% 33.33%;
	gap: 0;
	padding: 0;
	align-content: right;
}
.grid-menu > div {
	padding: 0;
}

/* Una columna del mismo ancho de la página */
.unacolumna {
	float: left;
	width: 100%;
	padding: 0.7rem;
	margin: 0;
}

/* Dos columnas del mismo ancho una a lado de la otra */
.doscolumnas {
	float: left;
	width: 50%;
	padding: 0.7rem;
	margin: 0;
}

/* Tres columnas del mismo ancho una a lado de la otra */
.trescolumnas {
	float: left;
	width: 33.33%;
	padding: 0.7rem;
	margin: 0;
}

/* Tres columnas del mismo ancho para el menu */
.trescolmenu {
	float: left;
	width: 33.33%;
	padding: 0.7rem;
	margin: 0;
}

/* Clear floats after the columns */
.row:after {
	content: "";
	display: table;
	clear: both;
}

/* Responsive, cuando el ancho de la pantalla es menor a 961px las dos columnas se apilan */
@media screen and (max-width: 961px) {
	.doscolumnas {
	width: 100%;
}
}

@media screen and (max-width: 500px) {
	.trescolumnas {
	width: 100%;
}
}

@media screen and (max-width: 300px) {
	.trescolmenu {
	width: 100%;
}
}