body {
    font-family: Inter, sans-serif;
}

.smooth-transition {
    transition: all 0.28s ease;
}

.login-page {
    background-image:
        radial-gradient(circle at 18% 18%, rgba(13, 62, 146, 0.14), transparent 45%),
        radial-gradient(circle at 82% 85%, rgba(10, 30, 52, 0.12), transparent 42%),
        url("../../Resource/Images/UQAMLogo.png");
    background-size: auto, auto, min(92vw, 1100px);
    background-position: left top, right bottom, center center;
    background-repeat: no-repeat;
}

.avatar-ring {
    width: 100px;
    height: 100px;
    border-radius: 9999px;
    background: linear-gradient(145deg, rgba(13, 62, 146, 0.28), rgba(10, 30, 52, 0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.45);
}

.avatar-core {
    width: 78px;
    height: 78px;
    border-radius: 9999px;
    background: linear-gradient(145deg, #f8fbff, #dfe8f8);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 22px -12px rgba(10, 30, 52, 0.4);
}

@media (max-width: 768px) {
    .login-page {
        background-size: auto, auto, 96vw;
        background-position: left top, right bottom, center 68%;
    }
}