/* =====================================================
   Auth Buttons V6
   只需要修改下面这些参数即可
===================================================== */

:root{

    /* ===== 按钮大小 ===== */

    --tg-btn-height:40px;          /* 按钮高度 */

    --tg-btn-min-width:100px;      /* 按钮最小宽度 */

    --tg-btn-padding:15px;         /* 左右内距 */

    --tg-btn-radius:1px;         /* 圆角 */

    --tg-btn-font-size:17px;       /* 字体 */

    --tg-btn-font-weight:800;

    /* ===== 按钮布局 ===== */

    --tg-gap:22px;                 /* 两按钮距离 */

    --tg-margin:15px;              /* 上下外距 */

    --tg-padding-y:6px;            /* 容器上下内距 */

    --tg-padding-x:20px;           /* 容器左右内距 */

    /* ===== 浮动按钮 ===== */

    --tg-float-bottom:22px;

    /* ===== Hover ===== */

    --tg-hover-scale:1.04;

    --tg-hover-up:-2px;

    /* ===== 漂浮动画 ===== */

    --tg-float-distance:-3px;

    /* ===== Login 渐变 ===== */

    --tg-login-1:#f60b1a;

    --tg-login-2:#0072ff;

    /* ===== Register 渐变 ===== */

    --tg-register-1:#ff4e50;

    --tg-register-2:#f9d423;

    /* ===== 阴影 ===== */

    --tg-login-shadow:0 8px 22px rgba(30,138,88,.28);

    --tg-register-shadow:0 8px 22px rgba(249,212,35,.28);

}

/* =====================================================
   容器
===================================================== */

#tg-auth-buttons{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:var(--tg-gap);

    box-sizing:border-box;

    width:auto;

    max-width:100%;

    margin:var(--tg-margin) auto;

    padding:var(--tg-padding-y) var(--tg-padding-x);

    z-index:999999;
}

#tg-auth-buttons.tg-auth-left{
    justify-content:flex-start;
    margin-left:0;
    margin-right:auto;
}

#tg-auth-buttons.tg-auth-center{
    justify-content:center;
    margin-left:auto;
    margin-right:auto;
}

#tg-auth-buttons.tg-auth-right{
    justify-content:flex-end;
    margin-left:auto;
    margin-right:0;
}

/* =====================================================
   按钮
===================================================== */

#tg-auth-buttons .tg-auth-btn{

    min-width:var(--tg-btn-min-width);

    height:var(--tg-btn-height);

    padding:0 var(--tg-btn-padding);

    display:inline-flex;

    align-items:center;

    justify-content:center;

    box-sizing:border-box;

    border:0;

    border-radius:var(--tg-btn-radius);

    color:#fff;

    text-decoration:none;

    text-align:center;

    line-height:1;

    white-space:nowrap;

    font-size:var(--tg-btn-font-size);

    font-weight:var(--tg-btn-font-weight);

    font-family:inherit;

    letter-spacing:.2px;

    cursor:pointer;

    background-size:300% 300%;

    animation:
        tgAuthGradient 5s ease infinite,
        tgAuthFloat 1.8s ease-in-out infinite;

    transition:
        transform .25s ease,
        opacity .25s ease,
        box-shadow .25s ease;
}

/* Login */

#tg-auth-buttons .tg-login{

    background-image:
        linear-gradient(
            270deg,
            var(--tg-login-1),
            var(--tg-login-2),
            var(--tg-login-1)
        );

    box-shadow:var(--tg-login-shadow);

}

/* Register */

#tg-auth-buttons .tg-register{

    background-image:
        linear-gradient(
            270deg,
            var(--tg-register-1),
            var(--tg-register-2),
            var(--tg-register-1)
        );

    box-shadow:var(--tg-register-shadow);

}

/* Hover */

#tg-auth-buttons .tg-auth-btn:hover,
#tg-auth-buttons .tg-auth-btn:focus{

    color:#fff;

    text-decoration:none;

    opacity:.95;

    transform:
        translateY(var(--tg-hover-up))
        scale(var(--tg-hover-scale));

}

/* =====================================================
   浮动按钮
===================================================== */

#tg-auth-buttons.tg-auth-floating{

    position:fixed;

    left:50%;

    bottom:var(--tg-float-bottom);

    margin:0;

    padding:0;

    transform:
        translateX(-50%)
        translateY(120px);

    opacity:0;

    pointer-events:none;

    background:transparent;

    box-shadow:none;

    border:0;

    transition:
        transform .35s ease,
        opacity .35s ease;

}

#tg-auth-buttons.tg-auth-floating.tg-auth-show{

    transform:
        translateX(-50%)
        translateY(0);

    opacity:1;

    pointer-events:auto;

}

/* =====================================================
   手机
===================================================== */

@media(max-width:544px){

    #tg-auth-buttons{

        gap:12px;

        margin:14px auto;

        padding:4px 12px;

    }

    #tg-auth-buttons .tg-auth-btn{

        min-width:112px;

        height:42px;

        padding:0 18px;

        font-size:14px;

    }

    #tg-auth-buttons.tg-auth-floating{

        bottom:14px;

        max-width:calc(100% - 24px);

    }

}

/* =====================================================
   动画
===================================================== */

@keyframes tgAuthGradient{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }

}

@keyframes tgAuthFloat{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(var(--tg-float-distance));
    }

}