.center-main{font-size:5rem;text-align:center}body{margin:5% auto 0 auto;width:90%;max-width:1125px}h1{font-size:28px;margin-bottom:2.5%}input,label,span,textarea{font-family:Ubuntu,sans-serif;display:block;margin:10px;padding:5px;border:none;font-size:22px}input:focus,textarea:focus{outline:0}input.question,textarea.question{font-size:48px;font-weight:300;border-radius:2px;margin:0;border:none;width:80%;background:transparent;transition:padding-top .2s ease,margin-top .2s ease;overflow-x:hidden}input.question+label,textarea.question+label{display:block;position:relative;white-space:nowrap;padding:0;margin:0;width:10%;border-top:1px solid #b100fb;transition:width .4s ease;height:0}input.question:focus+label,textarea.question:focus+label{width:80%}input.question:focus,input.question:valid{padding-top:35px}textarea.question:focus,textarea.question:valid{margin-top:35px}input.question:focus+label>span,input.question:valid+label>span{top:-100px;font-size:22px;color:#333}textarea.question:focus+label>span,textarea.question:valid+label>span{top:-150px;font-size:22px;color:#333}input.question:valid+label,textarea.question:valid+label{border-color:green}input.question:invalid,textarea.question:invalid{box-shadow:none}input.question+label>span,textarea.question+label>span{font-weight:300;margin:0;position:absolute;color:#8f8f8f;font-size:48px;top:-66px;left:0;z-index:-1;transition:top .2s ease,font-size .2s ease,color .2s ease}input[type=submit]{transition:opacity .2s ease,background .2s ease;display:block;opacity:0;margin:10px 0 0 0;padding:10px;cursor:pointer}input[type=submit]:hover{background:#eee}input[type=submit]:active{background:#999}input.question:valid~input[type=submit],textarea.question:valid~input[type=submit]{-webkit-animation:appear 1s forwards;animation:appear 1s forwards}input.question:invalid~input[type=submit],textarea.question:invalid~input[type=submit]{display:none}@-webkit-keyframes appear{to{opacity:1}}@keyframes appear{to{opacity:1}}