html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

.wrapper {
    min-height: 100%;
}

.content {
    padding-bottom: 180px; /*隨footer高度需做調整*/
}

.navbar {
    background-color: rgba(255, 255, 255, 0.1);
}

.navbar-toggler-icon {
    filter: invert(1);
}

.footer {
    height: 180px; /*設定footer本身高度*/
    margin-top: -180px; /*隨footer高度需做調整*/
    background-color: rgba(0, 0, 0, 0.2);
}

.bg-custom {
    min-height: 100%;
    background-image: linear-gradient(to bottom, #9393FF 0%, #3A006F 100%);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.toast-success {
    backdrop-filter: blur(8px) saturate(180%);
    -webkit-backdrop-filter: blur(8px) saturate(180%);
    background-color: rgba(240, 240, 240, 0.7);
    --bs-toast-header-bg: rgba(240, 240, 240, 0.7);
    border-radius: 8px;
    border: 1px solid rgba(30, 255, 30, 0.8);
    box-shadow: 1px 1px 8px rgba(30, 255, 30, 0.8);
}

.toast-danger {
    backdrop-filter: blur(8px) saturate(180%);
    -webkit-backdrop-filter: blur(8px) saturate(180%);
    background-color: rgba(240, 240, 240, 0.7);
    --bs-toast-header-bg: rgba(240, 240, 240, 0.7);
    border-radius: 8px;
    border: 1px solid rgba(255, 30, 30, 0.8);
    box-shadow: 1px 1px 8px rgba(255, 30, 30, 0.8);
}

.custom-card {
    backdrop-filter: blur(2px) saturate(180%);
    -webkit-backdrop-filter: blur(2px) saturate(180%);
    background-color: rgba(240, 240, 240, 0.3);
    border-radius: 12px;
    border: 1px solid rgb(255 255 255 / 0.3);
    box-shadow: rgb(0 0 0 / 0.3) 2px 2px 10px -2px;
}

.custom-shadow {
    box-shadow: 1px 1px 5px -2px #000000;
}

input {
    height: 58px;
    background-color: rgba(255, 255, 255, 1);
    border: 5px rgba(255, 255, 255, 1) !important;
}

input:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: rgba(255, 255, 255, 1) !important;
}

.square-btn {
    width: 58px;
    height: 58px;

    display: flex;
    justify-content: center;
    align-items: center;

    aspect-ratio: 1 / 1;
    padding: 0;
    background-color: rgba(255, 255, 255, 1);
    border: none;
}

.square-btn:hover {
    background-color: rgba(255, 255, 255, 1) !important;
}