/* 
   Creator           : Coding's Time
   Youtube Channel   : https://www.youtube.com/channel/UC6dnKqrImGWqMb9ty1n0Ziw
   Github            : https://github.com/codingstime
 */

:root{
   font-family: "Raleway", sans-serif;
   font-size: 16px;
   font-weight: 400;
}

:focus{
   outline: none;
}

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

body{
   position: relative;
   display: grid;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   background-image: linear-gradient(to bottom right, #515bd4, #8134af, #dd2a7b);
   color: #fff;
}

body::before,
body::after{
   content: "";
   position: absolute;
   transform: translate(-50%, -50%);
   background-color: rgba(255, 255, 255, .1);
   border: 1px solid rgba(255, 255, 255, .2);
   border-radius: 1rem;
   backdrop-filter: blur(5px);
   box-shadow: 3px 3px 20px 0 rgba(0, 0, 0, .2);
}

body::before{
   top: 55%;
   left: 66%;
   width: 125px;
   height: 125px;
}

body::after{
   top: 22%;
   left: 35%;
   width: 75px;
   height: 75px;
}

.bg-glass{
   background-color: rgba(255, 255, 255, .1);
   border: 1px solid rgba(255, 255, 255, .2);
   border-radius: 1rem;
   backdrop-filter: blur(5px);
   box-shadow: 3px 3px 20px 0 rgba(0, 0, 0, .2);
}

.form{
   width: 400px;
   padding: 2.5rem 2.25rem;
   text-align: center;
}

.profile{
   display: grid;
   justify-content: center;
   align-items: center;
   width: 95px;
   height: 95px;
   margin: 0 auto 3rem;
   font-size: 2rem;
   border-radius: 50%;
}

.input{
   display: block;
   width: 100%;
   margin-top: 1.5rem;
   padding: .625rem 1.375rem;
   font-family: "Raleway", sans-serif;
   font-size: 1rem;
   color: #fff;
   border-radius: 9999px;
   transition: box-shadow .25s;
}

.input::placeholder{
   color: rgba(255, 255, 255, .5);
}

.input:focus{
   box-shadow: 3px 3px 20px 0 rgba(245, 133, 41, .2);
}

.button{
   display: block;
   margin: 2.5rem auto 0;
   padding: .75rem 3rem;
   font-family: "Raleway", sans-serif;
   font-size: .875rem;
   font-weight: 500;
   text-align: center;
   letter-spacing: .5px;
   background-color: #f58529;
   color: #fff;
   border-radius: 9999px;
   cursor: pointer;
   transition: background-color .25s;
}

.button:hover{
   background-color: rgba(255, 255, 255, .1);
   backdrop-filter: blur(5px);
}

.register{
   margin-top: 1.5rem;
   font-size: .875rem;
}

.register a {
   font-weight: 500;
   text-decoration: none;
   color: rgba(255, 255, 255, .75);
   transition: color .25s;
}

.register a:hover {
   text-decoration: underline;
   color: #fff;
}