/* 
For body background: linear-gradient(#872525, #243b55)
For Login box background: rgb(144, 7, 72, .5)
For Login box shadow: 0 15px 25px rgba(16, 5, 10, 0.6)
For button color/hover background: #f403af
For button box shadow: 0 0 5px #f403af,
        0 0 25px #f403af,
        0 0 50px #f403af,
        0 0 100px #f403af;
*/
*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: sans-serif;
}

/* latin-ext */
@font-face {
   font-family: 'Urbanist';
   font-style: italic;
   font-weight: 100 900;
   font-display: swap;
   src: url(https://fonts.gstatic.com/s/urbanist/v17/L0x4DF02iFML4hGCyMqgXSFsjkK3.woff2) format('woff2');
   unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
   font-family: 'Urbanist';
   font-style: italic;
   font-weight: 100 900;
   font-display: swap;
   src: url(https://fonts.gstatic.com/s/urbanist/v17/L0x4DF02iFML4hGCyMqgXS9sjg.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* latin-ext */
 @font-face {
   font-family: 'Urbanist';
   font-style: normal;
   font-weight: 100 900;
   font-display: swap;
   src: url(https://fonts.gstatic.com/s/urbanist/v17/L0x-DF02iFML4hGCyMqrbS10ig.woff2) format('woff2');
   unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
   font-family: 'Urbanist';
   font-style: normal;
   font-weight: 100 900;
   font-display: swap;
   src: url(https://fonts.gstatic.com/s/urbanist/v17/L0x-DF02iFML4hGCyMqlbS0.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }


body{
   height: 100vh;
   background: linear-gradient(#001439, #001439);
   font-family: Urbanist !important;
}

.loginBox{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   width: 400px;
   background: rgb(45, 96, 140, .5);
   box-shadow: 0 15px 25px rgba(16, 5, 10, 0.6);
   border-radius: 10px;
   padding: 40px;
}

.loginBox h2{
   color: #fff;
   text-align: center;
   margin-bottom: 30px;
}

.userinputBox{
   position: relative;
   margin-bottom: 30px;
}

.userinputBox label{
   position: absolute;
   top: -20px;
   left: 0;
   color: #99A1B0;
   padding: 10px 0;
   font-size: 16px;
   pointer-events: none;
}

.userinputBox input{
   width: 100%;
   background: transparent;
   border: 0;
   outline: none;
   font-size: 16px;
   padding: 10px 0;
   border-bottom: 1px solid #fff;
   color: #fff;
}