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

body{
    height:100vh;
    background-color: rgb(19, 20, 19);
    display: flex;
    justify-content: center;
    align-items: center;
}

.loginform
{
    width:min(450px,95%);
    height: 580px;
    border:solid 1px blue;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color:transparent;
    border-radius:10px;
    transition: all 1s;
}

.loginform:hover{
    box-shadow: 0 0 100px 0px rgb(121, 97, 239),0 0 400px 10px rgb(121, 97, 239);
    animation: blink 1s infinite;
    background-color: rgb(47, 45, 45);
}
@keyframes blink {
    0%,100%{
        box-shadow: 0 0 100px 0px rgb(121, 97, 239),0 0 400px 10px rgb(121, 97, 239);
    }
    40%,50%,60%
    {
        box-shadow: 0 0 50px 0px rgb(121, 97, 239),0 0 100px 0px rgb(121, 97, 239);
    }
}

.inputgroup
{
    position:relative; 
    height:50px;
    width:85%;  
}

.inputgroup input
{
    position:absolute;
    width:100%;
    height:45px;
    background: transparent;
    outline:none;
    border-left:none;
    border-right:none;
    border-top:none;
    border-bottom:solid 1px red;
    color:white;
    font-size: 20px;
    transition: all 200ms;
}

.inputgroup label
{
    position:absolute;
    transition: all 200ms;
    color:red;
}

.inputgroup input:hover +label,
.inputgroup input:focus +label,
.inputgroup input:valid +label
{
    transform: translateY(-20px);
    color:rgb(0, 85, 255);
}
.inputgroup input:hover ,
.inputgroup input:focus ,
.inputgroup input:valid 
{
    
    border-bottom:solid 1px rgb(0, 85, 255);
}

.topmargin{
    margin-top: 50px;
}
.topmarginlarge{
    margin-top: 80px;
}

.divcallforaction
{
    width:85%;
    height:45px;
    display: flex;
    justify-content: end;
    align-items: center;
}
.btnlogin
{
    border:solid 1px blue;
    width:150px;
    height:45px;
    padding:5px;
    border-radius: 5px;
    
    color:white;
    transition: all 200ms;
}
.btnlogin:hover{
    box-shadow: 0 0 100px rgb(242, 88, 201);
    transform: translateY(-5px);
}
.inactivecolor
{
    background-color: rgb(190, 22, 22);
}
.activecolor
{
    background-color: rgb(50, 168, 247);
}

.diverror
{
    background-color: transparent;
    color:white;
    height:45px;
    width:85%;

    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transition: all 1s;
    letter-spacing: 1px;
}
.applyerrordiv
{
    visibility: visible;
    opacity: 1;
    animation:falldown 1s linear;
}
@keyframes falldown {
    0%{opacity: 0;transform: translateY(-100px);}
    49%{opacity: 1;transform: translateY(0px);letter-spacing: 1px;}
    50%{opacity: 1;transform: translateY(0px);letter-spacing: 3px;}
    55%{opacity: 1;transform: translateY(0px);letter-spacing: 1px;}
    60%{opacity: 1;transform: translateY(-50px);}
    80%{opacity: 1;transform: translateY(0px);}
    85%{opacity: 1;transform: translateY(-10px);}
    100%{opacity: 1;transform: translateY(0px);}
}