body{
        max-width: 800px;
         margin: 0 auto;
         padding: 0px 10px;
       }

       .quiz {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 4%;
            padding: 0;
        }

        .answers {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            width: 100%;
        }

        .answer {
            text-align: center;
            width: calc(50% - 5px);
            background: #EBEBEB;
            height: 125px;
            margin-bottom: 10px;
            cursor: pointer;
            border-radius: 2px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            text-transform: uppercase;
            font-size: 14px;
        }

        .progress {
            display: block;
            padding: 2px;
            border: 1px solid #EBEBEB;
            border-radius: 2px;
            position: relative;
            height: 30px;
            text-align: center;
            font-size: 12px;
            font-weight: 600;
            margin-bottom: 30px;
        }

        .bar {
            display: block;
            height: 100%;
            background-color: #3498db;
            border-radius: 2px;
            transition: width 0.5s;
        }

        .percent {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        #next-button a {
            font-size: 1.9em;
            padding: 0.1em 0;
            line-height: 1.65;
        }

        #next-button a {
            background: #235EAA;
            color: #fff;
            font-family: "regular", "regular",Helvetica,Arial,sans-serif;
        }

        #next-button a {
            display: block;
            font-size: 1.9em;
            text-align: center;
            line-height: 1.65;
            padding: 0.22em 0;
            text-decoration: none;
        }

        .summary {
            display: none; /* Initially hide the summary */
        }

        .image-container {
            position: relative;
            display: inline-block;
            
        }
        .quiz-image{
                width: 105.7%;
        }

        /* New container for the message */
        .summary {
            position: absolute;
            bottom: 10px;
            left: 10px;
            background-color: #fff;
            padding: 10px;
            margin: 0;
            display: none;
            border: 1px solid gray;
            /* Gray border */
            max-width: 600px;
        }

        /* Style for the message */
        .message {
            font-size: 17px;
            color: #000;
            
        }

        /* Style for the paragraph */
        #content
        {
            border-top: 1px solid #EBEBEB;
            font-size: 16px;
            color: #000;
            margin-top: 10px;
            padding-top: 5px;

            /* Spacing between message and paragraph */
        }

        @media (max-width: 800px) {
            .image-container {
                display: block;
            }

            .summary {
                position: relative;
                margin-top: 10px;
                bottom: auto;
                left: auto;
                display: block;
                max-width: auto;

            }
        }

              @media (max-width: 800px) {
              .quiz-image{
                width: 100%;
        }
        }




    body {
               font-family: "regular",Helvetica,Arial,sans-serif;
    }

    /* Rest of your CSS styles... */

    .quiz {
        /* Your existing styles... */
        font-family: "regular",Helvetica,Arial,sans-serif;
    }

    .answer {
        /* Your existing styles... */
        font-family: "regular",Helvetica,Arial,sans-serif;
    }

    #next-button a {
        /* Your existing styles... */
        font-family: "regular",Helvetica,Arial,sans-serif;
    }

    .message {
        /* Your existing styles... */
        font-family: "regular",Helvetica,Arial,sans-serif;
    }

    /* Rest of your CSS styles... */
    .summary {
        display: none;
    }

        .button {
    position: absolute;
    bottom: 15px;
    right: 10px;
    background: #000;
    font-size: 24px;
    font-weight: 400;
    padding: 6px 8px;
    text-decoration: none;
}

      @media (max-width: 850px) {
            .button{
                display: none;
            }
        }