@import url('https://fonts.googleapis.com/css2?family=Anton&family=IBM+Plex+Serif&family=IM+Fell+DW+Pica:ital@0;1&family=Libre+Baskerville&family=Space+Mono&family=Syne+Mono&display=swap');

/*@import 'normalize.css';*/
/* Basic reset might help. */
html {
      box-sizing: border-box;
      overflow-y: scroll;
  }
  *, *:before, *:after {
        box-sizing: inherit;
    }
/* /Basic reset            */

html {
  font-size: 16px;
}

body {
  max-width: 1500px;
  width: 100%;
  margin: 2em auto;
}

img {
    max-width: 100%;
    height: auto;
}

.front-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr 20%;
  grid-template-areas:
    "header"
    "main"
    "footer";
  width: 80%;
  margin: auto;
}

.post-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    "header"
    "main"
    "footer";
  width: 80%;
  margin: auto;
}

@media screen and (min-width: 576px) {
  .front-wrapper, .post-wrapper {
    width: 65%;
  }
}

@media screen and (min-width: 768px) {
  .front-wrapper, .post-wrapper {
    width: 50%;
  }
}
h1.blog-header,
h1.blog-header a,
h1.blog-header a:link,
h1.blog-header a:visited,
h1.blog-header a:hover {
  font-family: Anton, sans-serif;
  grid-area: header;
  color: #add8ff;
  background: white;
  font-size: clamp(3rem, 3rem + 1.5vw, 5rem);
  text-shadow: 2px 2px 0px #420315 /*, -2px -2px 0px #fff*/;
  display: inline;
}

h1.blog-header a,
h1.blog-header a:link,
h1.blog-header a:visited,
h1.blog-header a:hover {
    text-decoration: none;
}
.blog-post {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    "post-title"
    "post-date"
    "post-main";
  /*margin-top: auto;*/
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 4.5em;
  margin-left: auto;
}

.front-wrapper ul {
  list-style-type: none;
  grid-area: main;
  padding-left: 0;
  margin-top: 0;
}

li {
  /*padding: 0.5em 0;*/
  padding: 0;
  font-size: clamp(1rem, 1rem + 0.3vw, 22px);
}

blockquote {
  font-family: Helvetica, Arial, sans-serif;
  /*font-size: 1.2rem;*/
  font-size: clamp(1rem, 1rem + 0.3vw, 1.25rem);
  /*line-height: 1.6rem;*/
  line-height: clamp(1.6rem, 1.6rem + 0.3vw, 2rem);
  padding: 1rem;
  /*background: #eee;*/
  border-left: #add8ff 5px solid;
  color: #777;
  width: 100%;
  margin-left: 0px;
}

h2, h3 {
  font-family: Helvetica, Anton, "Syne Mono", monospace;
}
a {
  color: #420315;
  /*background: #eee;
  text-decoration: underline dotted;*/
  text-decoration: none;
}

a:hover {
  color: #420315;
  background: #add8ff;
}

a.index-link,
a.index-link:visited {
  font-family: Helvetica, Anton, "Syne Mono", monospace;
  text-transform: lowercase;
  text-decoration: none;
  background: white;
  padding: 5px 0px;
  display: block;
  border-bottom: 1px solid #aaa;
}

a.index-link:hover {
  text-decoration: none;
  padding: 5px 0;
  background: #add8ff;
}

a.post-end,
a.post-end:visited,
a.post-end:hover {
    text-decoration: none;
    background: none;
    margin: 0 auto;
}


time.post-date {
  margin: 0.5rem 4.5em 1.5em 0;
  display: block;
  /*font-family: Helvetica, "Syne Mono", "Space Mono", monospace;*/
  font-family: Helvetica, Anton, "Syne Mono", "Space Mono", monospace;
  font-size: 1rem;
  color: darkgray;
  grid-area: post-date;
}

/* Post Stuff */
h2.blog-post-title {
  grid-area: post-title;
  display: inline;
  color: #303;
  /*font-family: Helvetica, Anton, "Syne Mono", monospace;*/
  /*font-size: 1.6rem;*/
  font-size: clamp(1.25rem, 1.25rem + 0.3vw, 2rem);
  text-transform: lowercase;
  padding: 0px;
  margin-left: 0px;
}

.post-wrapper h2.blog-post-title {
  margin-top: 0;
  margin-bottom: 0;
}

.blog-post p {
  font-family: "IBM Plex Serif", "Libre Baskerville", Helvetica;
  /*line-height: 1.75rem;*/
  line-height: clamp(1.75rem, 1.75rem + 0.3vw, 2.15rem);
  /*font-size: 1.25rem;*/
  font-size: clamp(1rem, 1rem + 0.3vw, 22px);
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.blog-post p a {
  color: black;
  text-decoration: none;
  /*border-bottom: 1px solid #add8ff;*/
  border-bottom: 1px solid black;
}

/* Footer Stuffs */
/*.footer {
  background: #333;
  grid-area: footer;
  padding: 2em;
  width: 50%;
}*/