:root{--white:#fff;--text-black:#000;--button:whitesmoke;--button-active:#ccc;--main:#2ec27e;--main-hover:#39cf89;--main-active:#1d8f5a;--main-blue:#63639c;--focus:rgba(0,150,250,.4) 0 0 0 4px;}body{margin:0;padding:0;background:var(--main-blue);background-image:url(pattern.png);background-repeat:repeat;font-family:sans-serif;}div{margin:0;padding:0;}img{border-radius:6px;}.card{margin:0 auto 25px;border-radius:8px;width:400px;z-index:5;position:relative;top:5vh;text-align:center;box-shadow:0 1.6px 3.6px 0 rgba(0,0,0,.132),0 .3px .9px 0 rgba(0,0,0,.108);}h1{margin:0;}.head_area{background:rgb(244,243,243);position:relative;z-index:10;border-radius:8px 8px 0 0;display:flex;flex-direction:column;padding:1em 0;}.section_area{position:relative;z-index:10;background:rgb(255,255,255);background-image:url(noise.png);padding:20px;border-color:var(--button-active);border-style:solid;border-width:1px 0 0 0;border-radius:0 0 8px 8px;}form{display:flex;flex-direction:column;width:100%;box-sizing:border-box;text-align:left;gap:5px;margin-bottom:5px;}form input,form button{width:100%;}a.btn,button,input{cursor:pointer;padding:0 5px;margin:0;border:1px solid var(--button-active);border-radius:6px;background-color:var(--button);height:50px;display:inline-block;box-sizing:border-box;position:relative;font-size:16px;transition:box-shadow .2s;}a.btn:focus,button:focus,input:focus{outline:none;box-shadow:var(--focus);}input[type=text],input[type=password]{cursor:text;background-color:var(--white);}a.btn:active,button:active{background-color:var(--button-active);}a.btn span,button span{top:13%;position:relative;}input[type=submit]{background:var(--main);color:var(--white);border:0;}input[type=submit]:hover{background:var(--main-hover);}input[type=submit]:active{background:var(--main-active);}hr{border:0;border-top:solid 1px var(--button-active);margin:1.5em 0;}@media only screen and (max-width:768px){.card{top:0;width:100%;min-width:300px;border-radius:0}.head_area,.section_area{border-radius:0}.section_area{background-size:40px}}