/* Handbook */
#handbook {
    overflow-y: scroll;
    background-color: black;
}

#handbook .section {
align-items: center;
width: 100%;
overflow-x: hidden;
}

#handbook .wrapper {
width: 80%;
padding: 5rem 2rem 5rem 0;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}

#handbook .page-image {
width: 100%;
object-fit: contain;
filter: contrast(120%) brightness(100%);
}

/* First image - centered in viewport */
#handbook .wrapper:nth-child(2) {
justify-content: center;
align-items: center;
width: 100%;
height: 100dvh;
padding: 0;
}

#handbook .wrapper:nth-child(2) .page-image {
max-width: 90vw;
max-height: 90vh;
width: auto;
height: auto;
object-fit: contain;
}

#handbook .hand-left, #handbook .hand-right {
position: absolute;
width: 35%;
filter: contrast(130%) brightness(80%) sepia(40%) opacity(0.2);
transition: filter 0.3s ease-in-out;
cursor: pointer;
/* filter: invert(0) grayscale(100%); */
}

#handbook .hand-left:hover, #handbook .hand-right:hover {
filter: contrast(130%) brightness(80%) sepia(40%) opacity(1);
}

#handbook .hand-left {
left: -25px;
}

#handbook .hand-right {
right: -25px;
}

#handbook .center-text {
position: fixed;
width: 75%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

padding: 4rem 2rem;
border-radius: 50%;

background: linear-gradient(180deg, transparent, 20%, black, 80%, transparent);
color: white;

font-family: 'ChosunGu', sans-serif;
font-weight: 400;
font-size: 2rem;

text-align: center;
line-height: 1.5;

z-index: 1000;
pointer-events: none;
opacity: 1;
transition: opacity 0.3s ease-in-out;
}

#handbook .center-text.hidden {
opacity: 0;
}

#wrapper-18 .hand-right,
#wrapper-19 .hand-right,
#wrapper-20 .hand-right, 
#wrapper-21 .hand-right {
right: -75px;
}

@media screen and (max-width: 600px) {
#handbook .wrapper {
    width: 100%;
    padding: 5rem 1rem 5rem 0;
}

#wrapper-18 .hand-right,
#wrapper-19 .hand-right,
#wrapper-20 .hand-right, 
#wrapper-21 .hand-right {
    right: -25px;
}

#handbook .center-text {
    width: 90%;
    font-size: 1.2rem;
}
}