:root{
--bg: lightgray;
--container-bg: white;
--text: black;
--border: black;
--hover-bg: black;
--hover-text: white;
--dropdown-bg: #e5e5e5;
--font: monospace;
--font-size: 15px;
--text-size:1rem;
}

.dark-mode{
--bg: #1a1a1a;
--container-bg: #2b2b2b;
--text: #f0f0f0;
--border: white;
--hover-bg: white;
--hover-text: #1a1a1a;
--dropdown-bg: #333;
--font: monospace;
--font-size: 15px;
}

body{
font-family: var(--font);
background: var(--bg);
color: var(--text);
align-items: center;
line-height: 1.25;
font-size: var(--font-size);
}

.font-serif{
--font: serif;
--font-size: 18px;
}

.font-sans{
--font: sans-serif;
--font-size: 17px;
}

.font-mono{
--font: monospace;
--font-size: 15px;
}

/* Reading page with links */
.links{
  color: var(--text);
  font: var(--text-size);
}

/* NAVBAR */
nav{
  max-width:944px;
  margin: 0 auto;
}

nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    padding:10px;
    margin-bottom:10px;
    gap:0px;
    font-size: var(--font-size)
}

.logo{
    border:2px solid var(--border);
    padding:8px 14px;
    background-color:var(--container-bg);
    
}

.nav-links a{
    border:2px solid var(--border);
    padding:8px 14px;
    margin:0px 0px;
    text-decoration:none;
    color:var(--text);
    background-color:var(--container-bg);
}

.nav-right a{
    border:2px solid var(--border);
    padding:8px 14px;
    margin-right:5px;
    text-decoration:none;
    color:var(--text);
    background-color:var(--container-bg);
}

nav a:hover {
    background: var(--hover-bg);
    color: var(--hover-text);
}

.nav-links{
display:flex;
}

.nav-links a{
border:2px solid var(--border);
padding:8px 16px;
text-decoration:none;
margin:0;
}

.nav-right{
display:flex;
}

.nav-right a{
padding:8px 16px;
border:2px solid var(--border);
text-decoration:none;
margin:0;
}

/* dropdown container */
.dropdown {
    position: relative;
    display: inline-block;
}

/* hidden menu */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #e5e5e5;
    border:2px solid var(--border);
    min-width: 120px;
}

/* dropdown items */
.dropdown-menu a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    color: var(--text);
}

/* show dropdown on hover */
.dropdown:hover .dropdown-menu {
    display: block;
}

/* optional hover effect */
.dropdown-menu a:hover {
    background: var(--hover-bg);
    color: var(--hover-text);
}


/* PAGE CONTAINER */

.container{
  max-width:900px;
  width:90%;
  margin:auto;
  border:2px solid var(--border);
  padding:20px;
  background:var(--container-bg);
  font-size:var(--text-size);
}

/* HEADER AREA */

.header-section{
    display:flex;
    gap:40px;
}

.sidebar{
    width:180px;
}

.intro{
    flex:1;
    font-family: var(--font);
    font-size: var(--font-size);
    margin-bottom: 15px;
}

.view-list{
    margin-top:15px;
    padding:10px 20px;
    border:2px solid var(--border);
    background:var(--container-bg);
    font-weight:bold;
}

.book-list{
border:2px solid var(--border);
padding:20px;
margin-top:20px;
width:600px;
max-height:160px;
overflow-y:auto;
}

.book-list summary{
font-weight:bold;
font-size:18px;
cursor:pointer;
margin-bottom:10px;
}

.book-list ul{
list-style:none;
padding-left:20px;
margin-top:15px;
}

.book-list li{
margin:12px 0;
}

.book-list a{
text-decoration:underline;
color: var(--text);
font-style:italic;
}

/* REVIEW */

.review-content{
display:flex;
gap:30px;
align-items:flex-start;
font-family: var(--font);
font-size: var(--font-size);
}
.review-left{
flex:0 0 190px;
display:flex;
flex-direction:column;
gap:10px;
}
.book-cover{
width:190px;
border:2px solid var(--border);
margin-bottom:20px;
}
.review-right{
flex:1;
}
.review-date{
font-weight:bold;
margin-bottom:5px;
font-size: 18px;
margin-top:10px;
}

.publisher{
    color:gray;
}

html{
scroll-behavior:smooth;
}