.fade-out {
  opacity: 0.2 !important;
  transition: opacity 0.5s;
}
:root { 
  --primary-color: #4A90E2;
  --secondary-color: #50E3C2;
  --background-color: #F5F5F5;
  --text-color: #333333;
  --font-headings: 'Unbounded', sans-serif;
  --font-body: 'Noto Sans', sans-serif;
  --highlight-color: #e8fe36;
  --highlight-color-orange: #f5bf41;
  --highlight-color-green: #75ff90;
  --highlight-color-pink: #ff6f91;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: var(--text-color);
  font-optical-sizing: auto;
  font-style: normal;
  position: relative;
}
.dotgrid-bg {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D'19'%20height%3D'19'%20viewBox%3D'0%200%2019%2019'%20xmlns%3D'http://www.w3.org/2000/svg'%3E%3Ccircle%20cx%3D'9.5'%20cy%3D'9.5'%20r%3D'1.1'%20fill%3D'%23ddd'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-attachment: fixed;
  height: calc(100% - 8rem);
  top: 8rem;
}
.site-nav { 
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1em;
  padding: 1em;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
} 
.coffee-stain {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 400px;
  height: auto;
  opacity: 0.3;
  z-index: -1;
}
[class*="coffee-stain"] img {
  width: 100%;
  height: auto;
}
.coffee-stain--02 {
  top: 50px;
  left: 50px;
  width: 250px;
  opacity: 0.2;
}
.site-nav ul {
  list-style: none;
  display: flex;
  gap: 1em;
  margin: 0;
  padding: 0;
}
.img-inline {
  display: inline-block;
  border: 4px solid #ffffff;
  outline: 3px solid var(--text-color);
  background: #F1F4DF;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  vertical-align: middle;
  overflow: hidden;
  margin-left: 0.3em;
}
.img-inline img { 
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.site-nav ul li {
  position: relative;
}
.site-nav ul li a:after {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  width: 0%;
  height: 50%;
  background: var(--hightlight-color);
  transition: all ease 0.5s;
  z-index: -1;
}
.site-nav ul li a {
  text-decoration: none;
  color: var(--text-color);
  font-weight: 600;
  transition: all ease 0.3s;
}
.site-nav ul li.active a:after, 
.site-nav ul li:hover a:after { 
  background: var(--highlight-color) !important;
}
.site-nav .logo {
  font-family: var(--font-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-bottom: 0;
  color: var(--text-color);
  text-decoration: none;
}
.container {
  display: block;
  max-width: 800px;
  margin:  0 auto;
  padding: 1em;
} 
.site-footer {
  text-align: center;
  padding: 2em 1em;
  font-size: 0.9em;
  color: var(--text-color);
} 
.copyright {
  font-size: 0.9em;
}
.social-links {
  list-style: none;
  display: flex;
  gap: 1em;
  margin: 0;
  padding: 0;
  justify-content: center;
}
.social-links li a {
  display: inline-block;
  width: 24px;
  height: 24px;
}
.social-links li svg {
  width: 100%;
  height: 100%;
  transform: translateY(0);
  transition: all ease 0.3s;
}
.social-links li a:hover svg { 
  transform: translateY(-3px);
}

/* Buttons and Links */
a:not(.logo):not(.social-links a), 
.btn, button { 
  text-decoration: none;
  color: var(--text-color);
  display: inline-block;
  position: relative;
  font-weight: 600;
  cursor: pointer;
}
a:not(.btn):not(button):not(.social-links a):not(.site-nav a):not(.logo):before { 
  content: '';
  display: block;
  height: 0;
  background-color: var(--text-color);
  height: 3px;
  width: 0%;
  position: absolute;
  left: -2.5%;
  bottom: 0;
  z-index: 1;
  transition: all ease 0.3s;
}
a:not(.btn):not(button):not(.social-links a):not(.site-nav a):not(.logo):hover:before {
 width: 105%;
}

a:not(.logo):not(.social-links a):not(.site-nav a):after, 
.site-nav ul li.active a:after, 
.site-nav ul li:hover a:after, 
.btn:after, 
button:after {
  content: '';
  position: absolute;
  display: block;
  left: -2.5%;
  bottom: 0;
  width: 105%;
  height: 50%;
  background: var(--highlight-color-green);
  transition: all ease 0.3s;
  z-index: -1;
}
.blog-post a:after { 
  background: var(--highlight-color-orange) !important;
}

/* Typography */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-headings);
  color: var(--text-color);
  margin-bottom: 0.5em;
  font-weight: 700;
  margin-top: 0;
}
hr {
  border: none;
  border-top: 3px solid var(--text-color);
  margin: 2em 0;
}
s, u { 
  text-decoration-thickness: 2px;
  text-decoration-color: var(--text-color);
}
mark { 
  background-color: var(--highlight-color);
  padding: 0 0.2em;
}
pre code,
pre code.hljs { 
  border-radius: 8px;
}
blockquote {
  /* border-left: 4px solid var(--primary-color); */
  margin-left: 0;
  padding-left: 3em;
  color: var(--text-color);
  font-family: 'Just Another Hand', cursive;
  font-size: 2rem;
  font-style: italic;
  position: relative;
}
blockquote:before { 
  content: '';
  display: inline-block;
  position: absolute;
  left: 0;
  width: 2.5em;
  height: 2.5em;
  vertical-align: top;
  margin-right: 0.2em;
  background: url("data:image/svg+xml,%3Csvg%20width%3D'34'%20height%3D'36'%20viewBox%3D'0%200%2034%2036'%20fill%3D'none'%20xmlns%3D'http://www.w3.org/2000/svg'%3E%3Cpath%20d%3D'M25.4746%2029.7635C24.3246%2027.3955%2023.1147%2025.0685%2021.8446%2022.7775C23.5147%2024.2635%2025.2046%2025.7335%2026.9046%2027.1785C28.2946%2028.3475%2030.3046%2026.3545%2028.9147%2025.1755C27.4147%2023.9125%2025.9446%2022.6325%2024.4746%2021.3385C26.5647%2022.0005%2028.6346%2022.7465%2030.6746%2023.6095C32.3346%2024.3125%2033.7546%2021.8575%2032.0746%2021.1455C30.4746%2020.4665%2028.8546%2019.8525%2027.2246%2019.2895C29.0546%2019.0385%2030.8746%2018.7875%2032.6946%2018.5375C34.5046%2018.2895%2033.7647%2015.5515%2031.9846%2015.7965C28.9046%2016.2195%2025.8246%2016.6425%2022.7446%2017.0645C25.5746%2015.3435%2028.4046%2013.6235%2031.2246%2011.9015C32.7846%2010.9545%2031.3846%208.4895%2029.8346%209.43755C27.6147%2010.7835%2025.4046%2012.1285%2023.1946%2013.4735C23.2147%2013.3955%2023.2246%2013.3175%2023.2346%2013.2405C23.2746%2013.0045%2023.2546%2012.7605%2023.2046%2012.5305L28.8647%206.86948C30.1546%205.58051%2028.1546%203.57553%2026.8647%204.86645L21.3946%2010.3295C22.5546%208.36147%2023.7446%206.4145%2024.9846%204.49546C25.9746%202.96645%2023.5147%201.56753%2022.5246%203.09653C21.7147%204.3355%2020.9346%205.58452%2020.1676%206.8435C20.2286%205.85249%2020.2796%204.85952%2020.3216%203.86645C20.3977%202.04145%2017.5647%202.04653%2017.4886%203.86645C17.3856%206.33354%2017.1986%208.7895%2016.9776%2011.2415C16.5986%207.94448%2016.2196%204.64751%2015.8406%201.35151C15.6346%20-0.441457%2012.7996%20-0.459524%2013.0076%201.35151C13.3486%204.31548%2013.6886%207.28051%2014.0296%2010.2445C12.7356%208.37749%2011.4026%206.5355%2010.0176%204.72446C8.91358%203.28149%206.92158%205.29848%208.01465%206.72749C8.85557%207.82651%209.67158%208.94145%2010.4776%2010.0645C9.0586%209.0145%207.56865%208.05151%206.00664%207.17651C4.41963%206.2855%203.0126%208.74546%204.60762%209.64048C7.63565%2011.3375%2010.3496%2013.3765%2012.7996%2015.7675C9.51358%2015.2755%206.1916%2014.9685%202.82862%2014.9135C1.00156%2014.8825%201.00362%2017.7155%202.82862%2017.7465C4.72461%2017.7775%206.6086%2017.8925%208.4836%2018.0735C5.99258%2018.7805%203.50156%2019.4885%201.01162%2020.1955C-0.744432%2020.6945%20-0.0263651%2023.4355%201.72959%2022.9365C5.43057%2021.8855%209.13057%2020.8345%2012.8306%2019.7845C11.9376%2020.3275%2011.0437%2020.8715%2010.1496%2021.4155C9.3336%2021.9125%206.63057%2024.0585%205.1836%2024.7285C5.17061%2024.7195%205.16162%2024.7085%205.14766%2024.6995C5.09063%2024.6605%205.03262%2024.6215%204.97461%2024.5825C4.4376%2024.2205%203.71963%2024.4235%203.27364%2024.8125C2.79561%2025.2295%202.59258%2025.6645%202.65957%2026.2935C2.72363%2026.8985%203.06065%2027.5295%203.7166%2027.6645C5.43457%2028.0165%206.64063%2026.8675%208.07559%2025.9935L11.0736%2024.1685C9.61358%2027.4195%208.24766%2030.7155%207.00156%2034.0685C6.36758%2035.7745%209.11162%2036.4855%209.74258%2034.7865C11.4216%2030.2695%2013.3206%2025.8535%2015.4086%2021.5305C15.4727%2021.4915%2015.5366%2021.4525%2015.6006%2021.4135L15.8176%2021.2815C15.2356%2025.1995%2014.5227%2029.1005%2013.6556%2032.9795C13.2596%2034.7535%2015.9977%2035.4845%2016.3966%2033.6985C17.2216%2030.0075%2017.9106%2026.2955%2018.4836%2022.5665C20.0826%2025.3785%2021.5946%2028.2425%2023.0046%2031.1625C23.8046%2032.8075%2026.2647%2031.3975%2025.4746%2029.7635Z'%20fill%3D'black'/%3E%3C/svg%3E") no-repeat center center;
  background-size: contain;
}
ol li::marker {
  font-family: var(--font-headings);
  font-weight: 700;
}
.ff-just-another-hand {
  font-family: 'Just Another Hand', cursive;
  font-size: 1.5em;
}
/* Background Shapes */
.shape { 
  width: 200px;
  height: 200px;
  background: var(--primary-color);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  position: fixed;
  top: 20px;
  right: 20px;
  opacity: 0.1;
  z-index: -1;
}
/* Forms */
.form { 
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.form button { 
  display: inline-block;
  padding: 1.2em;
  border: none;
  background: transparent;
  height: auto;
  font-size: 1.2rem;
  text-transform: uppercase;
  font-family: var(--font-body);
  font-weight: 600;
  position: relative;
  align-self: flex-start;
}
form button:after { 
  content: '';
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg width=%22192%22 height=%2278%22 viewBox=%220 0 192 78%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M84.9794 73.2237C105.743 72.7517 128.886 70.9317 151.623 65.5247C158.683 63.8457 165.664 61.8447 172.166 58.5577C175.096 57.0767 177.968 55.3487 180.53 53.3107C182.398 51.8247 184.023 49.8237 185.219 47.7427C188.08 42.7607 187.277 37.6117 182.906 33.8917C180.34 31.7097 177.377 29.8717 174.348 28.3767C165.523 24.0207 156.179 21.0547 146.63 18.7277C138.724 16.8017 130.664 16.0357 122.57 15.5247C121.617 15.4647 120.578 15.5217 119.748 15.1477C119.085 14.8497 118.202 13.9127 118.275 13.3777C118.38 12.6177 119.145 11.7307 119.866 11.3357C120.541 10.9667 121.527 11.1337 122.378 11.1257C135.543 10.9967 148.251 13.6207 160.616 17.8757C166.647 19.9497 172.563 22.4407 178.325 25.1757C181.353 26.6137 184.206 28.6987 186.666 30.9967C191.864 35.8487 192.917 42.4177 189.972 48.8777C188.438 52.2437 186.1 54.9817 183.231 57.2917C178.174 61.3627 172.352 63.9637 166.295 66.1087C154.586 70.2547 142.461 72.6167 130.205 74.3567C115.62 76.4257 100.959 77.5787 86.2264 77.8117C68.5814 78.0927 51.0454 77.1937 33.7964 73.1207C26.9184 71.4957 20.3094 69.1327 14.1984 65.5147C10.2214 63.1607 6.57442 60.4017 3.79842 56.6477C-0.69858 50.5687 -1.15359 44.1097 2.17342 37.3787C4.04341 33.5977 6.80542 30.4917 9.90142 27.6697C18.0724 20.2277 27.6964 15.2337 37.8934 11.2707C51.1894 6.10071 65.0504 3.2357 79.1714 1.53069C97.2664 -0.653291 115.374 -0.3873 133.452 1.6127C149.061 3.3397 164.449 6.20469 179.216 11.7767C181.106 12.4897 182.932 13.3807 184.766 14.2347C186.049 14.8327 186.88 15.7617 186.33 17.2827C185.919 18.4177 184.678 18.7557 183.034 18.0107C173.735 13.7967 163.837 11.6737 153.928 9.5917C142.322 7.15369 130.574 5.86771 118.747 5.12571C97.7344 3.80569 76.9834 5.4597 56.5134 10.3907C45.4814 13.0487 34.8864 16.9007 25.0024 22.5537C19.8894 25.4787 15.0804 28.8377 11.0454 33.1657C9.52742 34.7927 8.10142 36.5667 6.96043 38.4687C3.40542 44.4027 3.91641 50.2327 8.73042 55.1567C11.1584 57.6397 14.0254 59.8037 16.9924 61.6277C23.6074 65.6947 30.9984 67.8237 38.5494 69.3737C53.0324 72.3457 67.7024 73.2577 84.9794 73.2237Z\" fill=\"%232C2E35\"/%3E%3C/svg%3E");  align-self: flex-start;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-color:transparent;
  transition: all ease 0.3s;
  left: 0;
  bottom: 0;
  z-index: -1;
}
.form button:before { 
  content: '';
  display: block;
  width: 0;
  height: 20%; 
  left: 0;
  top: 50%; 
  transform:translateY(-50%);
  background: var(--highlight-color-pink);
  position: absolute;
  transition: all ease 0.3s;
  z-index: -1;
}
.form button:hover:before { 
  width: 100%;
}
.form-group { 
  display: flex;
  gap: 1em;
}
.form-field { 
  flex: 1;
  position: relative;
  padding: 0.5em;
  border: 3px solid var(--text-color);
  font-size: 1em;
}
.form-field label { 
  position: absolute;
  top: 0;
  left: 0;
  transition: all ease 0.3s;
  opacity: 1;
  width: 100%;
  height: 100%;
  padding: 0.5em;
}
.form-field input,
.form-field textarea { 
  width: 100%;
  border: none;
  outline: none;
  font-size: 1em;
  padding: 0;
  background: transparent;
  font-family: var(--font-body);
}

.form-field textarea { 
  resize: vertical;
  min-height: 100px;
}
.form-field input:focus-visible ~ label,
.form-field textarea:focus-visible ~ label,
.form-field input:not(:placeholder-shown) ~ label,
.form-field textarea:not(:placeholder-shown) ~ label {
  opacity: 0;
  font-size: 0.8em;
  color: var(--primary-color);
}

/* Blog post styles */
.polaroid {
  width: 95%;
  max-width: 100%;
  padding: 1rem 1rem 4rem;
  height: auto;
  display: block;
  margin: 1em auto;
  position: relative;
  background: white;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 6px 20px rgba(0,0,0,0.1);
}
.polaroid.tilt-r {
  transform: rotate(1deg);
}
.polaroid.tilt-l {
  transform: rotate(-1deg);
}
.polaroid img {
  width: 100%;
  height: auto;
  display: block;
}
.polaroid p {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Just Another Hand', cursive;
  font-size: 1.4rem;
  color: var(--text-color);
}
.article-header {
  margin-bottom: 1.5rem;
}
.article-title,
.article-meta { 
  margin: 0;
}
.article-meta span { 
  font-weight: 600;
}
.article-meta { 
  font-size: 0.9rem;
}
.article-excerpt { 
  font-size: 1.2rem;
  margin: .2rem 0;;
}
.article img { 
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
.blog-posts .article { 
  margin-bottom: 1.5rem;
}