@font-face {
        font-family: 'dbx';
        src: url('/assets/fonts/DBBd.ttf') format('woff2'),
            url('/assets/fonts/DBre.ttf') format('woff');
        font-weight: normal;
        font-style: normal;
    }

    * {
        width: 100%;
        height: 100%;
        margin: 0;
    }

    body {
        display: flex;
        width: 100%;
        height: 100%;
        overflow: hidden;




    }

    .maincontainer {
        display: flex;
        width: 100%;
        height: auto;
        background-image: url(/assets/img/BG.png);
        background-size: cover;
        background-position: center;
        justify-content: center;
        align-items: center;
      


    }

    .box_con {
        display: flex;
        flex-direction: column;
        width: 80%;
        height: auto;
        background-color: rgba(189, 220, 235, 0.7);
        border-radius: 10px;

        justify-content: center;
        align-items: center;
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);


    }

    .headtopic {
        display: flex;
        flex-direction: column;
        width: 100%;

        justify-content: center;
        align-items: center;
        margin-top: 8%;

    }

    p {
        font-family: dbx;
        text-align: center;
        color: rgb(11, 11, 66);
    }

    .line {
        display: flex;
        width: 80%;
        margin-top: 8%;
        opacity: 50%;
    }

    .fillbox {
        display: flex;
        width: 80%;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 3%;
        margin-top: 8%;
        opacity: 100%;
    }

    .box {
        display: flex;
        width: 100%;
        height: 30px;
        background-color: rgb(255, 255, 255);

        opacity: 100%;
        border-radius: 30px;
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
        text-align: center;
      
        text-align-last: center;




    }

    .fonttopic {
        width: 35%;
    }

    button {
        display: flex;
        width: 50%;
        height: 30px;

        background-color: rgb(9, 9, 80);
        border-radius: 20px;
        border: none;
        margin-top: 10%;
        margin-bottom: 10%;
        justify-content: center;
        align-items: center;
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);


    }

    option {
        text-align: center;
        justify-content: center;
        display: flex;
        width: 100%;
        align-items: center;
    }

@media (min-width: 768px) and (max-width: 1024px) {
     .maincontainer {
        display: flex;
        width: 100%;
        height: auto;
        background-image: url(/assets/img/BGipad.png);
        background-size: cover;
        background-position: center;
        justify-content: center;
        align-items: center;
      


    }

   
    .box_con {
        display: flex;
        flex-direction: column;
        width: 50%;
        height: auto;
        background-color: rgba(189, 220, 235, 0.7);
        border-radius: 10px;

        justify-content: center;
        align-items: center;
        margin-bottom: 20%;
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);


    }



}