*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#050505;
    font-family:'Cairo',sans-serif;
    color:white;
    overflow:hidden;
}

.bg{
    position:fixed;
    width:500px;
    height:500px;
    background:linear-gradient(
    45deg,
    #06b6d4,
    #8b5cf6
    );

    filter:blur(150px);

    top:-100px;
    right:-100px;

    z-index:-1;
}

.container{
    width:90%;
    max-width:700px;
    margin:auto;
    text-align:center;
    padding-top:100px;
}

h1{
    font-size:70px;
    font-weight:900;

    background:linear-gradient(
    90deg,
    #06b6d4,
    #8b5cf6
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

p{
    opacity:.7;
    margin-top:10px;
    margin-bottom:40px;
}

.box{
    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.1);

    backdrop-filter:blur(20px);

    border-radius:30px;

    padding:40px;
}

input{
    width:100%;
    padding:18px;

    border:none;
    border-radius:15px;

    background:#111;

    color:white;

    outline:none;

    font-size:16px;
}

button{
    margin-top:20px;

    background:linear-gradient(
    90deg,
    #06b6d4,
    #8b5cf6
    );

    border:none;

    color:white;

    padding:15px 30px;

    border-radius:15px;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;
}

button:hover{
    transform:scale(1.05);
}

#qrcode{
    margin-top:30px;

    display:flex;
    justify-content:center;
}

#downloadBtn{
    display:none;
}

@media(max-width:768px){

h1{
    font-size:45px;
}

.box{
    padding:25px;
}

}