body {
    margin:0;
    padding: 0;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url("../img/m_bg.webp");
    background-image: image-set(
            url("../img/m_bg.webp") type("image/webp"),
            url("../img/m_bg.png") type("image/png")
    );
    font-family: "Open Sans", sans-serif;
    color: #FFFFFF;
    font: 12px Arial, Helvetica, sans-serif;
}

main {
    width: 100%;
    min-height: 100vh;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

input[type="text"] {
    border-radius: 15px;
    text-align: center;
}

input::placeholder, .form-control::placeholder {
    color: rgba(0, 0, 0, 0.3);
    opacity: 1;
    text-align: center;
}

.text-yellow {
    color: #fff503;
}

.btn {
    border: none;
}

.btn-primary {
        background : -moz-linear-gradient(21.58% 154.43% 45deg,rgba(203, 18, 255, 1) 0%,rgba(255, 108, 214, 1) 97.83%);
        background : -webkit-linear-gradient(45deg, rgba(203, 18, 255, 1) 0%, rgba(255, 108, 214, 1) 97.83%);
        background : -webkit-gradient(linear,21.58% 154.43% ,78.42% -54.43% ,color-stop(0,rgba(203, 18, 255, 1) ),color-stop(0.9783,rgba(255, 108, 214, 1) ));
        background : -o-linear-gradient(45deg, rgba(203, 18, 255, 1) 0%, rgba(255, 108, 214, 1) 97.83%);
        background : -ms-linear-gradient(45deg, rgba(203, 18, 255, 1) 0%, rgba(255, 108, 214, 1) 97.83%);
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#CB12FF', endColorstr='#FF6CD6' ,GradientType=0)";
        background : linear-gradient(45deg, rgba(203, 18, 255, 1) 0%, rgba(255, 108, 214, 1) 97.83%);
        border-radius : 50px;
        -moz-border-radius : 50px;
        -webkit-border-radius : 50px;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CB12FF',endColorstr='#FF6CD6' , GradientType=1);
        box-shadow: 1px 1px 2px #333333;
        text-shadow: 1px 1px 1px black;
}

.btn-secondary
{
    background : -moz-linear-gradient(21.58% 154.43% 45deg,rgba(102, 45, 145, 1) 0%,rgba(156, 45, 145, 1) 97.83%);
    background : -webkit-linear-gradient(45deg, rgba(102, 45, 145, 1) 0%, rgba(156, 45, 145, 1) 97.83%);
    background : -webkit-gradient(linear,21.58% 154.43% ,78.42% -54.43% ,color-stop(0,rgba(102, 45, 145, 1) ),color-stop(0.9783,rgba(156, 45, 145, 1) ));
    background : -o-linear-gradient(45deg, rgba(102, 45, 145, 1) 0%, rgba(156, 45, 145, 1) 97.83%);
    background : -ms-linear-gradient(45deg, rgba(102, 45, 145, 1) 0%, rgba(156, 45, 145, 1) 97.83%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#662D91', endColorstr='#9C2D91' ,GradientType=0)";
    background : linear-gradient(45deg, rgba(102, 45, 145, 1) 0%, rgba(156, 45, 145, 1) 97.83%);
    border-radius : 50px;
    -moz-border-radius : 50px;
    -webkit-border-radius : 50px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#662D91',endColorstr='#9C2D91' , GradientType=1);
    box-shadow: 1px 1px 2px #333333;
    text-shadow: 1px 1px 1px black;
}

.badge-box
{
    background : -moz-linear-gradient(0.3% 92.93% 45deg,rgba(62, 27, 88, 1) 0%,rgba(69, 27, 88, 1) 10.34%,rgba(88, 28, 90, 1) 25.36%,rgba(120, 29, 92, 1) 43.16%,rgba(128, 29, 92, 1) 47.15%,rgba(197, 104, 102, 1) 96.21%);
    background : -webkit-linear-gradient(45deg, rgba(62, 27, 88, 1) 0%, rgba(69, 27, 88, 1) 10.34%, rgba(88, 28, 90, 1) 25.36%, rgba(120, 29, 92, 1) 43.16%, rgba(128, 29, 92, 1) 47.15%, rgba(197, 104, 102, 1) 96.21%);
    background : -webkit-gradient(linear,0.3% 92.93% ,99.7% 7.07% ,color-stop(0,rgba(62, 27, 88, 1) ),color-stop(0.1034,rgba(69, 27, 88, 1) ),color-stop(0.2536,rgba(88, 28, 90, 1) ),color-stop(0.4316,rgba(120, 29, 92, 1) ),color-stop(0.4715,rgba(128, 29, 92, 1) ),color-stop(0.9621,rgba(197, 104, 102, 1) ));
    background : -o-linear-gradient(45deg, rgba(62, 27, 88, 1) 0%, rgba(69, 27, 88, 1) 10.34%, rgba(88, 28, 90, 1) 25.36%, rgba(120, 29, 92, 1) 43.16%, rgba(128, 29, 92, 1) 47.15%, rgba(197, 104, 102, 1) 96.21%);
    background : -ms-linear-gradient(45deg, rgba(62, 27, 88, 1) 0%, rgba(69, 27, 88, 1) 10.34%, rgba(88, 28, 90, 1) 25.36%, rgba(120, 29, 92, 1) 43.16%, rgba(128, 29, 92, 1) 47.15%, rgba(197, 104, 102, 1) 96.21%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#3E1B58', endColorstr='#C56866' ,GradientType=0)";
    background : linear-gradient(45deg, rgba(62, 27, 88, 1) 0%, rgba(69, 27, 88, 1) 10.34%, rgba(88, 28, 90, 1) 25.36%, rgba(120, 29, 92, 1) 43.16%, rgba(128, 29, 92, 1) 47.15%, rgba(197, 104, 102, 1) 96.21%);
    opacity : 0.7;
    filter: alpha(opacity=70) progid:DXImageTransform.Microsoft.Alpha(opacity=70) progid:DXImageTransform.Microsoft.gradient(startColorstr='#3E1B58',endColorstr='#C56866' , GradientType=1);
}

.badge-box > * {
    z-index : 10;
}

.figure-caption {
    font-size: 12px;
    color:#FFFFFF;
    text-align: left;
    text-shadow:1px 1px #000000;
}

.galleries {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 10px auto 20px;
}

.galleries img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Ensure image covers the space */
    object-position: top;
    aspect-ratio: 6 / 9; /* Force square aspect ratio */
}

@media screen and (min-width: 768px) {
    body {
        background-image: url("../img/bg.webp");
        background-image: image-set(
                url("../img/bg.webp") type("image/webp"),
                url("../img/bg.png") type("image/png")
        );
    }

    main {
        margin:0 auto;
        max-width: 800px;
    }
}