* {
    transition: all ease-in-out 0.1s ;

}
body, html {
    font-family: "Anuphan", sans-serif;
    margin: 0;
    padding: 0;
    height: 200vh; /* To allow scrolling */
    scroll-behavior: smooth;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 100vh;
}

.svg-container {
    display: flex;
    flex-direction: column; /* Change to column to stack items */
    justify-content: center;
    align-items: center;
    background-image: url('./cover-supermin.gif'); /* Replace with your GIF URL */
    background-size: cover;
    background-position: center;
    height: 100vh;
    position: sticky;
    top: 0;
}

.svg-container img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    transition: all ease-in-out 0.1s;
}

.svg-container p {
    color: #ffffff;
}
button {
    font-family: "Anuphan", sans-serif!important;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .big-div h1 {
        font-size: 2rem;
    }

    .big-div p {
        font-size: 1.2rem;
    }

    .svg-container img {
        width: 150px;
        height: 150px;
    }
}

@media (max-width: 480px) {
    .big-div h1 {
        font-size: 1.5rem;
    }

    .big-div p {
        font-size: 1rem;
    }

    .svg-container img {
        width: 120px;
        height: 120px;
    }
    .imgmem {
       width: 150px!important;
    }
}

.big-div {
    padding-top: 20px;
    display: flex;
    flex-direction: column; /* Keep items stacked vertically */
    justify-content: flex-start; /* Align items to the start instead of centering */
    align-items: center; /* Center items horizontally */
    height: auto; /* Allow height to expand based on content */
    background-color: #f3f3f3;
    color: rgb(0, 0, 0);
    text-align: center;
    padding: 20px;
    z-index: 1000;
    min-height: 100vh; /* Ensure it takes up at least the full viewport height */
    box-sizing: border-box; /* Include padding in height calculation */
}


.big-div h1 {
    font-size: 3rem;
    margin: 0;
    line-height: 1.2;
}

.big-div p {
    margin: 10px 0 0;
}

.creditdw {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    margin-top: 0px;
    margin-bottom: 0px;
}

.creditdw img {
    margin-left: 5px;
    margin-top: 0px;
    margin-bottom: 0px;
    height: 40px;
}

.input-style {
    margin-top: 10px;
    padding: 10px;
    border: 0px solid #ccc;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 5px;
    font-size: 16px;
    color: #555;
    outline: none;
    max-width: 270px; /* Keep the button width */
    width: 90%;
    transition: all ease-in-out 0.3s ;
}

.input-style:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.button {
    color: rgb(0, 0, 0);
    cursor: pointer;
    margin-top: 10px;
    font-size: 17px;
    font-weight: bold;
    background-image: linear-gradient(to right, #84ff92, #7effff);
    max-width: 290px; /* Keep the button width */
    width: 100%;
    height: 40px;
    border: none;
    outline: none;
    border-radius: 10px;
    transition: 0.3s ease;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.button:hover {
    scale: 1.03;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

#iframeContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 1000000;
    background-color: #ffffff9d;
    align-items: center;
    text-align: center;      
    opacity: 100%;
    overflow: hidden;
    overflow-y: hidden;
    overflow-x: hidden;
    cursor: not-allowed!important;
}
#iframeContainer iframe {
    border: 0px solid #ccc;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}
.dttest {
    background-color: #ffffff;
    width: 100%;
    padding-top: 20px;
    margin-top: 40px;
    padding-bottom: 30px;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}
.dtt {
    width: 100%;
}
.imgmem {
    width: 23%;
    max-width: 300px;
    border-radius: 10px;
    min-width: 100px;
    max-height: 300px;
    min-height: 100px;
    cursor: cell;
}
.boxmem {
    display: flex;                /* Use flexbox layout */
    flex-wrap: wrap;             /* Allow images to wrap to the next line */
    justify-content: center;      /* Center the images */
    gap: 10px;                   /* Space between images */
}
.button-disabled {
    cursor: not-allowed!important;
    pointer-events: none!important;
    opacity: 0.5;
    background-image: linear-gradient(to left, #84ffc8, #7effff);
}
.internet {
    font-family: Arial, sans-serif;
    text-align: center;
    align-items: center;
    background-color: #f4f4f9;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    z-index: 1000000;
    display: none;
}
#status {
    font-size: 1.5em;
    color: #333;
    margin: 0px auto;
    margin-top: 30px;
    font-weight: bolder;
}

.ft {
    background-color: #ffffff;
    width: 100%;
    margin-top: 20px;
    padding: 5px;
    border-radius: 20px 20px 8px 8px;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}

        /* Style for Thai button */
.btn-thai {
    background-color: dodgerblue;
    color: white;
    width: 120px;  /* Ensure same width */
    height: 40px;  /* Same height for both */
    text-align: center;
}

/* Style for English button */
.btn-english {
    background-color: tomato;
    color: white;
    width: 120px;  /* Same width as Thai button */
    height: 40px;  /* Same height for both */
    text-align: center;
}

/* Adjust button styles on hover */
.btn-thai:hover, .btn-english:hover {
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}


.scoreboard {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    z-index: 999999999;
    background-color: #ffffffc7;
    padding: 20px;
    text-align: center;
    display: none;
}

.scoreboard h1{
    color: #000000;
    text-align: center;
}
.scoreboard button {
    background-color: rgba(255, 0, 0, 0.632);
    font-size: 16px;
    padding: 10px 20px;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 0 0 10px 10px;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
}
#scoreboardBtn {
    width: 100%;
    border-radius: 0 0 10px 10px;
}