body {
    background-color: #f5f5f5;
}

.input-validation-error {
    border: 1px solid red;
}

.btn-primary {
    background: rgb(202,173,95);
    border-color: rgb(202,173,95);
}

    .btn-primary:hover {
        background: #fff;
        border-color: rgb(202,173,95);
        color: rgb(202,173,95);
    }
#Home {
    background-color: #007bff;
}

#LogInbtn, #Registerbtn, #resend, #resend, #change {
    background-color: #00B3C4;
}
.login-card-description1 {
    color: #00B3C4;
    font-size: 36px;
    font-weight: bold;
}


.brand-wrapper .logo {
    height: 130px;
}

.container {
    background-color: #fff;
}
/* 預設圖像大小並水平和垂直居中 */
.login-card-img {
    max-width: 100%; /* 圖像最大寬度為其容器的寬度 */
    height: auto; /* 自動計算高度，以保持圖像比例不變 */
    display: block; /* 設置圖像為區塊元素，以便居中 */
    margin: 0 auto; /* 自動左右居中 */
    position: relative; /* 設置相對定位 */
    top: 50%; /* 將圖像的頂部置於容器的中央位置 */
    transform: translateY(-50%); /* 使用負的50%垂直偏移來實現垂直居中 */
}
/* 響應式設計 - 在螢幕寬度小於768px時調整圖像大小 */
@media screen and (max-width: 768px) {
    .login-card-img {
        max-width: 80%; /* 降低圖像寬度以適應較小的螢幕 */
    }
}

/* 響應式設計 - 在螢幕寬度小於480px時進一步調整圖像大小 */
@media screen and (max-width: 480px) {
    .login-card-img {
        max-width: 60%; /* 進一步降低圖像寬度以適應更小的螢幕 */
    }
}