*{
    padding:0;
    margin:5px;
}
body{
    background-color:#E5E7E8;
    display:flex;
    justify-content:left;
}

.header{
    width:100%;
    height:100px;
}
.a{
    position:relative;
    width:300px;
    height:100px;
    display:flex;
    justify-content:space-between;
}
.c,.b{
    font:500 80px'';
    line-height:90px;
    outline-width: medium;
    position:absolute;
    color:#004888;
    top:0;
    transition: .4s;
}
.c{
    clip-path: inset(49% 0 0% 0);
}
.b{
    clip-path: inset(0% 0 49% 0);
}
.a:hover .b,.a:hover .c{
    top:calc(var(--i)*0.5px);   
}
.a:hover .d{
    opacity:1;
}
.d{
    text-decoration:none;
    color:#7B6D96;
    font:400 25px'';
    line-height:90px;
    opacity: 0;
    transition: .3s;
}
li{
    list-style:none;
    
}
a{
    text-decoration:none;
    color:#6c98c6;  
}
.login-page{
    width: 360px;
    padding: 10% 0 0;
    margin: auto;  
}
.form{
    position: center;
    z-index: 1;
    background:#78a0c5;
    max-width: 360px;
    margin: o auto 100px;
    padding: 45px;
    text-align: center;
}
.form input{
    outline: none;
    background: #f2f2f2;
    width: 100%;
    border:0;
    margin: 0 0 15px;
    padding: 15px;
    box-sizing: border-box;
    font-size: 14px; 
}
.form button{
    text-transform: uppercase;
    outline: 0;
    background: orange;
    width: 100%;
    border: none;
    padding: 15px;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: .5s
}
.form button:hover,.form button:active{
    background: green;
    border: none;
}
.form .message{
    margin: 15px 0 0;
    color: #fff;
    font-size: 12px;
}
.form .message a{
    color: orange;
    text-decoration: none;
}
.register-form{
    display: none;
}