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

.bookshelf-container {

width: 735px;

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

margin: 60px auto;

padding: 15px;

box-sizing: border-box;

background-color: #222222;

border: none;


}

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

header {

text-align: center;

margin-bottom: 25px;

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 p {

margin: 10px 0 5px;

text-align: center;

font-size: 12px;

color: #aaaaaa;


}

/* =========================
BOOK GRID
========================= */

.books {

display: flex;

flex-wrap: wrap;

justify-content: center;

gap: 30px;

padding: 15px;

box-sizing: border-box;


}

/* =========================
BOOK CARDS
========================= */

.book {

width: 145px;

padding: 12px;

text-align: center;

background-color: #111111;

border: none;

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

box-sizing: border-box;


}

/* =========================
BOOK COVERS
========================= */

.book img {

display: block;

width: 120px;

height: 180px;

object-fit: cover;

margin: 0 auto 10px;

border: 3px solid #000000;

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


}

/* =========================
BOOK TITLE
========================= */

.book h2 {

font-family: Times, serif;

font-size: 14px;

font-weight: normal;

letter-spacing: 1px;

line-height: 1.3;

margin: 8px 0 2px;

color: #dddddd;


}

/* =========================
AUTHOR
========================= */

.author {

margin: 0;

font-size: 11px;

color: #aaaaaa;


}

/* =========================
RATING
========================= */

.rating {

margin: 8px 0;

color: #dddddd;

letter-spacing: 2px;


}

/* =========================
PERSONAL NOTES
========================= */

.note {

margin: 8px 0 0;

padding-top: 8px;

border-top: 1px dotted #666666;

font-size: 11px;

line-height: 16px;

text-align: center;

color: #aaaaaa;


}

/* =========================
BACK LINK
========================= */

.back-area {

text-align: center;

margin-top: 28px;


}

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


}

/* =========================
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) {

.bookshelf-container {

    width: calc(100% - 20px);

    max-width: none;

    margin: 20px auto;

    padding: 12px;

}


.books {

    gap: 20px;

    padding: 10px;

}


.book {

    width: 145px;

}


}

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

.bookshelf-container::before,
.bookshelf-container::after,
header::before,
header::after {

content: none !important;

display: none !important;

animation: none !important;

text-shadow: none !important;


}