/* =========================================
   HOTSPOT LOGIN
========================================= */

body{

    margin:0;
    padding:0;
    min-height:100vh;

    ...

    overflow-x:hidden;
    overflow-y:auto;

}

/* =========================================
   FLOATING LIGHTS
========================================= */

.glow-dot{

    position:absolute;

    width:6px;

    height:6px;

    background:#00c3ff;

    border-radius:50%;

    box-shadow:
        0 0 12px #00c3ff;

    opacity:.7;

    animation:
        float 6s infinite ease-in-out;

}

@keyframes float{

    0%{

        transform:
            translateY(0);

    }

    50%{

        transform:
            translateY(-20px);

    }

    100%{

        transform:
            translateY(0);

    }

}

/* =========================================
   HEADER
========================================= */

.hotspot-header{

    text-align:center;

    padding-top:60px;

    padding-bottom:20px;

}

.hotspot-header h1{

    margin:0;

    font-size:38px;

    color:#00c3ff;

    text-shadow:
        0 0 15px #00c3ff;

}

.hotspot-header p{

    margin-top:12px;

    opacity:.85;

    font-size:16px;

}

/* =========================================
   LOGIN AREA
========================================= */

.login-wrapper{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

}

.login-box{

    width:420px;

    max-width:100%;

    background:
        rgba(
            255,
            255,
            255,
            .08
        );

    padding:35px;

    border-radius:18px;

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 0 25px rgba(
            0,
            195,
            255,
            .30
        );

    text-align:center;

}

.login-box h2{

    margin-top:0;

    margin-bottom:10px;

    font-size:26px;

    color:#00c3ff;

}

.login-description{

    line-height:1.7;

    opacity:.85;

    margin-bottom:20px;

}

/* =========================================
   FORM
========================================= */

.login-input{

    width:100%;

    box-sizing:border-box;

    padding:12px;

    border:none;

    border-radius:10px;

    background:
        rgba(
            255,
            255,
            255,
            .15
        );

    color:white;

    font-size:15px;

    outline:none;

}

.login-input::placeholder{

    color:
        rgba(
            255,
            255,
            255,
            .7
        );

}

/* =========================================
   BUTTON
========================================= */

.login-btn{

    width:100%;

    margin-top:20px;

    padding:12px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    font-size:15px;

    font-weight:bold;

    color:black;

    background:
        linear-gradient(
            90deg,
            #00c3ff,
            #6a5cff
        );

    box-shadow:
        0 0 12px rgba(
            0,
            195,
            255,
            .5
        );

    transition:
        .2s ease;

}

.login-btn:hover{

    transform:
        scale(1.02);

}

/* =========================================
   ERROR
========================================= */

.error{

    margin-top:15px;

    color:#ff6b6b;

    font-weight:bold;

    display:none;

}

/* =========================================
   FOOTER TEXT
========================================= */

.version{

    margin-top:20px;

    opacity:.5;

    font-size:12px;

}

/* =========================================
   MOBILE
========================================= */

@media (max-width:768px){

    .hotspot-header{

        padding-top:40px;

    }

    .hotspot-header h1{

        font-size:28px;

    }

    .hotspot-header p{

        font-size:14px;

    }

    .login-box{

        width:100%;

        padding:25px;

    }

}