style.css

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* Muhammad fadli Hidayatullah - 20104088 */

.content-4-1 .btn:focus,
.content-4-1 .btn:active {
    outline: none !important;
}

.content-4-1 .width-left {
    width: 0%;
}

.content-4-1 .width-right {
    width: 100%;
    height: 100vh;
    padding: 8rem 2rem;
    background-color: #fcfdff;
}

.content-4-1 .centered {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.content-4-1 .right {
    width: 100%;
}

.content-4-1 .title-text {
    font: 600 2.5rem/2.25rem Poppins, sans-serif;
    margin-bottom: 0.75rem;
}

.content-4-1 .caption-text {
    font: 400 0.875rem/1.75rem Poppins, sans-serif;
    color: #a8adb7;
}

.content-4-1 .input-label {
    font: 500 1.125rem/1.75rem Poppins, sans-serif;
    color: #39465b;
}

.content-4-1 .div-input {
    font: 300 1rem/1.5rem Poppins, sans-serif;
    padding: 1rem 1.25rem;
    margin-top: 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid #cacbce;
    color: #2a3240;
    transition: 0.3s;
}

.content-4-1 .div-input:focus-within {
    border: 1px solid #FDF006;
    color: #2a3240;
    transition: 0.3s;
}

.content-4-1 .div-input input::placeholder {
    color: #cacbce;
    transition: 0.3s;
}

.content-4-1 .div-input:focus-within input::placeholder {
    color: #2a3240;
    outline: none;
    transition: 0.3s;
}

.content-4-1 .div-input .icon-toggle-empty-4-1 path,
.content-4-1 .div-input:focus-within .icon path {
    transition: 0.3s;
    fill: #FDF006;
}

.content-4-1 .input-field {
    font: 300 1rem/1.5rem Poppins, sans-serif;
    width: 100%;
    background-color: #fcfdff;
    transition: 0.3s;
}

.content-4-1 .input-field:focus {
    outline: none;
    transition: 0.3s;
}

.content-4-1 .forgot-password {
    font: 400 0.875rem/1.25rem Poppins, sans-serif;
    color: #cacbce;
    transition: 0.3s;
    text-decoration: none;
}

.content-4-1 .forgot-password:hover {
    color: #2a3240;
}

.content-4-1 .btn-fill {
    font: 500 1.25rem/1.75rem Poppins, sans-serif;
    background: #FDF006;
    padding: 0.75rem 1rem;
    margin-top: 2.25rem;
    border-radius: 0.75rem;
    transition: 0.5s;
}

.content-4-1 .bottom-caption {
    font: 400 0.875rem/1.25rem Poppins, sans-serif;
    margin-top: 2rem;
    color: #2a3240;
}

.content-4-1 .green-bottom-caption {
    color: black;
    font-weight: 500;
}

.content-4-1 .green-bottom-caption:hover {
    color: #FDF006;
    cursor: pointer;
    text-decoration: underline;
}

@media (min-width: 576px) {
    .content-4-1 .width-right {
        padding: 8rem 4rem;
    }

    .content-4-1 .right {
        width: 58.333333%;
    }
}

@media (min-width: 768px) {
    .content-4-1 .right {
        width: 66.666667%;
    }
}

@media (min-width: 992px) {
    .content-4-1 .width-left {
        width: 48%;
    }

    .content-4-1 .width-right {
        width: 52%;
    }

    .content-4-1 .right {
        width: 75%;
    }
}

@media (min-width: 1200px) {
    .content-4-1 .right {
        width: 58.333333%;
    }
}