body{
    margin: 0;
    padding: 0;
    font-family: myCG;
    background: linear-gradient(120deg, #2980b9, #33FFBD);
    height: 100vh;
    overflow: hidden;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    background: white;
    border-radius: 10px;
}

    .center h1{
        text-align: center;
        padding: 0 0 20px 0;
        border-bottom: 1px solid silver;
    }

    .center form{
        padding: 0 40px;
        box-sizing: border-box;
    }

        form .text_field{
            position: relative;
            border-bottom: 2px solid #adadad;
            margin: 30px 0;
        }

            .text_field input{
                width: 100%;
                padding: 0 5px;
                height: 40px;
                font-size: 16px;
                border: none;
                background: none;
                outline: none;
            }

            .text_field label{
                position: absolute;
                top: 50%;
                left: 5px;
                color: #adadad;
                transform: translateY(-50%);
                font-size: 16px;
                pointer-events: none;
                transition: .5s;
            }

            .text_field span::before{
                content: '';
                position: absolute;
                top: 40px;
                left: 0;
                width: 0%;
                height: 2px;
                background: #2691d9;
                transition: .5s;
            }

            .text_field input:focus ~ label,
            .text_field input:valid ~ label{
                top: -5px;
                color: #2691d9;
            }

            .text_field input:focus ~ span::before,
            .text_field input:valid ~ span::before{
                width: 100%;
            }

            .pass{
                margin: -5px 0 20px 5px;
                color: #a6a6a6;
                cursor: pointer;
            }

            .pass:hover{
                text-decoration: underline;
            }

                input[type="submit"]{
                   width: 100%;
                   height: 50px;
                   border: 1px solid;
                   border-radius: 25px;
                   font-size: 18px;
                   color: white;
                   font-weight: 700;
                   cursor: pointer;
                   outline: none;
                   background: #2980b9;
                   transition: .5s;
                }

                input[type="submit"]:hover{
                    color: #2980b9;
                    border: 1px solid #2980b9;
                    background: #33FFBD;
                    transition: .5s;
                }

                .signup_link{
                    margin: 30px 0;
                    text-align: center;
                    font-size: 16px;
                    color:#666666;
                }

                    .signup_link a{
                        color: #2691d9;
                        text-decoration: none;
                    }

                    .signup_link a:hover{
                        text-decoration: underline;
                    }