@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

@font-face {
    font-family: 'Assiduous';
    src: 
		url('Assiduous.woff2') format('woff2'),
    	url('Assiduous.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
	--mono-font: "IBM Plex Mono", monospace;
	--sans-font: "Assiduous", sans;
	--bg: #FEFCF6;
	--border: #161A25;
	--accent-bg: #DCB9F6;
	--text: #161A25;
	--accent: #E94B11;
	--marked: #DCB9F6;
	--image-back: #E7EFF2;
	--standard-border-radius: 0px;
}

html {
	font-family: var(--mono-font);
}

h1,
h2,
h3,
h4 {
	font-family: var(--sans-font);
	font-optical-sizing: auto;
	font-weight: 100;
	font-style: normal;
  	text-transform: uppercase;
	margin: 0;
}

p {
	margin-top: 0;
}

body {
	grid-template-columns: 1fr min(50rem, 90%) 1fr;
	background: rgba(200, 195, 250, 1);
	background: 
		url(/noise.svg),
		linear-gradient(188deg, rgba(116, 121, 216, 1) 0%, rgba(200, 195, 250, 1) 80%, rgba(229, 183, 230, 1) 100%);
		
	background-attachment: fixed;
	font-size: medium;
}

.content-grid {
	margin-top: 2em;
	margin-bottom: 5em;
	display: grid;
	grid-template-columns: 1fr;
	column-gap:0em;
	row-gap: 2em;
}

.content-grid>h1 {
	grid-column: 1 / -1;
	box-shadow: none;
	margin-bottom: -0.5em;
	background: 
		url(/noise.svg),
		linear-gradient(188deg, #430680 0%, #2412E4 80%, #397FFF 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.content-grid>img {
	background-color: var(--image-back);
}

@media only screen and (width > 720px) {
	.content-grid {
		grid-template-columns: repeat(3,1fr);
	}
	.grid-col-span-2 {
		grid-column: span 2;
	}
	.grid-col-span-3 {
		grid-column: span 3;
	}
}


.info {
	font-size: small;
}

article {
	background-color: var(--bg);
	margin: 0;
	border:none;
}

p:last-child {
	margin-bottom: 0;
}

.info h1 {
	font-size: 1.5rem;
}

small {
	color: var(--accent);
}