checkSize();
function checkSize() {
    if ($(window).width() > 560) {
        countt = 0;
        $("#Email").focus(function() {
            $('#Email').css("color", "#0E39FE");
            $('#password').css("color", "#F1FAFB");
            $("#blue-border").css({
                width: "355px",
                height: "45px",
                top: "135px",
                left: "95px",
                "border-color": "#0E39FE",
                "border-width": "8px",
                "z-index": "5",
            });
            $(".title-contain h2").html("Type your email");
            $(".title-contain p").html("new?");
        });
      
        $("#password").focus(function() {
            $('#password').css("color", "#0E39FE");
            $('#Email').css("color", "#F1FAFB");
            $("#blue-border").css({
                width: "355px",
                height: "45px",
                top: "205px",
                left: "95px",
                "border-color": "#0E39FE",
                "border-width": "8px",
                "z-index": "5",
            });
            $(".title-contain h2").html("choose you password");
            $(".title-contain p").html("feel the magic");
        });

        $(".confirm-btn button").focus(function() {
            $("#blue-border").css({
                width: "250",
                height: "45px",
                top: "95%",
                left: "calc(50% - 125px)",
                "border-color": "transparent",
                "border-width": "1px",
                "z-index": "-1",
            });
        });

        $(".confirm-btn button").click(function() {
            $("#blue-border").css({
                width: "calc(100% - 17px)",
                height: "calc(100% - 17px)",
                top: "-13px",
                left: "-13px",
                "border-color": "#0E39FE",
                "border-width": "5px",
                "z-index": "0",
            });
        });
    } else {

        $("#Email").focus(function() {
            $('#Email').css("color", "#0E39FE");
            $('#password').css("color", "#F1FAFB");
            $("#blue-border").css({
                width: "215px",
                height: "40px",
                top: "155px",
                left: "35px",
                "border-color": "#0E39FE",
                "border-width": "8px",
                "z-index": "5",
            });
            $(".title-contain h2").html("Type your email");
            $(".title-contain p").html("first time?");
        });
      
        $("#password").focus(function() {
            $('#password').css("color", "#0E39FE");
            $('#Email').css("color", "#F1FAFB");
            $("#blue-border").css({
                width: "215px",
                height: "40px",
                top: "220px",
                left: "35px",
                "border-color": "#0E39FE",
                "border-width": "8px",
                "z-index": "5",
            });
            $(".title-contain h2").html("choose you password");
            $(".title-contain p").html("feel the magic");
        });

        $(".confirm-btn button").click(function() {
            $("#blue-border").css({
                width: "calc(95% + 3px)",
                height: "calc(95% + 3px)",
                top: "-13px",
                left: "-13px",
                "border-color": "#0E39FE",
                "border-width": "5px",
                "z-index": "0",
            });
        });
    }
}

$(".confirm-btn button").click(function() {

    $(".form-contain").addClass("form-disappear");
    $(".form-info h3").delay(300).fadeIn(700);
    $('#password').removeClass('disc');
    if ($(window).width() < 560) {
        $(".form-info h3").css("font-size", "1.8em");
    }else{
        $(".form-info h3").css("font-size", "3em");
    }
    $(".form-info").delay(500).addClass("info-disappear");

    setTimeout(function() {
        $("#Email").val("");
        $("#password").val("");

        $(".title-contain h2").html("Try the Form");
        $(".title-contain p").html("sign up and see the magic");

        $(".form-contain").removeClass("form-disappear");
        $(".form-info").removeClass("info-disappear");
        $(".form-info h3").hide();

    }, 4000);

});

(function() {

    var input = document.getElementById('Email');
    var blue = document.getElementById('blue-border');
    var form = document.getElementById('form');
    var elem = document.createElement('div');
    elem.id = 'notify';
    elem.style.display = 'none';

    form.appendChild(elem);

    input.addEventListener('invalid', function(event) {
        event.preventDefault();
        if (!event.target.validity.valid) {
            input.className = 'invalid animated shake';
            blue.className = 'invalid animated shake';
            $("#blue-border").css("border-color", "#ff4d4d");
            $('#Email').css("color", "#ff4d4d");

            setTimeout(function() {
                input.className = "";
                blue.className = "";
                $("#blue-border").css("border-color", "#0E39FE");
                $('#Email').css("color", "#0E39FE");
            }, 1000);
        }
    });

    input.addEventListener('input', function(event) {
        if ('block' === elem.style.display) {
            input.className = '';
            elem.style.display = 'none';
        }
    });

})();

var x = document.getElementById("password");
document.getElementById
var style = window.getComputedStyle(x);

if (style.webkitTextSecurity){}else{
    x.setAttribute("type", "password");
}

$('#password').on('keyup', function() {
    if (this.value.length == 0) {
        $('#password').removeClass('disc');
        $('#password').removeClass('circle');
        $('#password').removeClass('square');
        $(".title-contain p").html("feel the magic");
    } else if (this.value.length < 4) {
        $('#password').removeClass('disc');
        $('#password').removeClass('square');
        $('#password').addClass('circle');
        $(".title-contain p").html("keep going.");
    } else if (this.value.length < 7) {
        $('#password').removeClass('circle');
        $('#password').removeClass('square');
        $('#password').addClass('disc');
        $(".title-contain p").html("almost!");
    } else if (this.value.length < 10) {
        $('#password').removeClass('disc');
        $('#password').removeClass('circle');
        $('#password').addClass('square');
        $(".title-contain p").html("great!");
    }
});
window.addEventListener('resize', checkSize);