@font-face{
    font-family: 'Acum-Pro-Wide-ExtraLight';
    src: url('../fonts/Acumin-Pro-Wide-ExtraLight.woff2');
}

:root {
    --purple-1: #944CF5;
    --purple-2: #7D45D3;
    --purple-3: #4C277C;
    --purple-4: #11091B;
    --purple-5: #DFC9FD;
    --purple-6: #CDA8FD;
    --purple-7: #AB73FA;
    --pink:     #FF2CCD;
    --green:    #5EDD82;
    --teal:     #5FD4E0;
    --yellow:   #F7F11E;
    --orange:   #FF822E;
    --red:      #FF2E2E;
    --white:    #ffffff;
    --dark:     #11091B;
}

::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--white);
}
/* Botoes */
::-webkit-scrollbar-button:hover {
    background: #bbb;
}
::-webkit-scrollbar-thumb {
    background: var(--purple-1);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--purple-7);
}
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--purple-1) var(--white);
}

*:not(i){
    font-family:'Acum-Pro-Wide-ExtraLight',sans-serif;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

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

body{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    background:#12081f;
    overflow:hidden;
}

.button-hamburguer{
    display: flex;
    align-items: center;
    justify-content: center;
}

.button-hamburguer i{
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.background{
    position:fixed;
    inset:0;
    background:
    radial-gradient(circle at top left, var(--purple-2), transparent 35%),
    radial-gradient(circle at bottom right, var(--purple-1), transparent 40%),
    var(--purple-4);
    
}

.background::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:#a855f7;
    filter:blur(180px);
    opacity:.18;
    top:-100px;
    left:-120px;
}

.background::after{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    border-radius:50%;
    background:#7c3aed;
    filter:blur(180px);
    opacity:.18;
    right:-100px;
    bottom:-100px;
}

.login-container{
    width:400px;
    max-width:90%;
    background: rgba(17, 9, 27, .75);
    backdrop-filter:blur(20px);
    border: 1px solid rgba(223,201,253,.15);
    border-radius:22px;
    padding:45px;
    box-shadow:
    0 25px 50px rgba(0,0,0,.45);
}

.login-header{
    text-align:center;
    margin-bottom:35px;
}

.login-header img{
    width:90px;
    margin-bottom:20px;
}

.login-header h1{
    color: var(--white);
    font-size:30px;
    font-weight:600;
    margin-bottom:8px;
}

.login-header p{
    color: var(--purple-5);
    font-size:15px;
}

.input-group{
    margin-bottom:22px;
}

.input-group label{
    display:block;
    color:white;
    margin-bottom:8px;
    font-size:14px;
}

.input-group input{
    width:100%;
    padding:15px;
    border-radius:12px;
    border: 1px solid rgba(223,201,253,.18);
    background: rgba(255,255,255,.04);
    color: var(--white);
    outline:none;
    transition:.3s;
}

.input-group input::placeholder{
    color: var(--white);
}

.input-group input:focus{
    border-color: var(--purple-1);
    box-shadow: 0 0 0 4px rgba(148,76,245,.18);
}

button{
    width:100%;
    padding:15px;
    border:none;
    border-radius:12px;
    background: linear-gradient(135deg, var(--purple-1), var(--purple-2));
    color:white;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

button:hover{
    transform:translateY(-2px);
    background: linear-gradient(135deg, var(--purple-2), var(--purple-3));
    box-shadow: 0 10px 25px rgba(148,76,245,.35);
}

button:active{
    transform:scale(.98);
}

@media(max-width:500px){
    .login-container{
        padding:35px 25px;
    }

    .login-header h1{
        font-size:25px;
    }
}

.erro-login{
    color: var(--red);
}

.entrou-login{
    color: var(--green);
}