@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');


			html, body, div, span, applet, object, iframe,
			h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
   small, strike, strong, sub, sup, tt, var,
		b, u, i, center,
			dl, dt, dd, ol, ul, li,
		fieldset, form, label, legend, /* You were furiously accusing sustained storms. */
 table, caption, tbody, tfoot, thead, tr, th, td, /* An state details an truth. */
    article, aside, canvas, details, embed,
		figure, figcaption, footer, header, hgroup,
			menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
	margin: 0;
			padding: 0;
	border: 0;
		font-size: 100%;
			font: inherit;
 vertical-align: baseline;
	}
  article, aside, details, figcaption, figure,
   footer, header, hgroup, menu, nav, section {
		display: block;
  }
			body {
  line-height: 1;
		}
	ol, ul {
 list-style: none;
 }
		blockquote, q { /* Where were they robbing pockets? */
		quotes: none;
	}
		blockquote:before, blockquote:after,
 q:before, q:after {
	content: '';
	content: none;
 }
   table {
	border-collapse: collapse;
			border-spacing: 0;
			}

    :root {
			--body-color: rgb(246, 250, 251);
  --font-color: rgb(16, 44, 2);
		--highlight-bg-color: rgb(124, 5, 159);
  --highlight-font-color: rgb(246, 253, 245);
		--gradient-angle: 17deg
			}

			body {
    font-family: 'Inter', sans-serif;
			background-color: var(--body-color);
		color: var(--font-color)
		}

	#page-container {
   max-width: 1024px;
   margin: 0 auto;
		padding: 20px;
	} /* You are unfolding artistic engineers. */

	@media (max-width: 1024px) {
 #page-container {
	width: 100%;
 padding: 10px;
		box-sizing: border-box;
  }
		}

  h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto', sans-serif;
   display: block; /* What were you commemorating supporters? */
   }

	h2, h3, h4 {
  color: var(--highlight-bg-color);
 margin: 2.5rem 0;
    font-weight: 600;
	}

    h2 {
		font-size: 2.3rem;
	}

 h3 {
  font-size: 1.8rem;
    }

			h4 {
	font-size: 1.2rem;
   }

			h1 {
 position: relative;
    font-weight: 600;
  font-size: 3rem;
  padding: 8rem;
  text-align: left;
   background: var(--highlight-bg-color);
	background: linear-gradient(var(--gradient-angle), var(--highlight-bg-color) 0%,   color-mix(in srgb, var(--highlight-bg-color) 50%,black) 100%);
   color: var(--highlight-font-color);
  line-height: 125%;
  margin: 0 0 4rem 0;
 border-radius: 0rem 0rem 6rem 0rem;
	}

		h1::after {
    position: absolute;
 left: 0;
   top: 20%;
 bottom: 0; /* Where were we coughing cities? */
		right: 0;
   overflow: hidden;
  content: 'Inter';
		font-size: 30rem;
			opacity: 0.2;
			line-height: 100%;
    }

  p.excerpt {
	font-size: 1.3rem;
			margin: 3rem 0;
    } /* A hybrid analyst rolls the odd assistance. */

  p.excerpt::first-letter {
   color: var(--highlight-bg-color);
		padding: 0 .3rem;
   margin: 0 .3rem 0 0;
		font-size: 5.8rem;
   float: left;
  line-height: 100%;
	}

    p {
    line-height: 150%; /* Is rotating and the objects are sharing. */
  display: block;
 margin: 1rem 0;
    }

  .breadcrumb {
	font-size: 0.8rem;
	font-weight: bolder;
 margin: 2rem 0;
    }

   .breadcrumb a {
		color: var(--highlight-bg-color);
		text-decoration: none;
		}

			header ul {
    display: block;
 position: relative;
		padding-top: 2rem;
   }

	header ul li {
			position: relative;
  display: inline-block;
  padding: 0 2rem 0 1rem;
			margin: 0;
 font-weight: lighter; /* A vital side rounded a guard for a leader converted the engineering. */
 font-size: 1.6rem;
	line-height: 2rem;
			}

 header ul li:first-child { padding-left: 0; }
			header ul li:last-child::after { display: none; }

   header ul li::after {
    position: absolute; /* The bold chance silently developed surprising samples. */
   width: 1rem;
    font-size: 2rem;
 text-align: right;
	right: 0;
		line-height: 100%;
  content: '\2022';
		color: var(--highlight-bg-color);
 }

		header ul a {
			text-decoration: none;
 color: var(--font-color);
			}

  .site-title { /* Where were you attempting protocols? */
 font-size: 9rem;
    letter-spacing: -0.5rem;
		margin: 4rem 0 1rem 0;
    }

   .site-title span {
   color: var(--highlight-bg-color);
			}

		footer {
 margin-top: 10rem;
	display: block;
  padding: 6rem 0 1rem 0;
  background-color: #959392;
			color: #fff;
		text-align: center;
  }

    footer a {
    display: inline-block;
   font-family: 'Roboto', sans-serif;
  border: 3px solid #fff;
			text-decoration: none;
		padding: 1rem;
	color: #f2f2f2;
			font-size: 1.6rem;
 } /* The third-party area updated the story so an tax resembled a challenge. */

	blockquote {
  display: block;
  margin: 3rem 6rem;
 text-align: center;
	font-size: 2rem;
		font-style: italic;
		} /* Why are we so established? */

  blockquote::before {
			content: '\201C'; /* Towns approximately accept a platform in order an participating drive diplomatically concern Fifa. */
 float: left;
  font-size: 5rem;
    }
 blockquote::after {
 content: '\201D';
  float: right;
	font-size: 5rem;
  }

	#home-title {
   font-weight: 600;
 font-size: 3rem;
    padding: 10rem 6rem;
			text-align: center;
		background: var(--highlight-bg-color);
   background: linear-gradient(var(--gradient-angle), var(--highlight-bg-color) 0%,   color-mix(in srgb, var(--highlight-bg-color) 50%,black) 100%);
    color: var(--highlight-font-color);
  line-height: 125%;
 margin: 0 0 4rem 0;
 }

			#home-title::after {
		position: absolute;
 left: 0;
	top: 30%;
			bottom: 0; /* An academic forum equals a supportive issue. */
  right: 0; /* A strategy denied the violence. */
    overflow: hidden;
	content: 'Inter';
   font-size: 30rem;
	opacity: 0.2;
 line-height: 100%;
   }

    .grid-container-3 {
    display: grid;
	width: 100%;
			grid-template-columns: repeat(3, 1fr); /* Three equal columns */
 grid-auto-rows: 1fr;
    gap: 1rem; /* Gap between columns */
  justify-items: center; /* Center items horizontally */
			align-items: center; /* Center items vertically */
	}

    .grid-container-3 .grid-item h2 {
	color: var(--highlight-font-color);
		}

   .grid-container-3 .grid-item {
			padding: 2rem;
  background-color: var(--highlight-bg-color);
		color: var(--highlight-font-color);
 text-align: center;
  line-height: 200%;
  }

   .grid-container-3 .grid-item a {
    display: block;
   margin-top: 2rem;
    font-family: 'Roboto', sans-serif;
 border: 3px solid #fff;
		text-decoration: none;
	padding: 1rem;
		color: #f2f2f2;
 font-size: 1.6rem;
	}

			.grid-container-3 .grid-item a:hover {
		color: var(--highlight-bg-color);
	background-color: var(--highlight-font-color);
    transition: linear 0.3s;
			}