/*
==========================================
        GIST REGISTER PAGE
==========================================
*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    background:#050505;
    color:#ffffff;

    font-family:Arial, Helvetica, sans-serif;

    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:20px;

}

.register{

    width:100%;
    max-width:420px;

}

.glass{

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    border-radius:25px;

    padding:40px 25px;

    backdrop-filter:blur(18px);

}

h1{

    text-align:center;

    margin-bottom:10px;

    font-size:32px;

}

.tagline{

    text-align:center;

    color:#bdbdbd;

    margin-bottom:35px;

}

form{

    display:flex;

    flex-direction:column;

    gap:15px;

}

input,
select{

    width:100%;

    padding:15px;

    border:none;

    outline:none;

    border-radius:15px;

    background:rgba(255,255,255,.08);

    color:#ffffff;

    font-size:16px;

}

.username{

    display:flex;

    align-items:center;

    background:rgba(255,255,255,.08);

    border-radius:15px;

    padding:0 15px;

}

.username span{

    color:#ffffff;

    font-weight:bold;

    margin-right:8px;

}

.username input{

    background:transparent;

    padding:15px 0;

}

.animalLabel{

    margin-top:10px;

    color:#d9d9d9;

    font-size:15px;

}

button{

    padding:16px;

    border:none;

    border-radius:15px;

    background:#ffffff;

    color:#000000;

    font-size:17px;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;

}

button:hover{

    transform:scale(1.02);

}

.login{

    text-align:center;

    margin-top:30px;

    color:#bdbdbd;

}

.login a{

    color:#ffffff;

    text-decoration:none;

    font-weight:bold;

}

.login a:hover{

    text-decoration:underline;

}