@media only screen and (min-width: 801px) {
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        text-align: center;
        font-size: 25px;
    }

    .container {
        display: flex;
        justify-content: space-between;
        width: 800px;
        margin: 0 auto;
        padding: 10px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

    .column {
        flex: 1;
        padding: 20px;
        text-align: center;
    }

    h2 {
        font-size: 20px;
    }

    .btn {
        display: block;
        width: 100%;
        padding: 15px 5px;
        background-color: #407B40;
        color: #fff;
        text-decoration: none;
        border-radius: 5px;
        font-size: 20px;
        margin-top: 10px;
        cursor: pointer;
    }

    .btn:hover {
        background-color: #005600;
    }

    .selected {
        background-color: #007bff;
    }

    .btn-select.selected:hover {
        background-color: #0056b3;
    }


    .btn-select:disabled {
        background-color: #565756;
        cursor: not-allowed;
    }


    .total-sum {
        text-align: center;
        margin-top: 20px;
        font-weight: bold;
    }

    .image-section {
        display: flex;
        justify-content: center;
        max-width: 800px;
        margin: 0 auto;
        padding: 10px;
    }

    .image-section img {
        max-width: 45%; /* Adjust the width as needed */
        max-height: 350px;
        /* height: auto; */
        margin: 10px;
    }

    #purchaseButton {
        display: block;
        width: auto; /* Let the button size be determined by the text */
        padding: 50px 20px; /* Add padding to create a rectangular button */
        background-color: #007BFF; /* Custom button color */
        color: #fff;
        text-decoration: none;
        border-radius: 5px;
        font-size: 20px;
        margin: 20px auto; /* Center the button horizontally */
        cursor: pointer;
        white-space: nowrap; /* Prevent text from wrapping to a new line */
    }

    #purchaseButton:hover {
        background-color: #0056b3; /* Custom button color on hover */
    }

    #purchaseButton:disabled {
        background-color: #565756;
        cursor: not-allowed;
    }

    #totalSum {
        color: #f0f0f0
    }   
}
@media only screen and (max-width: 800px) {
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        text-align: center;
    }

    .container {
        display: flex;
        justify-content: space-between;
        width: 800px;
        margin: 0 auto;
        padding: 20px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

    .column {
        flex: 1;
        padding: 20px;
        text-align: center;
    }

    h2 {
        font-size: 22px;
    }

    .btn {
        display: block;
        width: 115%;
        padding: 15px 5px;
        background-color: #407B40;
        color: #fff;
        text-decoration: none;
        border-radius: 5px;
        font-size: 26px;
        margin-top: 10px;
        cursor: pointer;
    }

    .btn:hover {
        background-color: #005600;
    }

    .selected {
        background-color: #007bff;
    }

    .btn-select.selected:hover {
        background-color: #0056b3;
    }


    .btn-select:disabled {
        background-color: #565756;
        cursor: not-allowed;
    }


    .total-sum {
        text-align: center;
        margin-top: 20px;
        font-weight: bold;
    }

    .image-section {
        display: flex;
        justify-content: left;
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
    }

    .image-section img {
        max-width: 45%; /* Adjust the width as needed */
        max-height: 350px;
        /* height: auto; */
        margin: 10px;
    }

    #purchaseButton {
        display: block;
        width: auto; /* Let the button size be determined by the text */
        padding: 50px 20px; /* Add padding to create a rectangular button */
        background-color: #007BFF; /* Custom button color */
        color: #fff;
        text-decoration: none;
        border-radius: 5px;
        font-size: 26px;
        margin: 20px auto; /* Center the button horizontally */
        cursor: pointer;
        white-space: nowrap; /* Prevent text from wrapping to a new line */
    }

    #purchaseButton:hover {
        background-color: #0056b3; /* Custom button color on hover */
    }

    #purchaseButton:disabled {
        background-color: #565756;
        cursor: not-allowed;
    }

    #totalSum {
        color: #f0f0f0
    }   
}