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

html,body{background-color: black;
    height:100%;
    width:100%;
}

#wrap{display:flex;
    height:100%;
    width:100%;
    flex-direction:column;
    background-image:url(back.jpg);
    background-size:100%;
    background-position: center;
    animation: blur 7s infinite ease-in-out;
}

@keyframes blur{
    
    0%{filter:blur(13px);}
    50%{filter:blur(29px);}
    100%{filter:blur(13px);}
    
}
#over{position:absolute;top:0px;left:0px;display:flex;width:100%;height:100%;flex-direction: column;}

#over span{margin:auto;display:flex;width:650px;height:320px;flex-direction: column;position:relative;top:-150px;}

label{background: -webkit-linear-gradient(#e2306b, #c23583,#833ab5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}

form{margin:auto;}
input{width:650px;height:50px;border-radius:5px;background-color:transparent;font-size:20px;position:relative;top:30px;text-align: center;border:1px solid white;color:white; }
.test{ border:1px solid red;width:650px;height:50px;border-radius:5px;background-color:transparent;font-size:20px;position:relative;top:30px;text-align: center;border:1px solid white;color:white; }
#btn{width:250px;border-radius:5px;position:relative;top:5px;margin:auto;color:white;outline: none;cursor:pointer;}
a {width:250px;border-radius:5px;position:relative;top:5px;margin:auto;color:white;outline: none;cursor:pointer;}
h1{color:white;font-family: 'Barlow Semi Condensed';margin:auto;height:10px;font-size:100px;}
h2{color:white;font-family: 'Barlow Semi Condensed';margin:auto;height:10px;position:relative;top:50px;}
#iUrl:focus { 
    animation: focus 0.2s ease-in forwards;
    outline: none;
}   

/*
@keyframes focus{
    0%{width:650px;height:50px;}
    100%{width:655px;height:55px;}
}
*/

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: gray;
    position:relative;
    /*left:10px;*/
}
::-moz-placeholder { /* Firefox 19+ */
  color: gray;
    position:relative;
    /*left:10px;*/
}
:-ms-input-placeholder { /* IE 10+ */
  color: gray;
    position:relative;
    /*left:10px;*/
}
:-moz-placeholder { /* Firefox 18- */
  color: gray;
    position:relative;
    /*left:10px;*/
}

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

h1{height:5px;font-size:50px;}
h2{height:10px;top:5px;font-size:14px;}
#over span{width:280px;height:320px;top:-100px;}   
input{width:250px;height:45px;border-radius:5px;font-size:15px;top:-30px;animation-name:noanim;}
#btn{width:100px;height:35px;border-radius:5px;top:-55px;font-size:12px;}

}

#footer {display:block;width:100vw;text-align:center;position:fixed;bottom:2em;left:0px;}
#instaGrid {border:1px solid #ffffff52;padding:1em;font-family:"Barlow Semi Condensed";color:#ffffffcc;font-weight:bold;top:0;font-size:0.8em;}
