body {
        --primary: 25,91,255;
        --color: 44, 62, 80;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column;
        height: 100vh;
        background: #F4F7F8;
        height: calc(var(--vh, 1vh) * 100);
        overflow: hidden;
        color: rgb(var(--color));
        width: 100%;
        height: 100vh;
    }
    * {
        list-style: none;
        outline: none;
        padding: 0;
        margin: 0;
        font-family: 'Poppins', sans-serif;
        box-sizing: border-box;
    }
    .con-input {
        position: relative;
        display: flex;
        align-items: center;
    }
    input {
        padding: 11px 15px;
        border-radius: 25px;
        border: 0px;
        box-shadow: 0px 8px 25px 0px rgba(0,0,0,.05);
        transition: all .25s ease;
        min-width: 250px;
    }
    input.valid ~ .icons .check{
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }
    input.invalid ~ .icons .x{
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }
    .icons {
        position: absolute;
        right: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        width: 20px;
        height: 20px;
        transition: all .25s ease;
    }
    i {
        position: absolute;
        transition: all .25s ease;
        font-size: 1.3rem;
        opacity: 0;
        visibility: hidden;
        transform: scale(.5);
    }
    .check {
        color: #3aba6f;
        text-shadow: 0px 5px 10px rgba(58, 186, 111, .3);
    }
    .x {
        color: rgb(240, 90, 92);
        text-shadow: 0px 5px 10px rgba(240, 90, 92, .3);
    }
    input:focus {
        transform: translate(0,-6px);
        box-shadow: 0px 15px 25px 0px rgba(0,0,0,.09);
        padding-left: 20px;
    }
    input:focus ~ .icons {
        transform: translate(0, -6px);
    }

function handleInput(evt) {
        const value = evt.target.value
        const emailRegex = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i
        
        if (emailRegex.test(value.trim())) {
            evt.target.classList.add('valid')
            evt.target.classList.remove('invalid')
        } else {
            evt.target.classList.add('invalid')
            evt.target.classList.remove('valid')
        }

        if (!value) {
            evt.target.classList.remove('invalid')
        }
    }