html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
    background-image: url('background-lace.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/*container that holds the album background and pages*/
.album-container {
    position: relative;
    width: 1000px;
    max-width: 90%;
}

/*open album background*/
.open-album {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s ease;
    transform-origin: center;
}

/*hide radio buttons*/
.album-container input {
    display: none;
}

/*page wrapper*/
.pages {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 55%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/*each page*/
.page {
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    position: absolute;
    top: 0;
    left: 0;
}

/*show page when radio is checked*/
#page1:checked ~ .pages #content1,
#page2:checked ~ .pages #content2,
#page3:checked ~ .pages #content3,
#page4:checked ~ .pages #content4,
#page5:checked ~ .pages #content5,
#page6:checked ~ .pages #content6,
#page7:checked ~ .pages #content7,
#page8:checked ~ .pages #content8,
#page9:checked ~ .pages #content9,
#page10:checked ~ .pages #content10,
#page11:checked ~ .pages #content11,
#page12:checked ~ .pages #content12,
#page13:checked ~ .pages #content13,
#page14:checked ~ .pages #content14,
#page15:checked ~ .pages #content15,
#page16:checked ~ .pages #content16,
#page17:checked ~ .pages #content17,
#page18:checked ~ .pages #content18,
#page19:checked ~ .pages #content19,
#page20:checked ~ .pages #content20,
#page21:checked ~ .pages #content21,
#page22:checked ~ .pages #content22,
#page23:checked ~ .pages #content23,
#page24:checked ~ .pages #content24,
#page25:checked ~ .pages #content25,
#page26:checked ~ .pages #content26,
#page27:checked ~ .pages #content27,
#page28:checked ~ .pages #content28 {
    display: flex;
}

/*images inside the album*/
.page img {
    width: 48%;
    height: auto;
    max-height: 100%;
    object-fit: cover;
    cursor: pointer;
}

/*pages with 2 images*/
.two-image-page {
    margin-top: 20px;
}

.page img:hover {
    transform: scale(1.05);
}

/*arrows for page flipping*/
.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 48px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    user-select: none;
    z-index: 10;
    padding: 10px;
    transition: color 0.3s;
}

.arrow:hover {
    color: rgba(255, 255, 255, 1);
}

.arrow.left {
    left: 10px;
}

.arrow.right {
    right: 10px;
}