/* Reset.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,ol,ul,li,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{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} *, *:before, *:after { box-sizing: border-box; } *:focus { outline: none; } body { line-height: 1.35em; /*line-height: 1em;*/ font-size: 20px; font-family: "Coming Soon", sans-serif; background-color: #fff; color: #444; -webkit-font-smoothing: antialiased; } main { margin: 0 auto; max-width: 720px; padding: 20px; min-width: 240px; } a { color: inherit; text-decoration: inherit; box-shadow: 0 10px 0 -8px #444;/* box-shadow: 0 12px 0 -10px #444;*/ text-shadow: 1px 0 #fff, 0 1px #fff, -1px 0 #fff, 0 -1px #fff;/*, 1px 1px #fff, -1px 1px #fff, -1px 1px #fff, -1px -1px #fff*/ -webkit-transition: 0.5s box-shadow; } a:hover, a:focus { box-shadow: 0 2px 0 0 #444; } .btn { color: #444; line-height: 1em; color: inherit; text-decoration: none; display: inline-block;/* margin: 1em;*/ border-radius: 4px; background-color: #fff; box-shadow: 0 0 0 0 #444 inset, 0.3em 0.2em 0 0 #bbb; border: 0.2em solid #444; padding: 0.8em; text-align: center; transition: 0.25s box-shadow, 0.25s -webkit-transform; } .btn { padding: 0.7em; } .btn:hover { box-shadow: 0 4em 0 0 #444 inset, 0em 0em 0 0 #bbb; -webkit-transform: translate(0.3em, 0.2em); color: #fff; } .btn.disabled { opacity: 0.8; } .btn.disabled:hover { box-shadow: 0 0 0 0 #444 inset, 0.3em 0.2em 0 0 #bbb; -webkit-transform: translate(0, 0); color: #444; } h1, h2, h3, h4, h5, h6 { font-weight: 300; line-height: 1.4em; padding: 0.666em 0 0.444em 0; } h1 { font-size: 2em; } h2 { font-size: 1.7em; } h3 { font-size: 1.5em; } h4 { font-size: 1.4em; } h5 { font-size: 1.3em; } h6 { font-size: 1.2em; } p { padding: 8px 0; } small { font-size: 0.8em; line-height: 1.35em; } ol, ul { list-style: decimal; padding: 10px 30px; } ul { list-style: disc; } hr { /*height: 2px;*/ margin: 40px auto; max-width: 180px; border: none; /*background-color: #444;*/ border-bottom: 2px solid #444; }/* pre, code { font-family: "Monaco"; background-color: #eee; border: 1px solid #ddd; font-size: 0.8em; line-height: 1.3em; padding: 0 2px; border-radius: 2px; } pre { background-color: #eee; border: 1px solid #ddd; padding: 10px; margin: 10px; word-wrap: break-word; } pre > code { border: none; background-color: transparent; }*/ strong { font-weight: 700; } em { font-style: italic; } blockquote { padding: 30px; font-style: italic; } img { width: 100%; border-radius: 4px; } table { margin: 20px; } th, td { padding: 1px 12px; } th { font-weight: 700; } .site-header { position: fixed; top: 0; width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;/* height: 96px;*/ color: #fff; background-color: #e74c3c; /*background: -webkit-linear-gradient(-90deg, rgb(255, 165, 0), rgba(255, 165, 0, 0));*/ background-repeat: no-repeat; font-size: 24px; font-family: "Shadows Into Light Two"; } .site-header * { padding: 0; margin: 0; } .site-header h1 { display: inline-block; font-weight: 400; font-size: 1.25em; line-height: 1em; -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .site-header h1 .circle { box-shadow: none; text-shadow: none; height: 4em; width: 4em; border-radius: 2em; position: absolute; top: -1em; left: 1em; background-color: #e74c3c; color: #fff; text-align: center; padding: 1.5em 0; font-weight: 900; transition: 0.25s color, 0.25s background-color, 0.4s box-shadow; } .site-header h1 .circle:hover { color: #e74c3c; background-color: #fff; box-shadow: 2px 2px 10px #e74c3c; } /* .site-header h1 .logo { height: 3em; width: 3em; background-image: url("/images/logo.png"); background-repeat: no-repeat; background-size: 100%; background-position: center 16px; border-radius: 1.6em; position: absolute; top: -1.15em; background-color: #e74c3c; color: #fff; padding: 1em; font-weight: 900; }*/ .site-header nav { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; /*padding-right: 5%;*/ font-size: 1em; font-weight: 300; line-height: 1em; /*height: 100%;*/ padding: 0.3em 5%; } .site-header nav a { box-shadow: none !important; text-shadow: none !important; display: inline-block; /*height: 44px;*/ padding: 0.4em; transition: 0.25s color, 0.25s background-color; } .site-header nav span { display: block; height: 100%; } .site-header nav a:hover { background-color: #fff; color: #e74c3c; } .site-header nav a.active { font-weight: 400; } main { padding: 10vh 6vw; padding-bottom: 20vh; font-size: calc(0.8vw + 12px); line-height: 1.4em; padding-top: 100px; } footer { width: 100%; padding: 2em 10vw; background-color: #fff; color: #444; font-weight: 300; font-size: 16px; line-height: 1.2em; text-align: right; } /* Breakpoint 1 */ @media screen and (max-width: 720px) { .site-header { font-size: 20px; } footer { font-size: 14px; } } /* Breakpoint 2 */ @media screen and (max-width: 600px) { footer { font-size: 14px; } } /* Breakpoint 3 */ @media screen and (max-width: 540px) { .site-header { font-size: 18px; } }