@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@100&family=Prompt:wght@300&family=Sarabun:wght@300&display=swap');
body {
    font-family: 'Sarabun', sans-serif;
}

.flex-login-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0 auto;
    max-width: 100%;
}

.login-background-blue {
    background-image: linear-gradient(to bottom, #0578d5, #647ddc, #9382e0, #b987e1, #da8edf, #d69dec, #d2abf6, #cfb8ff, #a3cdff, #6de0ff, #46f0ff, #5ffbf1);
}

.login-btn-blue {
    background-color: #56baed;
}

.login-card-custom {
    border-radius: 12px;
    width: 30%;
}


@media (min-width: 0px) and (max-width: 576px) { 
    .login-card-custom {
        width: 100%;
    }
    .flex-login-form {
        width: 80%;
    }
    
}
@media (min-width: 576px) and (max-width: 768px) { 
    .login-card-custom {
        width: 100%;
    }
    .flex-login-form {
        width: 80%;
    }
    
}
@media (min-width: 768px) and (max-width: 992px) { 
    .login-card-custom {
        width: 80%;
    }
    .flex-login-form {
        width: 80%;
    }
    
}
@media (min-width: 992px) and (max-width: 1200px) { 
    .login-card-custom {
        width: 60%;
    }
    .flex-login-form {
        width: 80%;
    }
    
}

.alert-custom {
    width: 30%;
    text-align: center;
}
@media (min-width: 0px) and (max-width: 576px) { 
    .alert-custom {
        width: 100%;
    }
    
}
@media (min-width: 576px) and (max-width: 768px) { 
    .alert-custom {
        width: 100%;
    }
    
}
@media (min-width: 768px) and (max-width: 992px) { 
    .alert-custom {
        width: 80%;
    }
    
}
@media (min-width: 992px) and (max-width: 1200px) { 
    .alert-custom {
        width: 60%;
    }
    
}