body{margin:0;background:url(https://www.iesmiguelservet.es/fondo-ampa.jpg) repeat fixed top center;}
.form{width:340px;height:440px;background:#fff5dc;border-radius:8px;box-shadow:0 0 40px -10px #000;margin:calc(50vh - 220px) auto;padding:20px 30px;max-width:calc(100vw - 40px);box-sizing:border-box;font-family:'Montserrat',sans-serif;position:relative}
h4{margin:10px 0;padding-bottom:10px;color:#f06c2c;border-bottom:3px solid #f06c2c;font-size:14px;}
input{width:100%;padding:10px;box-sizing:border-box;background:none;outline:none;resize:none;border:0;font-family:'Montserrat',sans-serif;transition:all .3s;border-bottom:2px solid #fcc68c}
input:focus{border-bottom:2px solid #f06c2c}
p:before{content:attr(type);display:block;margin:15px 0 0;font-size:14px;color:#5a5a5a}
button{float:right;padding:8px 12px;margin:8px 0 0;font-family:'Montserrat',sans-serif;border:2px solid #f06c2c;background:0;color:#f06c2c;cursor:pointer;transition:all .3s}
button:hover{background:#f06c2c;color:#fff}
div{content:'Hi';position:absolute;bottom:-15px;right:-20px;background:#f06c2c;color:#fff;width:320px;padding:16px 4px 16px 0;border-radius:6px;font-size:13px;box-shadow:10px 10px 40px -14px #000}
span{margin:0 5px 0 15px}