#fork {
    text-align: center; /* Centers all text within the section */
    margin: 20px 0; /* Adds vertical spacing for better layout */
}

#fork h2 {
    margin-bottom: 10px; /* Provides spacing between the header and subtext */
    color: #ff7b00;
    width: 90%;
}

#fork h2, #fork p {
    margin-bottom: 20px;
}


#fork p {
    display: inline-block; /* Allows for width control */
    width: 90%; /* Sets maximum width to 70% of the parent container */
    text-align: center; /* Ensures text within the paragraph is centered, too */
}


#fork {
    display: flex;
    justify-content: space-around; /* This will space out the .choice elements and the button */
    align-items: center; /* This will center everything vertically */
    position: relative; /* Allows absolute positioning within the container */
    padding: 0 30px; /* Side padding */
    flex-wrap: wrap; /* Ensures responsiveness */
}

.choice {
    width: 40%; /* Keeps the width of choice elements */
    min-height: 300px; /* Minimum height */
    perspective: 1000px; /* Perspective for 3D transforms */
    position: relative; /* Relative for positioning */
    margin: 0 2%; /* Spacing between elements */
}

.choice .front, .choice .back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    transition: transform 0.6s;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 10px #888888;
    border-radius: 15px;
    padding: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.choice h4 {
    text-align: center; /* Center the text */
    display: inline-block; /* Make the border fit the content */
    white-space: nowrap;  /* Ensures the text does not wrap */
    height: 0px;
    color: white;
}

.choice .front hr {
    width: 80%;
    border: none;
    height: 2px;
    background-color: #ff7b00;
    margin: 5px 0;
}

.label-between {
    font-size: 16px;
    color: white;
    background-color: #ff7b00;
    border-radius: 10px;  /* Maintains the rounded corners */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .75;
    transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
    padding: 0px; /* No padding to maintain the compact size */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Initial shadow for 3D effect */
    cursor: pointer; /* Indicates the element is clickable */
}

.label-between:hover {
    background-color: #954800; /* Darker shade on hover */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.35); /* Deeper shadow on hover for added depth */
}

.label-between:active {
    background-color: #954800; /* Darker color when pressed */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); /* Reduced shadow makes it look pressed into the page */
    transform: translateY(4px); /* Moves the button down to simulate being pressed */
}





/* Hover effect for the button */
.label-between:hover {
    background-color: #954800; /* Darker shade on hover */
}

@media (max-width: 768px) {
    #fork {
        flex-direction: column; /* Stacks the items vertically on smaller screens */
    }

    .choice {
        width: 95%; /* Adjusts width for smaller screens */
        margin: 10px auto; /* Center and add vertical margin */
    }

    .label-between {
        position: static; /* Removes absolute positioning */
        margin: 20px auto; /* Adds margin for separation */
        width: 80px; /* Smaller size for smaller screens */
        height: 80px; /* Smaller size for smaller screens */
    }
}

.footnotee {
    position: absolute;
    bottom: 2px;
    right: 10px;
    font-size: 12px;
    color: #666;
    text-align: right;
}

.choice .back {
    background-color: #fff;
    color: black;
    transform: rotateY(180deg);
    pointer-events: none;
    opacity: 0;
}

.choice:hover .back {
    pointer-events: auto;
    transform: rotateY(0deg);
    opacity: 1; /* Show on hover */
}

.choice:hover .front {
    transform: rotateY(-180deg);
}

.chat-simulation {
    width: 100%;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.chat-bubble {
    padding: 10px 20px;
    margin: 5px 0;
    border-radius: 15px;
    background-color: #f1f1f1;
    display: block;
    max-width: 80%;
}

.assistant {
    background-color: #ddeeff;
    text-align: left !important;
    align-self: flex-start !important;
    margin: 10px !important;
}

.user {
    background-color: #eef9dd;
    text-align: right !important;
    align-self: flex-end !important;
    margin: 10px !important;
}

.choice video {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* Make the video cover the container */
    border-radius: 15px;
    box-shadow: 2px 2px 10px #888888;
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 70%; /* Could be more or less, depending on screen size */
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Optional: Adds shadow */
}

.modal-content video {
    width: 100%;
    border-radius: 15px; /* Rounds the video corners */
}

/* Media query for mobile devices */
@media (max-width: 768px) {

    #fork {
        width: 100% !important; /* Set full width */
        padding: 10px; /* Adjust padding as needed */
        margin: 0 auto; /* Centering might still be desired */
        box-sizing: border-box; /* Ensures padding does not add to the width */
    }


    #fork h2 {
        width: 100%; /* Set full width */
        margin: 0; /* Remove margins if necessary */
        padding: 10px 0; /* Optional: Add some vertical padding */
    }

    #fork p {
        width: 100%; /* Set full width */
        margin: 10px 0; /* Adjust margins as needed */
        padding: 0 15px; /* Add horizontal padding for better text alignment */
    }

    .label-between {
        display: none; /* Hide button on mobile */
    }

    .choice {
        width: 95%; /* Ensure choices are also adjusted to 95% */
        margin: 10px auto; /* Ensures choices are also centered and spaced */
    }

    #know {
        display: none; /* Hide specific sections as previously set */
    }
}