body{
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
    background: #2e86de;
    animation-name: bgcolor;
    animation-duration: 1s;
    animation-iteration-count: 1;
}

.box{
    width: 350px;
    height: 350px;
    color: #fff;
    text-align: center;
    /* border-radius: 50%; */
    box-shadow: 15px 15px 0px black;
    display: grid;
    align-content: center;
    justify-items: center;
    background-color: #2c3e50;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: 0.5s;
}

.box:hover{
    box-shadow: -15px -15px 0px black;
}

.box i{
    color: #e74c3c;
}

.box .span{
    width: 100px;
    height: 100px;
    background-color: tomato;
    border-radius: 50%;
    position: absolute;
    top: -40px;
}

.box .span i{
    color: #fff;
    font-size: 5rem;
    padding: 5px 0px;
}

input[type="text"]{
    width: 150px;
}

input[type="text"],input[type="password"]{
    width: 180px;
    padding: 5px 10px;
    margin: 10px 0px;
    color: #fff;
    border: none;
    border-bottom: 2px solid #27ae60;
    /* border-radius: 28px; */
    /* display: block; */
    background-color: #2C3E50;
    outline: none;
    transition: 0.5s;
}

input[type="text"]:focus{
    border-bottom: 2px solid #2980b9;
    width: 230px;
}

input[type="password"]:focus{
    border-bottom: 2px solid #2980b9;
    width: 230px;
}

input[type="text"],input[type="password"]{
    color: #fff;
}

span{
    font-size: 12px;
    color: #e74c3c;
}

button{
    width: 100px;
    padding: 10px 20px;
    background-color: transparent;
    color: #fff;
    text-decoration: none;
    margin-top: 20px;
    font-size: 1rem;
    outline: none;
    box-shadow: none;
    border: 2px solid #e17055;
    border-radius: 28px;
    transition: 0.25s;
}

button:hover {
    background-color: #e17055;
    cursor: pointer;
    color: #fff;
}

@keyframes bgcolor{
    0%{
        background-color: #fff;
    }

    100%{
        background-color: radial-gradient();
    }
}

@keyframes spinner{
    from{
        transform: rotate(0deg);
    }

    to{
        transform: rotate(360deg);
    }
}