/* ----------------------------------
   BASIC RESET
---------------------------------- */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  background:
    #f3fdff;

  font-family:
    "Courier New",
    Courier,
    monospace;

  font-size: 14px;
  line-height: 1.7;

  min-height: 100vh;
  cursor: url("../aesthetically-cut-fruit/rose%20knife.png") 4 4, auto;
}
img {
    -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

/* ----------------------------------
   LINKS
---------------------------------- */

a {
  color: #3b72ff;
  text-decoration: underline;
  text-decoration-style: dotted;
}

a:hover {
  color: #ff59b7;
}

a,
button,
.blog-card {
  cursor: url("../aesthetically-cut-fruit/rose%20knife.png") 4 4, pointer;
}
.sparkle {
  position: fixed;

  pointer-events: none;

  font-size: 10px;

  color: #a9a9a9;

  z-index: 9999;

  animation: sparkle-pop 700ms ease-out forwards;
}

@keyframes sparkle-pop {
  0% {
    opacity: 1;

    transform:
      translate(-50%, -50%)
      scale(0.6)
      rotate(0deg);
  }

  100% {
    opacity: 0;

    transform:
      translate(-50%, -90%)
      scale(1.5)
      rotate(45deg);
  }
}
/* ----------------------------------
   MAIN PAGE
---------------------------------- */

.page-shell {
  width: min(1080px, calc(100% - 30px));

  margin: 35px auto;

  border: 1px solid #bed6ff;
    background: rgba(250, 250, 250, .25);
  
}


/* ----------------------------------
   HEADER
---------------------------------- */

.site-header {
  padding: 24px 26px 20px;
  text-align: center;
  border-bottom: 1px dashed #bed6ff;

}

.site-title {
  color: #3b72ff;
  font-family:
    "Micro 5 Charted", sans-serif;
  font-size: 30px;

}

.site-subtitle {
  margin-top: 7px;

  color: #010101;

  font-size: 11px;

  letter-spacing: 1px;
}

.site-title a,
.site-title a:hover,
.site-title a:visited {
      color: #3b72ff;
    text-decoration:none;
}
.site-header {
  display: grid;

  grid-template-columns: 1fr auto 1fr;

  align-items: center;

  padding: 12px 20px;

}
.header-left {
  justify-self: start;
}

.site-title {
  justify-self: center;
  text-align: center;
}

.header-right {
  justify-self: end;
}
nav {
  margin-top: 17px;

  display: flex;

  justify-content: center;

  gap: 12px;

  font-size: 12px;
}
.site-logo {
  display: block;
  width: 45px;
  height: auto;
  transition: transform 0.3s linear;
}

.site-logo:hover {
  transform: rotate(-20deg);
}

/* ----------------------------------
   MAIN
---------------------------------- */

main {
  padding: 25px;
}


/* ----------------------------------
   INTRO
---------------------------------- */

.intro-box {
  border: 1px dotted #010101;

  padding: 14px 17px;

  margin-bottom: 32px;

}

.box-title {
  margin-bottom: 8px;

  color: #d7a6ff;

  font-size: 11px;

  letter-spacing: 2px;

  text-transform: lowercase;
}

.intro-box p {
  margin: 0;
}


/* ----------------------------------
   SECTION TITLE
---------------------------------- */

.section-heading {
  margin: 30px 0 15px;

  color: #3b72ff;

  text-align: center;

  font-family:
    "Courier New",
    monospace;

  font-style: italic;

  font-size: 10px;
}


/* ----------------------------------
   BLOG ENTRY PREVIEW
---------------------------------- */

/* ----------------------------------
   BLOG GRID
---------------------------------- */

.blog-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 22px;

  width: 100%;
}


/* ----------------------------------
   BLOG CARD
---------------------------------- */

.blog-card {
  min-width: 0;

  border: 1px solid #bed6ff;

  background: #ffffff;

  transition:
    transform 0.15s ease,
    border-color 0.15s ease;
}

.blog-card:hover {
  transform: translateY(-3px);

  border-color: #000000;
}


/* make whole card clickable */

.blog-card-link {
  display: block;

  height: 100%;

  color: inherit;

  text-decoration: none;
}

.blog-card-link:hover {
  color: inherit;

  background: transparent;
}


/* ----------------------------------
   THUMBNAIL
---------------------------------- */

.blog-thumbnail {
  width: 100%;

  aspect-ratio: 4 / 3;

  overflow: hidden;

  border-bottom: 1px solid #bed6ff;

  background: #0a0a0a;
}

.blog-thumbnail img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    saturate(0.9)
    contrast(0.95);

  transition:
    filter 0.2s ease,
    transform 0.2s ease;
}

.blog-card:hover .blog-thumbnail img {
  filter:
    saturate(1.1)
    contrast(1);

  transform: scale(1.015);
}


/* no-image placeholder */

.thumbnail-placeholder {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  color: lightskyblue;

  font-family:
    "Micro 5 Charted",
    sans-serif;

  font-size: 60px;

  background:
    repeating-linear-gradient(
      45deg,
      #050505,
      #050505 8px,
      #090909 8px,
      #090909 16px
    );
}


/* ----------------------------------
   BLOG CARD TEXT
---------------------------------- */

.blog-card-text {
  padding: 13px 14px 17px;
}

.blog-date {
  margin-bottom: 6px;

  color: #000000;

  font-family:
    "Courier New",
    monospace;

  font-size: 10px;

  text-transform: lowercase;
}

.blog-card h2 {
  margin: 0 0 9px;

  color: #3b72ff;

  font-family:
   "Stylish", sans-serif;
  font-size: 18px;

  font-weight: 500;

  line-height: 1.15;
}

.blog-card:hover h2 {
  color: lightskyblue;
}

.blog-card p {
  margin: 0;

  color: #b9b9b9;

  font-family:
    "Karla",
    sans-serif;

  font-size: 12px;

  line-height: 1.45;
}

/* ----------------------------------
BLOG NAV
----------------------------------*/
.post-navigation {
  display: grid;
  grid-template-columns: 1fr auto 1fr;

  align-items: center;

  margin-top: 40px;
  padding-top: 15px;

  font-size: 12px;
}

.post-nav-left {
  justify-self: start;
}

.post-nav-center {
  justify-self: center;
}

.post-nav-right {
  justify-self: end;
}

.post-navigation a {
  text-decoration: underline;
  color: #3b72ff;
}

.post-navigation a:hover {
  color: #000000;
  background: transparent;
}

/* ----------------------------------
   TABLET
---------------------------------- */

@media (max-width: 800px) {

  .blog-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* ----------------------------------
   MOBILE
---------------------------------- */

@media (max-width: 500px) {

  .blog-grid {
    grid-template-columns: 1fr;

    gap: 18px;
  }

}

/* ----------------------------------
   METADATA / date, mood
---------------------------------- */

.post-topbar {
  display: flex;

  justify-content: space-between;

  gap: 20px;

  padding-bottom: 7px;

  border-bottom: 1px dotted #75b3ff;

  color: #3b72ff;

  font-size: 11px;

  text-transform: lowercase;
}


/* ----------------------------------
   PREVIEW IMAGE
---------------------------------- */

.preview-image {
  display: block;

  width: 100%;
  max-height: 430px;

  object-fit: cover;

  margin: 15px 0;

  padding: 4px;

  background: #ffffff;

  filter:
    contrast(0.95)
    saturate(0.88);
}

.preview-image:hover {
  filter:
    contrast(1)
    saturate(1.05);
}


/* ----------------------------------
   POST FOOTER
---------------------------------- */

.post-footer {
  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 18px;

  padding-top: 10px;

  border-top: 1px dotted #bed6ff;

  color: #797979;

  font-size: 10px;
}

.read-more {
  color: #8ffcff;
}


/* ----------------------------------
   FULL BLOG POST
---------------------------------- */

.full-post {
  padding: 8px 4px 30px;
}

.full-post h1 {
  margin: 25px 0 12px;

  color: #3b72ff;

  font-family:
   "Stylish", sans-serif;

  font-size: 32px;


  font-weight: normal;

  line-height: 1.2;
}

.currently {
  margin-bottom: 35px;

  padding: 6px 10px;

  border-left: 2px solid #ff8add;

  color: #000000;

  font-size: 11px;

}


/* ----------------------------------
   POST TYPOGRAPHY
---------------------------------- */

.post-content {
  max-width: 640px;

  margin: auto;

  font-family:
  "Karla", sans-serif;

  font-size: 15px;

  line-height: 1.85;

  color: #010101;
}

.post-content p {
  margin: 0 0 22px;
  text-indent: 2em;
}

.post-content h2 {
  margin-top: 40px;

  color: #d9b6ff;

  font-family:
    Georgia,
    serif;

  font-size: 19px;

  font-style: italic;
}

.post-content blockquote {
  margin: 30px 15px;

  padding: 12px 20px;

  border-left: 1px solid #ff8ddd;

  color: #75b3ff;

  font-family:
    Georgia,
    serif;
  font-style: italic;
}

.post-content hr {
  height: 0;

  margin: 40px auto;

  border: 0;

  border-top:
    1px dotted #010101;

  width: 65%;
}

.tiny-note {
  color: #57a2ff;

  text-align: center;

  font-family:
    "Courier New",
    monospace;

  font-size: 12px;
}
.post-content p.aside {
    text-indent: 0;
    text-align: center;
    font-style: italic;
    color:#ff98d2;
}
.post-content p.caption {
    text-indent: 0;
    text-align: center;
    font-size: 11px;
}
.post-content p.noindent {
    text-indent: 0;
}
/* ----------------------------------
   POST IMAGES
---------------------------------- */

.image-stack {
  width: 100%;
  margin-top: 35px;
}

.post-image {
  width: 100%;
  margin: 30px 0;
}

.post-image img {
  display: block;
  max-width: 100%;
  height: auto;

  margin: 0 auto;
}
/* ----------------------------------
   END MARK
---------------------------------- */

.end-mark {
  margin: 50px 0 10px;

  color: #75b3ff;

  text-align: center;

  letter-spacing: 3px;
}


/* ----------------------------------
   FOOTER
---------------------------------- */

footer {
  padding: 17px 25px;

  border-top:
    1px dashed #bed6ff;

  color: #777;
font-style: italic;
    font-weight: bold;
  text-align: center;
  font-size: 10px;
}
footer a {
    text-decoration:none;

} 

.visitor-counter {
  margin-top: 5px;

  color: #916d94;
}


/* ----------------------------------
   ERROR
---------------------------------- */

.error-box {
  padding: 60px 20px;

  text-align: center;
}


/* ----------------------------------
   TEXT SELECTION ff9ee5
---------------------------------- */

::selection {
  color: #000;

  background: #90ff00;
}


/* ----------------------------------
   SCROLLBAR
---------------------------------- */

::-webkit-scrollbar {
  width: 11px;
}

::-webkit-scrollbar-track {
  background: #050505;
}

::-webkit-scrollbar-thumb {
  border: 2px solid #050505;

  background: #4c354f;
}

::-webkit-scrollbar-thumb:hover {
  background: #865b88;
}


/* ----------------------------------
   MOBILE
---------------------------------- */

@media (max-width: 600px) {

  body {
    font-size: 13px;
  }

  .page-shell {
    width: calc(100% - 16px);

    margin: 8px auto;
  }

  main {
    padding: 16px;
  }

  .site-header {
    padding:
      22px
      15px
      17px;
  }

  .site-title {
    font-size: 25px;
  }

  .post-topbar {
    flex-direction: column;

    gap: 2px;
  }

  .full-post h1 {
    font-size: 27px;
  }

}
.touch-sparkle {
  position: fixed;

  left: 0;
  top: 0;

  pointer-events: none;

  z-index: 999999;

  color: #a9a9a9;

  font-size: 14px;

  line-height: 1;

  text-shadow:
    0 0 4px #989898,
    0 0 8px rgba(152, 158, 152, 0.7);

  animation:
    touch-sparkle-pop
    900ms
    ease-out
    forwards;
}


@keyframes touch-sparkle-pop {

  0% {
    opacity: 1;

    transform:
      translate(-50%, -50%)
      scale(0.4)
      rotate(0deg);
  }

  40% {
    opacity: 1;

    transform:
      translate(-50%, -80%)
      scale(1.2)
      rotate(25deg);
  }

  100% {
    opacity: 0;

    transform:
      translate(-50%, -180%)
      scale(1.7)
      rotate(70deg);
  }

}
/* ----------------------------------
Marquee Hill 
----------------------------------*/
.hill-marquee {
  width: 100%;
  height: 25px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.hill-marquee svg {
  display: block;
  width: 1200px;
  height: 25px;
  max-width: none;
  margin: 0;
  padding: 0;
}

.hill-text {
  fill: #3b72ff;

  font-family:
    "Courier New",
    monospace;

  font-size: 10px;

  letter-spacing: 2px;
}
.hill-text textPath {
  animation: hill-scroll 14s linear infinite;
}

@keyframes hill-scroll {
  from {
    start-offset: 0%;
  }

  to {
    start-offset: -50%;
  }
}