/* Centering the language buttons */
.language-buttons {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    margin-bottom: 30px; /* Add less space below the buttons */
}

.language-buttons button {
    padding: 10px 20px;
    margin-right: 10px;
    font-size: 16px;
    cursor: pointer;
    color: black; /* Set font color to black */
}

/* Styling for the book container */
.book {
    width: 380px;
    height: 560px;
    margin: auto;
    perspective: 2000px; /* Adjust perspective for a more realistic effect */
}

.page {
    margin-top: 0px;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: transform 1s;
    transform-style: preserve-3d;
    cursor: pointer;
}

.page img {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
}

.page.back {
    transform: rotateY(-180deg); /* Adjust rotation direction */
    z-index: 1;
}

.page.front {
    transform: rotateY(0deg);
    z-index: 2;
}

/* Styling for instruction label */
.instruction {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px; /* Add some space below the instruction */
}

.instruction label {
    font-size: 14px;
}

/* Centered link container */
.link-container {
    text-align: center;
    margin-top: 10px; /* Adjust as needed */
}

#dynamicLink {
    display: inline-block;
    margin-top: 5px; /* Adjust as needed */
    color: red;
}

/* Centering the Datepicker */
.datepicker-container {
    display: flex;
    justify-content: center; /* Centers the container contents */
    align-items: center; /* Vertically aligns the contents */
    margin: 10px auto; /* Reduced space between date picker and button */
    width: auto; /* Ensures the container width fits the content */
    padding: 5px 10px;
    gap: 10px;
}

.datepicker-container label {
    margin-right: 5px; /* Reduced the space between label and input */
}

.datepicker-container input {
    margin-right: 5px; /* Reduced the space between input and button */
}

/* Styling for the dynamic link container */
#dynamicLink {
    margin-top: 20px !important; /* Add space above the button */
}

/* Styling for the Fetch Message button */
.datepicker-container button {
    padding: 10px 20px; /* Padding like language buttons */
    font-size: 16px;
    cursor: pointer;
    background-color: #f8f8f8; /* Light background */
    color: black; /* Set button text color to black */
    border: 2px solid #000; /* Black border */
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s, border-color 0.3s; /* Smooth transition */
}

.datepicker-container button:hover {
    background-color: #e0e0e0; /* Lighter background on hover */
    border-color: #333; /* Darker border on hover */
}

/* Additional styles to ensure responsiveness and appearance */
body {
    font-family: Arial, sans-serif;
}

footer {
    background: #f8f9fa;
    padding: 40px 0;
}

footer a {
    color: #007bff;
}

footer a:hover {
    text-decoration: underline;
}

#back-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
}

#back-top a {
    background-color: #007bff;
    color: white;
    padding: 10px;
    border-radius: 50%;
    font-size: 20px;
}

#back-top a:hover {
    background-color: #0056b3;
}