@import url("https://fonts.googleapis.com/css?family=Noto+Sans|Raleway"); /*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

ul {
  list-style: none;
}

button,
input,
select {
  margin: 0;
}

html {
  box-sizing: border-box;
  height: 100%;
}

body {
  height: 100%;
}

*, *::before, *::after {
  box-sizing: inherit;
}

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

iframe {
  border: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

.site__header {
  background-color: rgb(100, 100, 155);
  padding: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.site__header__brand a {
  color: rgb(239, 246, 255);
  text-decoration: none;
  border-radius: 3px;
  outline-offset: -3px;
  transition: outline-offset 0.2s;
}
.site__header__brand a:focus {
  outline-style: inset;
  outline-offset: 0;
  outline-color: rgb(97, 204, 115);
  outline-width: 2px;
  filter: hue-rotate(90deg);
  transition: outline-offset 0.1s;
}
.site__header__brand a img {
  display: block;
}
.site__footer {
  background-color: rgb(192, 224, 214);
}

.site__nav--header {
  font-family: "Raleway", sans-serif;
}
.site__nav--header ul {
  display: grid;
  grid-template-columns: 1fr;
  text-align: right;
}
@media screen and (min-width: 420px) {
  .site__nav--header ul {
    display: flex;
  }
}
.site__nav--header ul li {
  list-style: none;
}
.site__nav--header ul li a {
  display: block;
  color: rgb(239, 246, 255);
  padding: 0.25rem calc(0.5rem + 1vw);
  border-radius: 3px;
  outline-offset: -3px;
  transition: outline-offset 0.2s;
}
@media screen and (min-width: 1024px) {
  .site__nav--header ul li a {
    padding: 0.25rem 1rem;
  }
}
.site__nav--header ul li a:focus {
  outline-style: inset;
  outline-offset: 0;
  outline-color: rgb(97, 204, 115);
  outline-width: 2px;
  filter: hue-rotate(90deg);
  transition: outline-offset 0.1s;
}

.site__root {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
}
.site__root main {
  grid-column: 1;
  grid-row: 2;
}
.site__ident {
  grid-column: 1;
  grid-row: 2;
}
.site__ident img {
  width: 80vw;
}
@media screen and (min-width: 480px) {
  .site__ident img {
    width: 70vw;
  }
}
@media screen and (min-width: 768px) {
  .site__ident img {
    width: 60vw;
  }
}
@media screen and (min-width: 1024px) {
  .site__ident img {
    width: 50vw;
  }
}

.site__footer {
  padding: 1rem;
  color: rgb(100, 100, 155);
}

.copyright-notice {
  display: inline-block;
  position: relative;
  margin-bottom: 3rem;
  font-family: "Times New Roman", Times, serif;
  font-size: 1.3rem;
}
.copyright-notice:before {
  position: absolute;
  bottom: 0;
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 0.5s, transform 0.3s;
  content: "Yes, Times New Roman.";
  font-size: 1.5rem;
  background: #aecaac;
  color: rgb(100, 100, 155);
}
.copyright-notice:hover:before {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.1s, transform 0.3s;
}

.pass-properties-to-hosted-svg .end-product {
  display: flex;
  flex-wrap: wrap;
}
.pass-properties-to-hosted-svg .end-product p {
  flex-basis: 100%;
  flex-shrink: 0;
}
.pass-properties-to-hosted-svg .end-product section {
  margin: 0.25rem;
  padding: 0.25rem;
  text-align: center;
  border: 1px solid #ccc;
}

.layout__home {
  margin: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0.5vw 0.5vw rgb(100, 100, 155), -0.5vw -0.5vw #bedbd4;
}
@media screen and (min-width: 1200px) {
  .layout__home {
    box-shadow: 0.35rem 0.35rem rgb(100, 100, 155), -0.35rem -0.35rem #bedbd4;
  }
}
.layout__home .content__body {
  margin: 0 auto;
  max-width: 1368px;
}
.layout__home .post-board {
  width: 100%;
  max-width: 1368px;
  margin-bottom: 2rem;
}

.content__body__section {
  margin-bottom: 2rem;
}

.tag__link {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  margin: 2px;
  outline-offset: -3px;
  transition: outline-offset 0.2s;
  background-color: #aecaac;
  color: rgb(39, 38, 44);
  position: relative;
}
.tag__link:focus {
  outline-style: inset;
  outline-offset: 0;
  outline-color: rgb(97, 204, 115);
  outline-width: 2px;
  filter: hue-rotate(90deg);
  transition: outline-offset 0.1s;
}

.layout__post {
  margin: 0 auto;
}
.layout__post .content__body {
  background-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0.5vw 0.5vw rgb(100, 100, 155), -0.5vw -0.5vw #bedbd4;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  grid-template-areas: "heading" "when" "body" "meta" "footer";
  padding: 1rem;
  margin: 1rem;
  font-family: "Raleway", sans-serif;
}
@media screen and (min-width: 1200px) {
  .layout__post .content__body {
    box-shadow: 0.35rem 0.35rem rgb(100, 100, 155), -0.35rem -0.35rem #bedbd4;
  }
}
@media screen and (min-width: 650px) {
  .layout__post .content__body {
    grid-template-columns: 1fr 14ch;
    grid-template-areas: "heading when" "body meta" "footer footer";
  }
}
.layout__post .content__body .post__heading {
  grid-area: heading;
  margin-bottom: 2.5rem;
}
.layout__post .content__body .post__datetime {
  grid-area: when;
  color: #293524;
}
.layout__post .content__body .post__body {
  max-width: 80ch;
  grid-area: body;
}
.layout__post .content__body .post__meta {
  grid-area: meta;
}
.layout__post .content__body .post__nav {
  grid-area: footer;
}
.layout__post .content__body pre {
  overflow: auto;
  padding: 1rem;
  background-color: #eee;
  border: 1px solid #ccc;
  box-shadow: 0 0 8px #444;
  margin-bottom: 2rem;
}

.postlist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media screen and (min-width: 768px) {
  .postlist {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 1024px) {
  .postlist {
    grid-template-columns: repeat(auto-fit, minmax(300px, max-content));
  }
}
.postlist li {
  list-style: none;
}
.postlist__item {
  background: white;
  box-shadow: 0.5vw 0.5vw rgb(100, 100, 155), -0.5vw -0.5vw #bedbd4;
}
@media screen and (min-width: 1200px) {
  .postlist__item {
    box-shadow: 0.35rem 0.35rem rgb(100, 100, 155), -0.35rem -0.35rem #bedbd4;
  }
}
.postlist__item .post-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "title title" "content content" "tags date";
  height: 100%;
  font-family: "Raleway", sans-serif;
}
.postlist__item .post-summary__header {
  grid-area: title;
  padding: 0.75rem;
}
.postlist__item .post-summary__title {
  display: block;
  font-weight: bold;
  color: rgb(100, 100, 155);
  font-size: 1.25rem;
  outline-offset: -3px;
  transition: outline-offset 0.2s;
}
.postlist__item .post-summary__title:focus {
  outline-style: inset;
  outline-offset: 0;
  outline-color: rgb(97, 204, 115);
  outline-width: 2px;
  filter: hue-rotate(90deg);
  transition: outline-offset 0.1s;
}
.postlist__item .post-summary__description {
  padding: 0.5rem 0.75rem 1rem;
  grid-area: content;
}
.postlist__item .post-summary__date {
  grid-area: date;
  align-self: flex-end;
  width: max-content;
  padding: 0.25rem 0.25rem;
}
.postlist__item .post-summary__tags {
  grid-area: tags;
}

.layout__home .heading--alfa {
  margin-bottom: 3rem;
}
.layout__home footer {
  text-align: center;
}

.heading--alfa {
  font-family: "Raleway", sans-serif;
  color: #293524;
  font-weight: bold;
  font-size: 1.6rem;
  background-color: white;
}

.content__body {
  font-family: "Raleway", sans-serif;
}

.layout__post .content__body {
  /** Post headings **/
}
.layout__post .content__body h2, .layout__post .content__body h3, .layout__post .content__body h4 {
  margin-bottom: 1.5rem;
  font-family: "Raleway", sans-serif;
  font-weight: bold;
}
.layout__post .content__body h2 {
  font-size: 1.6rem;
}
.layout__post .content__body p {
  margin-bottom: 1rem;
}
.layout__post .content__body ul li, .layout__post .content__body ol li {
  margin-left: 1.5rem;
}

.link--site-nav {
  display: inline-block;
  background-color: #293524;
  color: #c1e2de;
  padding: 1rem;
  outline: none;
  outline-offset: -3px;
  transition: outline-offset 0.2s;
  transition: box-shadow 0.15s ease-in;
  box-shadow: 0 0 rgb(100, 100, 155), 0 0 #bedbd4;
}
.link--site-nav:focus {
  outline-style: inset;
  outline-offset: 0;
  outline-color: rgb(97, 204, 115);
  outline-width: 2px;
  filter: hue-rotate(90deg);
  transition: outline-offset 0.1s;
}
.link--site-nav:hover {
  transition: box-shadow 0.18s ease-out;
  box-shadow: 0.5vw 0.5vw rgb(100, 100, 155), -0.5vw -0.5vw #bedbd4;
}
@media screen and (min-width: 1200px) {
  .link--site-nav:hover {
    box-shadow: 0.35rem 0.35rem rgb(100, 100, 155), -0.35rem -0.35rem #bedbd4;
  }
}

/*# sourceMappingURL=site.css.map */