/* Import Resets */
@import url('./resets.css');

@font-face {
	font-family: "JetBrains Mono", monospace;
	src: url(assets/fonts/JetBrainsMono.ttf) format("truetype");
	font-weight: normal;
	font-style: normal;
}

/* General Styling */
html {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	scroll-behavior: smooth;
	font-size: 16px;
}
body {
	font-family: "JetBrains Mono", monospace;
	min-height: 100vh;
	max-width: 100vw;
	display: flex;
	flex-direction: column;	
	align-items: center;
	background-image: 
	linear-gradient(to right, hsl(0, 0%, 80%) 0.0625rem, transparent 0.0625rem),
	linear-gradient(to bottom, hsl(0, 0%, 80%) 0.0625rem, transparent 0.0625rem);
	background-size: 1.25rem 1.25rem;
	background-color: hsl(0, 0%, 96%);
}

h1, h2, h3 {
	font-weight: 700;
	color: hsl(229, 76%, 66%);
}

header {
	width: 100%;
	border-top: 1rem solid hsl(229, 76%, 66%);
}
header h1 {
	margin: 1rem;
	text-align: center;
}

main {
	border-radius: 1rem 0;
	background-image: linear-gradient(135deg, hsla(229, 76%, 66%, 1) 0%, hsla(270, 37%, 46%, .5) 100%);
	margin: 1rem;
	box-shadow: 1rem hsla(0, 0%, 80%, .5);
	max-width: 100vw;
	flex: 1;
}
article {
	max-width: 67.5rem;
	margin: 2rem auto;
}

footer {
	text-align: center;
	width: 100%;
	background: hsl(229, 76%, 66%);
	font-size: small;
}

article {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	padding: 1rem;
}
section {
	position: relative;
	margin: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}
section h2 {
	width: 75%;
	margin: .5rem;
	padding: 1rem;
	background: hsla(0, 0%, 96%, .4);
	border-radius: .5rem;
	position: absolute;
	top: 0;
	font-size: .9rem;
	text-align: center;}
img {
	border-radius: 2rem 0;
}
p {
	padding: 1rem 0 0;
}
a {
	text-decoration: none;
	color: hsl(229, 76%, 66%);
}
a:hover {
	text-decoration: underline;
}


@media (max-width: 375px) {
	article {
		margin: 1rem;
		grid-template-columns: 1fr;
	}
}