/* =========================
PAGE
========================= */

html,
body {

margin: 0;
padding: 0;

min-height: 100%;

background-color: #222222;

font-family: 'Titillium Web', sans-serif;

font-size: 13px;

color: #eeeeee;

letter-spacing: 0.7px;

cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ctext x='2' y='19' font-size='18' fill='%23ffffff'%3E%E2%98%85%3C/text%3E%3C/svg%3E") 2 2, auto;

}

/* =========================
MAIN CONTAINER
========================= */

.journal-container {

width: 900px;

max-width: calc(100% - 40px);

margin: 60px auto;

padding: 20px;

box-sizing: border-box;

background-color: #222222;

border: none;

}

/* =========================
HEADER
========================= */

header {

text-align: center;

margin-bottom: 15px;

position: relative;

}

h1 {

margin: 0;

padding: 8px;

background: #111111;

color: #dddddd;

border: none;

font-family: Times, serif;

font-size: 18px;

font-weight: normal;

letter-spacing: 4px;

box-sizing: border-box;

}

header h1 {

text-shadow:
0 0 2px rgba(255, 255, 255, 0.25);

animation: titleGlow 3s ease-in-out infinite;

}

@keyframes titleGlow {

0%, 100% {

text-shadow:
  0 0 2px rgba(255, 255, 255, 0.25);


}

50% {

text-shadow:
  0 0 5px rgba(255, 255, 255, 0.65),
  0 0 12px rgba(255, 255, 255, 0.35);


}

}

header::before {

content: "✧ ˚₊‧ ✦ ˚₊‧ ✧";

position: absolute;

top: -16px;
left: 45px;

color: #cccccc;

font-size: 10px;

letter-spacing: 5px;

animation: twinkle 2s ease-in-out infinite;

}

header::after {

content: "✦ ˚₊‧ ✧ ˚₊‧ ✦";

position: absolute;

bottom: 30px;
right: 45px;

color: #cccccc;

font-size: 10px;

letter-spacing: 5px;

animation: twinkle 2s ease-in-out infinite;

animation-delay: 1s;

}

@keyframes twinkle {

0%, 100% {

opacity: 0.3;

text-shadow:
  0 0 0 transparent;


}

50% {

opacity: 1;

text-shadow:
  0 0 4px #ffffff,
  0 0 9px #ffffff;


}

}

header p {

margin: 10px 0 5px;

text-align: center;

font-size: 12px;

color: #aaaaaa;

}

/* =========================
TWO-COLUMN LAYOUT
========================= */

.blog-layout {

display: flex;

width: 100%;

gap: 15px;

box-sizing: border-box;

}

/* =========================
LEFT ENTRY LIST
========================= */

.entry-list {

width: 230px;

flex-shrink: 0;

height: 500px;

overflow-y: auto;

box-sizing: border-box;

padding: 8px;

background-color: #111111;

border: none;

box-shadow: 3px 3px 0 #000000;

}

/* =========================
SIDEBAR LINKS
========================= */

.entry-link {

display: block;

padding: 8px 7px;

margin-bottom: 4px;

color: #dddddd;

background-color: #dddddd;

text-decoration: none;

border: 1px solid rgba(17, 17, 17, 0.2);

box-sizing: border-box;

transition:
background-color 0.25s ease,
color 0.25s ease,
padding-left 0.25s ease,
box-shadow 0.15s ease;

}

.list-date {

display: block;

margin-bottom: 4px;

color: #555555;

font-size: 10px;

letter-spacing: 1px;

}

.list-title {

display: block;

color: #111111;

font-family: Times, serif;

font-size: 13px;

line-height: 1.3;

letter-spacing: 1px;

}

/* =========================
SIDEBAR HOVER
========================= */

.entry-link:hover {

padding-left: 12px;

background-color: #333333;

color: #ffffff;

border-color: #000000;

box-shadow: 3px 3px 0 #000000;

}

.entry-link:hover .list-date,
.entry-link:hover .list-title {

color: #ffffff;

}

/* =========================
SELECTED ENTRY
========================= */

.entry-link.selected {

padding-left: 12px;

background-color: #333333;

color: #ffffff;

border-color: #000000;

box-shadow: 3px 3px 0 #000000;

}

.entry-link.selected .list-date,
.entry-link.selected .list-title {

color: #ffffff;

}

/* =========================
SIDEBAR SCROLLBAR
========================= */

.entry-list::-webkit-scrollbar {

width: 9px;

}

.entry-list::-webkit-scrollbar-track {

background: #222222;

}

.entry-list::-webkit-scrollbar-thumb {

background: #dddddd;

border: 1px solid #000000;

}

/* =========================
RIGHT ENTRY WINDOW
========================= */

.entry-window {

flex: 1;

height: 500px;

overflow-y: auto;

box-sizing: border-box;

padding: 9px;

background-color: #111111;

border: none;

box-shadow: 3px 3px 0 #000000;

}

/* =========================
RIGHT WINDOW SCROLLBAR
========================= */

.entry-window::-webkit-scrollbar {

width: 10px;

}

.entry-window::-webkit-scrollbar-track {

background: #222222;

}

.entry-window::-webkit-scrollbar-thumb {

background: #dddddd;

border: 1px solid #000000;

}

/* =========================
BLOG ENTRIES
========================= */

/*
All entries are hidden by default.
JavaScript adds "active" to the
selected entry.
*/

.entry {

display: none;

padding: 15px;

background-color: #222222;

border: none;

box-sizing: border-box;

}

.entry.active {

display: block;

}

/* =========================
ENTRY HEADER
========================= */

.entry-header {

display: flex;

justify-content: flex-start;

align-items: center;

margin-bottom: 10px;

padding-bottom: 7px;

border-bottom: 1px dotted #666666;

font-size: 10px;

}

.date {

color: #aaaaaa;

letter-spacing: 1px;

}

/* =========================
ENTRY TITLE
========================= */

.entry h2 {

margin: 5px 0 12px;

color: #dddddd;

font-family: Times, serif;

font-size: 17px;

font-weight: normal;

letter-spacing: 2px;

}

/* =========================
ENTRY TEXT
========================= */

.entry p {

margin: 10px 0;

line-height: 1.7;

text-align: justify;

}

/* =========================
BACK BUTTON
========================= */

.back-area {

margin-top: 28px;

text-align: center;

}

.back-area a {

display: inline-block;

padding: 6px 15px;

background: #dddddd;

color: #111111;

border: 1px solid #111111;

box-shadow: 3px 3px 0 #000000;

text-decoration: none;

font-style: italic;

transition:
transform 0.15s ease,
box-shadow 0.15s ease,
background-color 0.15s ease;

}

.back-area a:hover {

transform: translate(-2px, -2px);

box-shadow: 5px 5px 0 #000000;

background: #333333;

color: #ffffff;

}

.back-area a:active {

transform: translate(1px, 1px);

box-shadow: 0 0 0 #000000;

}

footer {

margin-top: 30px;

padding-top: 15px;

text-align: center;

}

/* =========================
GENERAL LINKS
========================= */

a {

cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ctext x='2' y='19' font-size='18' fill='%23ffffff'%3E%E2%98%85%3C/text%3E%3C/svg%3E") 2 2, auto;

}

/* =========================
TEXT SELECTION
========================= */

::selection {

background-color: #dddddd;

color: #111111;

}

/* =========================
MOBILE
========================= */

@media (max-width: 700px) {

.journal-container {

width: calc(100% - 20px);

max-width: none;

margin: 20px auto;

padding: 12px;


}

.blog-layout {

flex-direction: column;


}

.entry-list {

width: 100%;

height: 170px;


}

.entry-window {

width: 100%;

height: 500px;


}

.entry-header {

flex-direction: column;

align-items: flex-start;

gap: 4px;


}

}

/* =========================================
   REMOVE DECORATIVE STARS
========================================= */

.journal-container::before,
.journal-container::after,
header::before,
header::after,
.entry-window::before,
.entry-window::after {
    content: none !important;
    display: none !important;
    animation: none !important;
    text-shadow: none !important;
}