/* ==================================================
RECENTLY
Y2K PERSONAL WEBSITE / BOOKMARK STYLE
MONOCHROME VERSION
================================================== */

/* =========================
BASE
========================= */

html,
body {

margin: 0;
padding: 0;

min-height: 100%;

background-image: none;

background-color: #222222;

color: #eeeeee;

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

font-size: 13px;

letter-spacing: 1px;

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;

}

body {

padding: 45px 20px;

box-sizing: border-box;

}

*,
*:before,
*:after {

box-sizing: border-box;

}

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

.recently-container {

width: 820px;

max-width: 100%;

margin: 0 auto;

padding: 12px;

background: rgba(40, 40, 40, 0.95);

border: 1px solid #000000;

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

}

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

header {

position: relative;

margin-bottom: 12px;

padding: 16px 15px 18px;

text-align: center;

background:
linear-gradient(
to bottom,
#555555 0%,
#444444 48%,
#333333 100%
);

border: 1px solid #111111;

border-radius:
16px 16px 4px 4px;

box-shadow:
inset 1px 1px 0 rgba(255,255,255,0.35),
inset -1px -1px 0 rgba(0,0,0,0.5);

}

/* =========================
TITLE STICKER
========================= */

.title-sticker {

display: inline-block;

padding: 6px 20px 7px;

background: #dddddd;

border: 1px solid #111111;

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

transform: rotate(-1deg);

}

h1 {

margin: 0;

color: #111111;

font-family:
Times,
"Times New Roman",
serif;

font-size: 21px;

font-weight: normal;

letter-spacing: 5px;

}

/* =========================
SUBTITLE
========================= */

header p {

margin: 11px 0 0;

color: #eeeeee;

font-size: 11px;

font-style: italic;

}

/* =========================
MAIN LAYOUT
========================= */

.main-layout {

display: grid;

grid-template-columns:
minmax(0, 1fr)
220px;

gap: 10px;

align-items: start;

}

.tracker-column {

min-width: 0;

}

/* =========================
SECTIONS
========================= */

.media-section,
.bookmarks-section {

position: relative;

margin-bottom: 12px;

padding: 8px;

background:
rgba(35, 35, 35, 0.95);

border: 1px solid #000000;

box-shadow:
inset 1px 1px 0 rgba(255,255,255,0.12);

}

/* =========================
SECTION TAB
========================= */

.section-tab {

margin-bottom: 8px;

padding: 6px 8px;

background:
linear-gradient(
to bottom,
#666666 0%,
#555555 50%,
#444444 100%
);

border: 1px solid #111111;

box-shadow:
inset 1px 1px 0 rgba(255,255,255,0.35),
inset -1px -1px 0 rgba(0,0,0,0.45);

color: #eeeeee;

font-family:
Arial,
Helvetica,
sans-serif;

font-size: 11px;

font-weight: bold;

text-align: center;

text-shadow:
1px 1px 0 #222222;

}

/* =========================
SECTION DESCRIPTION
========================= */

.section-note {

margin: 7px 2px 10px;

color: #eeeeee;

font-size: 9px;

font-style: italic;

text-align: center;

opacity: 0.85;

}

/* =========================
BOOKMARK LIST
========================= */

.bookmark-list {

display: flex;

flex-direction: column;

gap: 5px;

}

/* =========================
TEXT BOOKMARK
========================= */

.bookmark {

position: relative;

min-height: 46px;

padding: 6px 9px 7px 14px;

background: #dddddd;

border: 1px solid #000000;

color: #111111;

box-shadow:
2px 2px 0 rgba(0,0,0,0.5);

transition:
transform 0.12s ease,
background 0.12s ease;

}

/* =========================
BOOKMARK STRIP
========================= */

.bookmark:before {

content: "";

position: absolute;

left: 0;

top: 0;

width: 5px;

height: 100%;

background: #333333;

border-right: 1px solid #000000;

}

/* =========================
FOLDED CORNER
========================= */

.bookmark:after {

content: "";

position: absolute;

right: -1px;

bottom: -1px;

width: 0;

height: 0;

border-left: 8px solid transparent;

border-bottom: 8px solid #333333;

}

/* =========================
BOOKMARK TITLE
========================= */

.bookmark-title {

color: #111111;

font-family:
Times,
"Times New Roman",
serif;

font-size: 13px;

line-height: 1.25;

}

/* =========================
CHAPTER / EPISODE
========================= */

.bookmark-status {

display: inline-block;

margin-top: 5px;

padding: 2px 6px;

background: #333333;

border: 1px solid #000000;

color: #eeeeee;

font-family:
Arial,
Helvetica,
sans-serif;

font-size: 8px;

font-weight: bold;

line-height: 1.2;

}

/* =========================
BOOKMARK HOVER
========================= */

.bookmark:hover {

transform: translateX(2px);

background: #eeeeee;

}

/* =========================
BOOKMARKS / POSTERS
========================= */

.bookmarks-section {

position: sticky;

top: 15px;

}

/* =========================
POSTER GRID
========================= */

.poster-grid {

display: grid;

grid-template-columns:
repeat(2, 1fr);

gap: 7px;

padding: 2px;

}

/* =========================
POSTER
========================= */

.poster {

padding: 0;

background: transparent;

border: none;

box-shadow: none;

transition:
transform 0.12s ease;

}

/* =========================
POSTER IMAGE
========================= */

.poster img {

display: block;

width: 100%;

height: 128px;

object-fit: cover;

border: 1px solid #000000;

}

/* =========================
POSTER HOVER
========================= */

.poster:hover {

transform:
translateY(-3px);

}

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

footer {

margin-top: 28px;

text-align: center;

}

footer 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;

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;

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

}

footer a:hover {

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

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

background: #333333;

color: #ffffff;

}

footer a:active {

transform:
translate(1px, 1px);

box-shadow:
0 0 0 #000000;

}

/* =========================
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;

}

/* =========================
TABLET / SMALL DESKTOP
========================= */

@media (max-width: 720px) {

.main-layout {

grid-template-columns:
  1fr;


}

.bookmarks-section {

position: static;


}

.poster-grid {

grid-template-columns:
  repeat(4, 1fr);


}

.poster img {

height: 150px;


}

}

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

@media (max-width: 520px) {

body {

padding: 20px 8px;


}

.recently-container {

padding: 7px;

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


}

header {

padding: 13px 8px 15px;


}

h1 {

font-size: 18px;

letter-spacing: 4px;


}

.poster-grid {

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

gap: 6px;


}

.poster img {

height: 125px;


}

.bookmark-title {

font-size: 12px;


}

}

/* =========================
VERY SMALL MOBILE
========================= */

@media (max-width: 350px) {

.poster-grid {

grid-template-columns:
  repeat(2, 1fr);


}

.poster img {

height: 150px;


}

}