@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:"Cormorant Garamond", serif;
    font-weight:400;
    background:linear-gradient(to right,#385244 0%,#385244 23%,#ede8dd 23%,#ede8dd 100%);
    min-height:100vh;
    isolation:isolate;
}

#theme-layer{
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(to right,#adbae3 0%,#adbae3 23%,#1c1e4d 23%,#1c1e4d 100%);
    clip-path:circle(0px at 100% 0%);
    transition:clip-path 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

#theme-layer.is-revealing{
    clip-path:circle(var(--theme-reveal-radius) at 100% 0%);
}

header,
body > svg{
    position:relative;
    z-index:2;
}


aside,
#bookshelf-container,
#review{
    z-index:2;
}


/* dark mode 
background: #2c365e;
font    : #4b8f8c;*/


header{
    display:flex;
    justify-content:space-between;
    align-items:left;
    padding:20px 40px;
}

header h1{
    font-size:2rem;
    color:#ede8dd;
}

#theme-toggle{
    padding:10px 20px;
    background:transparent;
    border:none;
    border-radius:8px;
    cursor:pointer;
    display:grid;
    place-items:center;
    transform:translate(30px, -30px);
}

.theme-icon{
    grid-area:1 / 1;
    right:5px;
    height:70px;
    object-fit: contain;
    transition: transform 0.2s ease, opacity 700ms cubic-bezier(0.22, 1, 0.36, 1);
   
}

#theme-toggle:hover .theme-icon {
    transform: scale(1.15);
}

body:not(.dark-mode) .icon-dark {
    opacity:0;
}

body.dark-mode .icon-light{
    opacity:0;
}


main{
    display:grid;
    grid-template-columns:220px 1fr;
    gap:30px;
    padding:40px; 
} 


aside{
    color:#ede6d8;
    font-size:1.5rem;
    grid-column:1;
    grid-row:1/3;
    position:absolute;
    left:85px;
    right:400px;
    top:120px;
    font-family:"Cormorant Garamond", serif;
}

aside h2{
    font-weight:450;
}

aside h2.find{
    position:relative;
    

}

.social-links h4{
    text-align:left;
    font-size:1.5rem;
    font-weight:450;
    position:relative;
    top:-10px;
    margin-bottom:5px;
}

.nav{
    gap:15px;
    display:flex;
    flex-direction:column;
    margin-top:30px;
}

#review{
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:800px;
    gap:5px;
    padding:20px;
    position:absolute;
    left:425px;
    top:280px;
}

#review h2{
    margin:0;
    font-size:2.6rem;
    margin-bottom:-8px;
}
 
#review .author {
    font-size: 1.6rem;
    font-family: 'Georgia',serif;
    position: relative;
    left: 6px;
    color: #525a52;
}

.review-meta{
    display:flex;
    font-family: 'Georgia',serif;
    gap:30px;
    margin:5px 0 15px 0;
    white-space: nowrap;
}

.review-meta p{
    margin:0;
    font-size:1.6rem;
    color:#525a52;      
}

#review p.actual_review{
    font-size:1.5rem;
    font-family: 'Georgia',serif;
    position:relative;
    left:5px; 
    max-width: 600px;
    word-wrap: break-word;   
}


#bookshelf-container{
    display:flex;
    align-items:center;
    color:#311b14;
    grid-column:2;
    grid-row:1;
    position:absolute;
    left:390px;
    top:80px;
}

.divider{
    border:none;
    max-width:635px;
    height:1px;
    background: #829c82;
    margin: 0px 0 17px 0;
    position:relative;
    left:-11px;

}



/* dark mode 
background: #1c1e4d;
color: #adbae3;*/

body.dark-background {
    background: linear-gradient( to right, #adbae3 0%, #adbae3 23%, #1c1e4d 23%, #1c1e4d 100%);
}

header h1,
aside,
aside h2,
.social-links h4,
#bookshelf-container,
#review h2,
#review .author,
.review-meta p,
#review p.actual_review {
    transition:color 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.dark-mode header h1,
body.dark-mode aside,
body.dark-mode aside h2,
body.dark-mode .social-links h4 {
    color:#1c1e4d;
}

body.dark-mode #bookshelf-container,
body.dark-mode #review h2,
body.dark-mode #review .author,
body.dark-mode .review-meta p,
body.dark-mode #review p.actual_review {
    color: #adbae3;
}

body.dark-mode .divider {
    background: #adbae3;
}


.hidden {
    display: none !important;
}

#about-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 800px;
    gap: 0px;
    padding: 20px;
    position: absolute;
    z-index: 3;
    left: 400px;
    top: 80px;
}

#about-view h2 {
    margin: 0;
    font-size: 3.5rem;
    line-height:1;
    margin-bottom: 2px;
    transition: color 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

#about-view p {
    font-size: 1.7rem;
    font-family: 'Georgia',serif;
    white-space:pre-line;
    line-height:1.25!important;
    position: relative;
    left: 5px;
    line-height:1.1;
    margin: 0 0 0.75em;
    max-width:  1000px;
    word-wrap: break-word;
    transition: color 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

#about-view p:last-child {
    margin-bottom: 0;
}

body.dark-mode #about-view h2,
body.dark-mode #about-view p {
    color: #adbae3;
}

.social-links {
    color:inherit;
    transition: color 700ms cubic-bezier(0.22,1,0.36,1);
}

.social-links a {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
    transition: color 700ms cubic-bezier(0.22,1,0.36,1);
}

.social-links a:hover {
    text-decoration:underline;
}

header h1 a{
    display:grid;
    width:250px;
    height:125px;
}

.logo,
.logo-dark{
    grid-area:1 / 1;
    width:100%;
    height:100%;
    object-fit:contain;
    transition:opacity 700ms cubic-bezier(0.22,1,0.36,1);
}

body:not(.dark-mode) .logo-dark {
    max-width:200;
    opacity:0;
}

body.dark-mode .logo {
    opacity:0;
}