body {
    background-image: url('../image/background_default.webp');
    background-position: center;
    background-size: cover;
}
.bg-lightskyblue {
    background-color:#87CEFA;
}
.bg-lightcoral {
    background-color:#F08080;
}
.text-deepteal {
    color: #006664;
}
.text-citrusgreen {
    color: #B2BB1E;
}
.container-fluid::before {
    content: "";
    background: rgba(95, 133, 117, 0.2);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.login-box {
    width: 100%;
    padding: 20px;
    transform: skewX(-9deg);
    transform-origin: top right;
    background-color: rgba(189, 238, 241, 0.8);
}
.btn-kal {
    transform: skewX(-9deg);
    background-color: rgba(178, 187, 30);
}
.btn-kal:hover {
    transform: skewX(-9deg);
    background-color: rgba(227, 236, 42);
}
.container {
    transform: skewX(9deg);
}
@media (max-width: 576px) {
    .login-box {
        width: 90%;
    }
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .login-box {
        width: 90%;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .login-box {
        width: 80%;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .login-box {
        width: 80%;
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .login-box {
        width: 60%;
    }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    .login-box {
        width: 55%;
    }
}