html,body{
    width:100%;
    min-height:100%;
    margin:0;
    padding:0
}
html{
    background:#05071D url(/assets/images/london.jpg) no-repeat center center;
    background-size:cover;
    background-attachment:fixed;
    height:100vh
}
*{
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none
}
.text-clip{
    background:linear-gradient(#FFFFFF,rgba(255,255,255,.5));
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent
}
body {
    font-family: Satoshi, sans-serif;
    background: rgb(10 14 28 / 90%);
    height: 100vh;
}
body:before{
    background-image:url('data:image/svg+xml,<svg width="877" height="461" viewBox="0 0 877 461" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.3" filter="url(%23filter0_f_6_1373)"><rect x="621.799" y="-237.901" width="402.894" height="724.604" transform="rotate(82.1405 621.799 -237.901)" fill="url(%23paint0_linear_6_1373)"/></g><defs><filter id="filter0_f_6_1373" x="-295.998" y="-437.901" width="1172.89" height="898.195" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur_6_1373"/></filter><linearGradient id="paint0_linear_6_1373" x1="823.246" y1="-237.901" x2="823.246" y2="486.703" gradientUnits="userSpaceOnUse"><stop stop-color="%230C5869" stop-opacity="0"/><stop offset="1" stop-color="%23922CE2"/></linearGradient></defs></svg>');
    content:"";
    position:fixed;
    top:0;
    left:0;
    width:877px;
    max-width:100%;
    height:461px;
    z-index:-1;
    animation:pulse 3s ease-in-out infinite
}
body:after{
    background-image:url('data:image/svg+xml,<svg width="1200" height="443" viewBox="0 0 1200 443" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(%23filter0_f_6_191)"><path d="M950.6 521H192.152L-39 120L1240 120L950.6 521Z" fill="url(%23paint0_linear_6_191)"/></g><defs><filter id="filter0_f_6_191" x="-159" y="0" width="1519" height="641" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="60" result="effect1_foregroundBlur_6_191"/></filter><linearGradient id="paint0_linear_6_191" x1="438.632" y1="689.71" x2="426.126" y2="137.927" gradientUnits="userSpaceOnUse"><stop stop-color="%233024B6"/><stop offset="0.495076" stop-color="%235B24D0" stop-opacity="0.2"/><stop offset="1" stop-color="%234916B4" stop-opacity="0"/></linearGradient></defs></svg>');
    content:"";
    position:fixed;
    bottom:0;
    left:50%;
    margin-left:-25%;
    width:1200px;
    max-width:100%;
    height:443px;
    z-index:-1;
    animation:pulse 3s ease-in-out infinite;
    animation-delay:1s
}
@media screen and (max-width: 768px){
    body:after{
        left:0;
        margin-left:0
    }
}
h1 {
    background: linear-gradient(#ffffff00, rgb(255 255 255));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 56px;
    letter-spacing: -.05em;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
}
input {
    background: #0A1020;
    border: 1px solid #464646;
    padding: 12px 24px;
    color: #fff;
    border-radius: 8px;
    font-size: 24px;
    font-weight: 500;
    margin: 20px auto;
    display: block;
    width: 100%;
}
input:focus{
    outline:none;
    border:1px solid rgba(255,255,255,.2)
}
input,input:before,input:after{
    -webkit-user-select:initial;
    -moz-user-select:initial;
    user-select:initial
}
button {
    width: 320px;
    margin: 50px auto 0;
    display: block;
    max-width: 80%;
    background: linear-gradient(180deg, #1E3A8A 0%, #080F24 100%);
    border: 1px solid #1E3A8A;
    border-radius: 8px;
    color: #fff;
    font-weight: 700;
    font-family: Satoshi, sans-serif;
    font-size: 24px;
    line-height: 64px;
}
.login-box{
    padding:0 30px
}
.form-box{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-60%);
    width:85%;
    max-width:630px
}
.info-box{
    text-align:center;
    font-size:24px;
    background:linear-gradient(#FFFFFF,rgba(255,255,255,.5));
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent
}