@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Prompt',sans-serif;
}

body{

    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    overflow:hidden;

    background:
    linear-gradient(
    135deg,
    #fff8fb,
    #f8fcff,
    #fff2f7
    );
}

/* ===================== */
/* Background Animation */
/* ===================== */

.floating-bg{
    position:fixed;
    inset:0;
    z-index:-1;
}

.blob{

    position:absolute;

    filter:blur(40px);

    opacity:.5;

    animation:
    float 10s infinite ease-in-out;
}

.blob1{

    width:250px;
    height:250px;

    background:#ffd4ea;

    left:10%;
    top:15%;

    border-radius:63% 37% 50% 50%;
}

.blob2{

    width:300px;
    height:300px;

    background:#cceeff;

    right:10%;
    top:10%;

    border-radius:50% 60% 40% 60%;
}

.blob3{

    width:200px;
    height:200px;

    background:#d8c5ff;

    bottom:10%;
    left:50%;
}

@keyframes float{

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

    50%{
        transform:translateY(-30px);
    }

}

/* ===================== */
/* register Card */
/* ===================== */

.register-card{

    width:890px;

    padding:40px;

    border-radius:35px;

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

    backdrop-filter:blur(20px);

    box-shadow:
    0 20px 50px rgba(0,0,0,.08);

    text-align:center;
}

.logo-circle{

    width:90px;
    height:90px;

    margin:auto;

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        #79d7f7,
        #f7a8c7
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:white;
    font-size:40px;

    margin-bottom:20px;
}

.register-card h2{

    color:#2496c8;
    font-weight:700;
}

.register-card p{

    color:#777;
    margin-bottom:30px;
}

/* ===================== */
/* Inputs */
/* ===================== */

.form-group{
    margin-bottom:18px;
    text-align:left;
}

.form-group label{
    margin-bottom:8px;
    display:block;
}

.input-box{

    display:flex;
    align-items:center;

    background:white;

    border-radius:15px;

    padding:12px 15px;

    border:2px solid transparent;

    transition:.3s;
}

.input-box:focus-within{

    border-color:#8ed7ff;

    box-shadow:
    0 0 15px rgba(142,215,255,.3);
}

.input-box i{

    color:#6aa7d6;

    margin-right:10px;
}

.input-box input{

    border:none;
    outline:none;
    width:100%;
}

/* ===================== */
/* Button */
/* ===================== */

.register-btn{

    width:100%;

    margin-top:25px;

    border:none;

    border-radius:15px;

    padding:14px;

    background:
    linear-gradient(
    135deg,
    #8ed7ff,
    #f8b6d2
    );

    color:white;

    font-weight:600;

    transition:.3s;
}

.register-btn:hover{

    transform:translateY(-4px);

    box-shadow:
    0 10px 25px rgba(0,0,0,.15);
}

.back-home{
    text-decoration:none;
    color:#6c757d;
    font-weight:500;
    transition:.3s;
}

.back-home:hover{
    color:#7db8e8;
}

.back-home i{
    margin-right:5px;
}

.input-box{
    display:flex;
    align-items:center;
}

.input-box input{
    flex:1;
}

.toggle-password{

    cursor:pointer;

    color:#888;

    font-size:18px;

    margin-left:10px;

    transition:.3s;
}

.toggle-password:hover{

    color:#2ba9d8;

    transform:scale(1.1);
}