body {
    width: 100%;
    height: 100%;
    font-family: 'Titillium Web';
}

.background {
    position: absolute;
    top: 0px;
    left: 0px;
    box-shadow: 4px 5px 11.3px rgba(0, 0, 0, 0.28);
    background: linear-gradient(180deg, rgba(10, 161, 233, 0.43), rgba(228, 1, 120, 0.24) 50%, rgba(171, 205, 13, 0.2));
    width: 390px;
    height: 844px;
}

.gradient-background {
    opacity: 0;
    position: absolute;
    height: 48.7%;
    width: 79.74%;
    top: 25.71%;
    right: 10.26%;
    bottom: 25.59%;
    left: 10%;
    box-shadow: 4px 5px 11.3px rgba(0, 0, 0, 0.28);
    border-radius: 40px;
    background: linear-gradient(180deg, rgba(10, 161, 233, 0.86), rgba(228, 1, 120, 0.48) 50%, rgba(171, 205, 13, 0.4));
}

.instax-share-logo-bg-removed {
    opacity: 0;
    position: absolute;
    top: 338px;
    left: 72px;
    width: 247px;
    height: 169px;
    object-fit: cover;
}

.fujifilm-01-1-icon {
    opacity: 0;
    position: absolute;
    top: 591px;
    left: 154px;
    width: 81px;
    height: 18px;
    object-fit: cover;
    display: block;
}

/* Page 2 css */
.page-2 {
    width: 400px;
    position: absolute;
    height: 844px;
    overflow: hidden;
    left: -1%;
    opacity: 0;
}

.page-2-background {
    position: absolute;
    background-color: #fff;
    background-image: url('resources/background.png');
    /* Replace 'path/to/your/image.jpg' with your actual image path */
    /* background-size: cover; */
    background-position: center;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 0;
}

.gradient-background1 {
    position: absolute;
    opacity: 0;
    z-index: 0;
    width: 311px;
    height: 652px;
    bottom: 25.59%;
    top: 146px;
    left: 11%;
    box-shadow: 4px 5px 11.3px rgba(0, 0, 0, 0.28);
    border-radius: 40px;
    background: linear-gradient(180deg, rgba(10, 161, 233, 0.86), rgba(228, 1, 120, 0.48) 50%, rgba(171, 205, 13, 0.4));
}

.splash-screen-icon,
.splash-screen-icon1 {
    position: absolute;
    height: 3.32%;
    width: 7.18%;
    top: 89.22%;
    right: 54.1%;
    bottom: 7.46%;
    left: 38.72%;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
    opacity: 0;
    display: none;
}

.picture-holder,
.picture-holder1 {
    position: absolute;
    height: 20.38%;
    width: 40.87%;
    top: 20.5%;
    right: 29.64%;
    bottom: 59.12%;
    left: 29.49%;
    object-fit: cover;
    opacity: 0;
    display: none;
    z-index: 1;
}

.splash-screen-button,
.splash-screen-button1 {
    position: absolute;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 40px;
    background-color: #f5f5f5;
    width: 129px;
    height: 34px;
    left: 50%;
    transform: translateX(-50%);
    border: none;
    opacity: 0;
    display: none;
    z-index: 1;
}

.instax-share-logo-bg-removed1 {
    position: absolute;
    top: 38px;
    left: 130px;
    width: 130px;
    height: 101px;
    object-fit: cover;
}

/* Page 3 css */
.page-3 {
    overflow: hidden;
}

.back-button {
    position: absolute;
    top: 58px;
    left: 23px;
    width: 45px;
    height: 45px;
    object-fit: contain;
    opacity: 0;
}

.select-picture-holder {
    position: absolute;
    height: 35.75%;
    width: 48.43%;
    bottom: 52.25%;
    object-fit: cover;
    opacity: 0;
}


.picture-group {
    position: absolute;
    height: 65%;
    top: 14.78%;
    right: 2.85%;
    left: 5.13%;
    opacity: 0;
}

.group-item-button {
    position: absolute;
    top: 165px;
    left: 130px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 40px;
    background-color: #f5f5f5;
    width: 131px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    opacity: 0;
}

.recents {
    display: inline-block;
    width: 72.5px;
    height: 24px;
    font-size: 15px;
    padding-right: 25px;
    padding-top: 8px;
    opacity: 0;
}

.dropdown-button {
    position: absolute;
    top: 179px;
    left: 227px;
    width: 16px;
    height: 16px;
    opacity: 0;
}

.select-a-picture-inner {
    position: absolute;
    top: 0px;
    left: 0px;
    box-shadow: 4px 5px 11.3px rgba(0, 0, 0, 0.28);
    border-radius: 40px;
    background-color: #eb71b5;
    width: 221.1px;
    height: 57px;
    opacity: 0;
}

.select-a-picture {
    position: absolute;
    top: 12px;
    left: 27px;
    font-weight: 600;
    display: inline-block;
    width: 165px;
    height: 32px;
    opacity: 0;
}

.select-a-picture-group {
    position: absolute;
    top: 50px;
    left: 86px;
    width: 221.1px;
    height: 57px;
    font-size: 25px;
    opacity: 0;
}

/* Page 4 css */
.page-4 {
    width: 400px;
    position: relative;
    height: 844px;
    overflow: hidden;
    left: -2%;
    opacity: 0;
}

.page-4-background {
    position: absolute;
    background-color: #fff;
    background-image: url('resources/background.png');
    /* Replace 'path/to/your/image.jpg' with your actual image path */
    /* background-size: cover; */
    background-position: center;
    width: 100%;
    height: 100%;
}

.picture-frame {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #f5f5f5;
    width: 285px;
    height: 351px;
}

.picture-preview-image {
    position: absolute;
    height: 70.09%;
    width: 86.32%;
    top: 6.84%;
    right: 6.67%;
    bottom: 23.08%;
    left: 7.02%;
    object-fit: cover;
}

.picture-preview-parent {
    position: absolute;
    top: 0px;
    left: 304px;
    width: 285px;
    height: 351px;
}

.preview-group-parent {
    position: absolute;
    top: 197px;
    left: -252px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    width: 893px;
    height: 462px;
}

.page-4-navigation-bar {
    position: absolute;
    top: 750px;
    left: -20px;
    box-shadow: 4px 5px 11.3px rgba(0, 0, 0, 0.28);
    border-radius: 40px;
    background-color: #5fa3e0;
    width: 433px;
    height: 107px;
}


.page-4-navigation-bar-icon {
    position: absolute;
    height: 28.32%;
    width: 6.18%;
    top: 25.65%;
    bottom: 4.03%;
    right: 72.1%;
    opacity: 0;
}

.page-4-navigation-bar-icon1 {
    position: absolute;
    height: 28.32%;
    width: 6.18%;
    top: 25.65%;
    bottom: 4.03%;
    right: 45.9%;
    opacity: 0;
}

.page-4-navigation-bar-icon2 {
    position: absolute;
    height: 28.32%;
    width: 6.18%;
    top: 25.65%;
    bottom: 4.03%;
    right: 21.21%;
    opacity: 0;
}

.print-button,
.reprint-button,
.home-button {
    position: absolute;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 40px;
    background-color: #f5f5f5;
    width: 120px;
    height: 56px;
    font-size: 17px;
    top: 631px;
    left: 135px;
    cursor: pointer;
    border: none;
}

.preview-back-button {
    position: absolute;
    top: 58px;
    left: 23px;
    width: 45px;
    height: 45px;
    object-fit: contain;
    opacity: 0;
}

.preview-wifi {
    position: absolute;
    top: 58px;
    left: 333px;
    width: 45px;
    height: 45px;
    object-fit: contain;
    opacity: 0;
}

.preview-inner {
    position: absolute;
    top: 0px;
    left: 0px;
    box-shadow: 4px 5px 11.3px rgba(0, 0, 0, 0.28);
    border-radius: 40px;
    background-color: #eb71b5;
    width: 221.1px;
    height: 57px;
    opacity: 0;
}

.preview {
    position: absolute;
    top: 15px;
    left: 70px;
    font-weight: 600;
    display: inline-block;
    width: 165px;
    height: 32px;
    opacity: 0;
}

.preview-group {
    position: absolute;
    top: 50px;
    left: 86px;
    width: 221.1px;
    height: 57px;
    font-size: 25px;
    opacity: 0;
}

.progress-bar-inner {
    border-radius: 20px;
    background-color: #abcd0d;
    position: absolute;
    height: 18px;
    width: 60px;
}

.progress-bar {
    position: absolute;
    top: 650px;
    left: 68px;
    border-radius: 20px;
    background-color: #fff;
    width: 249px;
    height: 25px;
    overflow: hidden;
    padding: 4px 200px 4px 4px;
    box-sizing: border-box;
}

.pulse {
    background-color: #ABCD0D;
    top: 150px;
    left: 290px;
    width: 90px;
    height: 90px;
    border-radius: 100%;
    position: relative;
    opacity: 0;
}

.ring {
    position: absolute;
    background-color: inherit;
    height: 100%;
    width: 100%;
    border-radius: 100%;
    margin-top: -80px;
    z-index: 0;
}

.ring-img {
    padding-top: 20px;
    padding-left: 20px;
    width: 50px;
    height: 50px;
}