:root { --bg: #f5f0e6; --text: #2a2a2a; --title: #3e2f25; --accent: #9eb2a5; --yellow: #EDB74D; --red: #EB6666; --green: #6FB18A; --blue: blue; --violet: violet; }

a, a:visited, a:hover, a:active { color: inherit; text-decoration: none; }

body { background-color: var(--bg); color: var(--text); position: relative; margin: 0; }

body::before, body::after { position: absolute; left: 0; right: 0; bottom: 0; top: 0; content: ''; width: 100%; height: 100%; z-index: -1; opacity: 40%; }

body::before { background: #8C8C8C; filter: url(#noiseFilter); }

.page { margin: 0px auto; padding: 0px; max-width: 800px; width: 80%; }

.home-page { display: flex; flex-direction: column; align-items: center; min-height: 100vh; box-sizing: border-box; }

.post-page { display: flex; flex-direction: column; align-items: center; min-height: 100vh; box-sizing: border-box; padding: 20px 0px 0px 0px; }

.header * { color: var(--title); margin: 0px; }
.header h1 { font-family: "Rubik Mono One", serif; font-weight: 400; font-style: normal; margin-bottom: -6px; font-size: 24px; }
.header p { font-family: "Merriweather", serif; font-weight: 400; font-style: normal; font-size: 14px; }

.header--post { opacity: 0.6; margin-bottom: 60px; text-align: center; }
.header--post .base { font-family: "Rubik Mono One", serif; font-weight: 400; font-style: normal; font-size: 24px; display: block; }

hr { display: block; border-style: inset; border-width: 1px; border-top: 3px double; border-bottom: none; width: 100%; }

.post-content { font-family: "Merriweather", serif; font-weight: 400; font-style: normal; }
.post-content .title, .post-content .subtitle, .post-content .date { text-align: left; font-weight: bold; }
.post-content .date, .post-content .subtitle { font-size: 16px; opacity: 0.6; }
.post-content .images { display: flex; justify-content: space-around; flex-wrap: wrap; }
.post-content .images img { margin: 30px 0; max-width: 260px; width: 80%; border-radius: 4px; box-shadow: 0px 0px 20px 6px rgba(0, 0, 0, 0.1); }
.post-content .date { margin-bottom: 4px; }
.post-content .title { font-family: "Rubik Mono One", serif; font-weight: 400; font-style: normal; word-spacing: -0.5em; line-height: 0.9; }
.post-content .piece { text-align: justify; text-justify: inter-word; margin-bottom: 40px; line-height: 1.8; }
.post-content hr { margin: 0 auto 60px auto; }
.post-content .note { margin-top: 40px; font-size: 14px; text-align: center; color: #888888; }

.texture { background-size: 10%; }

.texture2 { background-size: 60%; }

.texture, .texture2 { background-image: url("/assets/006-texture-crop.jpg"); background-repeat: repeat; background-position-y: center; background-position-x: center; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: var(--text); }

.header__menu a { font-family: "Merriweather", serif; font-weight: 400; font-style: normal; font-size: 14px; transition: color 0.3s ease; }
.header__menu a:not(:last-child) { margin-right: 20px; }
.header__menu a:hover { color: #FF0000; }
.header__menu a.active { color: #888888; text-decoration: underline; text-decoration-thickness: 3px; }

.main { display: flex; width: 100%; }

.four-oh-four { display: flex; flex-direction: column; align-items: left; }
.four-oh-four__title { font-family: "Rubik Mono One", serif; font-weight: 400; font-style: normal; }
.four-oh-four__title div:nth-child(1) { font-size: 18px; margin-bottom: -10px; }
.four-oh-four__title div:nth-child(2) { font-size: 30px; color: var(--red); }
.four-oh-four__title div:nth-child(3) { font-size: 10px; opacity: 0.6; font-family: "Merriweather", serif; }
.four-oh-four__poem { font-family: "Merriweather", serif; font-weight: 400; font-style: normal; font-size: 16px; text-align: left; margin-top: 40px; margin-bottom: 40px; line-height: 1.8; }
.four-oh-four__note { margin-top: 10px; font-size: 14px; text-align: center; }
.four-oh-four__note a { font-weight: bold; text-decoration: underline; }

.posts { flex: 0 0 362px; min-height: 400px; }

.post { display: block; }
.post:hover { color: #FF0000; cursor: pointer; }
.post:not(:last-child) { margin-bottom: 30px; }
.post * { margin: 0px; }
.post h2 { font-family: "Merriweather", serif; font-weight: 400; font-style: normal; font-size: 20px; margin-bottom: -2px; }
.post div { font-family: "Rubik Mono One", serif; font-weight: 400; font-style: normal; font-size: 10px; opacity: 0.6; }

.menu { flex: 1; display: flex; align-items: center; justify-content: center; }
.menu a { font-family: "Merriweather", serif; font-weight: 400; font-style: normal; font-size: 14px; text-decoration: none; transition: color 0.3s ease; }
.menu a:not(:last-child) { margin-right: 50px; }
.menu a:hover { color: #FF0000; }
.menu a.active { text-decoration: underline; text-decoration-thickness: 3px; color: #FF0000; }

.footer { padding: 30px; color: #888888; font-family: "Rubik Mono One", serif; font-weight: 400; font-style: normal; font-size: 10px; letter-spacing: 2px; }

.palette { position: absolute; top: 100px; left: 1%; width: 400px; height: 100px; display: flex; border: solid gray 1px; border-radius: 4px; opacity: 0; }
.palette:hover { opacity: 1; }
.palette > * { width: 100px; height: 100%; }
.palette div:nth-child(1) { background-color: #f5f0e6; }
.palette div:nth-child(2) { background-color: #2a2a2a; }
.palette div:nth-child(3) { background-color: #3e2f25; }
.palette div:nth-child(4) { background-color: #9eb2a5; }

.header { position: relative; }

.blob-cont { z-index: -2; width: 100%; background-color: rgba(2, 2, 2, 0.5); position: absolute; top: 0px; }

.blob { border-radius: 100px; filter: blur(12px); opacity: 0.85; }

.yellow { background-color: var(--yellow); position: absolute; top: -7px; left: -11px; height: 50px; width: 50px; animation: float-yellow 7s infinite ease-in-out; animation-delay: 0s; }

.blue { background-color: var(--blue); position: absolute; left: 226px; top: 11px; height: 30px; width: 70px; animation: float-blue 9s infinite ease-in-out; animation-delay: 1.2s; }

.violet { background-color: var(--violet); position: absolute; left: 313px; top: 1px; height: 20px; width: 20px; animation: float-violet 8.5s infinite ease-in-out; animation-delay: 0.6s; }

.green { background-color: var(--green); position: absolute; left: 256px; top: 1px; height: 70px; width: 70px; animation: float-green 10s infinite ease-in-out; animation-delay: 0.3s; }

.red { background-color: var(--red); position: absolute; right: -5px; top: -12px; height: 40px; width: 40px; animation: float-red 8s infinite ease-in-out; animation-delay: 1.8s; }

@keyframes float-yellow { 0% { transform: translate(0px, 0px) rotate(0deg) scale(1); }
  25% { transform: translate(-30px, -15px) rotate(5deg) scale(1.1); }
  50% { transform: translate(-50px, -5px) rotate(-3deg) scale(0.95); }
  75% { transform: translate(-20px, -20px) rotate(4deg) scale(1.05); }
  100% { transform: translate(0px, 0px) rotate(0deg) scale(1); } }
@keyframes float-blue { 0% { transform: translate(0px, 0px) rotate(0deg) scale(1); }
  20% { transform: translate(-25px, 10px) rotate(-4deg) scale(1.15); }
  40% { transform: translate(-45px, -8px) rotate(6deg) scale(0.9); }
  60% { transform: translate(-35px, 5px) rotate(-2deg) scale(1.08); }
  80% { transform: translate(-15px, -12px) rotate(3deg) scale(1.02); }
  100% { transform: translate(0px, 0px) rotate(0deg) scale(1); } }
@keyframes float-violet { 0% { transform: translate(0px, 0px) rotate(0deg) scale(1); }
  30% { transform: translate(15px, -20px) rotate(8deg) scale(1.2); }
  60% { transform: translate(-20px, -10px) rotate(-6deg) scale(0.85); }
  100% { transform: translate(0px, 0px) rotate(0deg) scale(1); } }
@keyframes float-green { 0% { transform: translate(0px, 0px) rotate(0deg) scale(1); }
  15% { transform: translate(10px, -25px) rotate(-5deg) scale(1.1); }
  35% { transform: translate(-15px, -35px) rotate(7deg) scale(0.92); }
  55% { transform: translate(-25px, -20px) rotate(-4deg) scale(1.05); }
  75% { transform: translate(-10px, -10px) rotate(3deg) scale(1.08); }
  100% { transform: translate(0px, 0px) rotate(0deg) scale(1); } }
@keyframes float-red { 0% { transform: translate(0px, 0px) rotate(0deg) scale(1); }
  25% { transform: translate(-20px, -25px) rotate(6deg) scale(1.12); }
  50% { transform: translate(-40px, -15px) rotate(-5deg) scale(0.88); }
  75% { transform: translate(-15px, -30px) rotate(4deg) scale(1.06); }
  100% { transform: translate(0px, 0px) rotate(0deg) scale(1); } }
.about { text-align: justify; line-height: 1.8; font-size: 18px; font-family: "Merriweather", serif; display: flex; align-items: center; flex-direction: column; }
.about > img { margin: 30px 0; max-width: 260px; width: 80%; border-radius: 4px; box-shadow: 0px 0px 20px 6px rgba(0, 0, 0, 0.1); }

.page--title { font-family: "Rubik Mono One", serif; color: #FF0000; }

.svg-thing { position: absolute; bottom: 0; left: 0; z-index: -1; }