styles.css

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}*{box-sizing:border-box}html,body{display:block;height:100%;position:relative;width:100%}body{background:#fffdf6;border-top:5px solid #4a90e2;font-family:-apple-system,BlinkMacSystemFont,"avenir next",avenir,helvetica,"helvetica neue",ubuntu,roboto,noto,"segoe ui",arial,sans-serif;font-size:14px;padding:0}a,a:visited{color:#4a90e2;font-weight:bold;text-decoration:underline}a:hover,a:visited:hover{color:#3b7cc8}hr{background:rgba(0,0,0,0.1);border:0;height:1px;margin:100px 0 80px;width:100%}h1,h2,h3,h4,h5,h6{font-family:"Open Sans","Helvetica","Arial",sans-serif}h3.heading{font-size:40px;font-weight:bold;letter-spacing:-1.5px;margin:0 0 40px 0}header{margin:100px 0;width:100%;text-align:center}header h1{border:1px solid #4a90e2;border-radius:10px;color:#fff;display:inline-block;font-size:24px;font-weight:bold;margin:0 auto 10px;overflow:hidden;width:auto}header h1 span{display:inline-block;padding:10px 20px}header h1 span.blue{background:#4a90e2}header h1 span.white{background:#fff;color:#4a90e2;margin-left:-7px}header h3{font-size:60px;font-weight:bold;letter-spacing:-1.5px;margin:0;text-align:center}header h3 span{display:block;font-size:14px;font-style:italic;font-weight:normal;letter-spacing:0;margin-top:20px}.main-container{display:flex;flex-wrap:wrap;margin:0 auto;max-width:70rem;padding:20px;width:100%}.text-container{display:block;margin:0 auto 120px;padding:15px 25px 25px;width:50%}.text-container h3{background-color:#fff2ac;background-image:-webkit-linear-gradient(left,#ffe359 0%,#fff2ac 100%);background-image:-o-linear-gradient(left,#ffe359 0%,#fff2ac 100%);background-image:linear-gradient(to right,#ffe359 0%,#fff2ac 100%);border-radius:20% 24% 30% 32%;display:inline-block;width:auto}.text-container p{font-size:16px;line-height:24px;margin-bottom:20px}.text-container ol,.text-container ul{margin:20px 0 0 0;padding:0 0 0 20px}.text-container ol li,.text-container ul li{font-size:16px;line-height:24px;margin:20px 0}.demo-container{background:#fff;border-radius:5px;box-shadow:0 2px 8px 0 rgba(0,0,0,0.2);display:block;margin:0 auto 120px;padding:15px 25px 25px;position:relative;width:50%}.demo-container:after{background:#4a90e2;border-radius:5px;content:'';height:100%;position:absolute;width:100%;z-index:-1}.demo-container:after{opacity:.1;right:-15px;top:15px}footer{border-top:1px solid rgba(0,0,0,0.1);display:block;margin:0 auto;max-width:600px;padding:40px;width:100%}footer p{font-size:14px;line-height:25px;text-align:center}@media (max-width:800px){header{padding:0 10px}header h3{font-size:40px}.text-container,.demo-container{width:100%}.text-container{margin-bottom:20px;padding:0}.text-container h3{font-size:30px}.demo-container{margin-bottom:60px}}