style.css

/*!
Theme Name: heronamedharley
Author: Harley Oliver
Author URI: http://www.heronamedharley.com
Description: WordPress theme for heronamedharley.com
Text Domain: heronamedharley
Version: 0.1.0
*/article,aside,body,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}.container,body{position:relative}*,.row .col,:after,:before{box-sizing:border-box}abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,main,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:inherit;vertical-align:baseline;background:0 0}html{-webkit-text-size-adjust:none;height:100%;margin:0;padding:0}body{color:#e6e6e6;line-height:1.6;background:#6169ed}body #heronamedharley{overflow:hidden;background:linear-gradient(to top,#6169ed,#ecc2c4)}.container{width:100%;margin:0 auto;max-width:87.5rem}.row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;margin-bottom:0}.row .col{-webkit-box-flex:0;-ms-flex:0 auto;flex:0 auto}.row .col.one{-ms-flex-preferred-size:6.25%;flex-basis:6.25%;max-width:6.25%;width:6.25%}.row .col.two{-ms-flex-preferred-size:12.5%;flex-basis:12.5%;max-width:12.5%;width:12.5%}.row .col.three{-ms-flex-preferred-size:18.75%;flex-basis:18.75%;max-width:18.75%;width:18.75%}.row .col.four{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%;width:25%}.row .col.five{-ms-flex-preferred-size:31.25%;flex-basis:31.25%;max-width:31.25%;width:31.25%}.row .col.six{-ms-flex-preferred-size:37.5%;flex-basis:37.5%;max-width:37.5%;width:37.5%}.row .col.seven{-ms-flex-preferred-size:43.75%;flex-basis:43.75%;max-width:43.75%;width:43.75%}.row .col.eight{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%;width:50%}.row .col.nine{-ms-flex-preferred-size:56.25%;flex-basis:56.25%;max-width:56.25%;width:56.25%}.row .col.ten{-ms-flex-preferred-size:62.5%;flex-basis:62.5%;max-width:62.5%;width:62.5%}.row .col.eleven{-ms-flex-preferred-size:68.75%;flex-basis:68.75%;max-width:68.75%;width:68.75%}.row .col.twelve{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%;width:75%}.row .col.thirteen{-ms-flex-preferred-size:81.25%;flex-basis:81.25%;max-width:81.25%;width:81.25%}.row .col.fourteen{-ms-flex-preferred-size:87.5%;flex-basis:87.5%;max-width:87.5%;width:87.5%}.row .col.fifteen{-ms-flex-preferred-size:93.75%;flex-basis:93.75%;max-width:93.75%;width:93.75%}.row .col.sixteen{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;width:100%}#banner h1,h2{max-width:80%}@media (min-width:768px){.row .col.offset-1{margin-left:6.25%}.row .col.offset-2{margin-left:12.5%}.row .col.offset-3{margin-left:18.75%}.row .col.offset-4{margin-left:25%}.row .col.offset-5{margin-left:31.25%}.row .col.offset-6{margin-left:37.5%}.row .col.offset-7{margin-left:43.75%}.row .col.offset-8{margin-left:50%}.row .col.offset-9{margin-left:56.25%}.row .col.offset-10{margin-left:62.5%}.row .col.offset-11{margin-left:68.75%}.row .col.offset-12{margin-left:75%}.row .col.offset-13{margin-left:81.25%}.row .col.offset-14{margin-left:87.5%}.row .col.offset-15{margin-left:93.75%}#latest-blog a.btn,main a.btn{max-width:12.5rem}}@media screen and (max-width:768px){.row .col.eight,.row .col.eleven,.row .col.fifteen,.row .col.five,.row .col.four,.row .col.fourteen,.row .col.nine,.row .col.one,.row .col.one-third,.row .col.seven,.row .col.six,.row .col.sixteen,.row .col.ten,.row .col.thirteen,.row .col.three,.row .col.twelve,.row .col.two,.row .col.two-thirds{width:100%;-ms-flex-preferred-size:100%;flex-basis:100%;min-width:100%}}body,p{font-size:calc(.1875vw + 15.4px);font-family:monospace}@media (max-width:320px){body,p{font-size:16}}@media (min-width:1920px){body,p{font-size:19}}h1,h2,h3,h4,h5,h6{font-family:"Fugaz One",sans-serif;font-weight:400;text-transform:uppercase;line-height:1.6}h1,h2{font-family:"Rozha One",serif;text-align:center;border-top:.1875rem solid #6169ed;border-bottom:.1875rem solid #6169ed;position:relative}h1{font-size:calc(2.75vw + 26.2px);margin:0 0 3.75rem;line-height:1.2;color:#fb7263}@media (max-width:320px){h1{margin-bottom:20;font-size:35}}@media (min-width:1920px){h1{margin-bottom:40;font-size:79}}h2{font-size:calc(11.125vw + 26.4px);display:block;margin:0 auto;line-height:1}@media (max-width:320px){h2{font-size:62}}@media (min-width:1920px){h2{font-size:240}}#about h2,#portfolio h2{color:#6169ed}#contact h2,#latest-blog h2{color:#ecc2c4;border-color:#ecc2c4}h3{font-size:calc(.75vw + 15.6px);margin-bottom:.625rem;margin-bottom:calc(.3125vw + 4px)}@media (max-width:320px){h3{font-size:18;margin-bottom:5}}@media (min-width:1920px){h3{font-size:30;margin-bottom:10}}#latest-blog .three h3{text-align:right;line-height:1.2;margin-bottom:2.5rem}main ol li,main p,main ul li{line-height:1.6}main p{margin-bottom:calc(.1875vw + 15.4px)}main strong{font-weight:700}main ol,main ul{font-size:calc(.1875vw + 15.4px);margin:0}@media (max-width:320px){main p{margin-bottom:16}main ol,main ul{font-size:16}}@media (min-width:1920px){main p{margin-bottom:19}main ol,main ul{font-size:19}}main ol ol,main ol ul,main ul ol,main ul ul{margin:0}#latest-blog a,main a{position:relative;text-decoration:none;color:#e6e6e6;border-bottom:.0625rem dotted #cdcdcd;transition:all .3s ease-in-out}#latest-blog a.btn,main a.btn{display:block;margin-bottom:2.5rem;text-align:center;line-height:3;font-size:.875rem;background-color:#bfb8bf;border-top:.0625rem solid #fff;border-left:.0625rem solid #fff;border-bottom:.0625rem solid #000;border-right:.0625rem solid #000;color:#000}#latest-blog a.btn:after,#latest-blog a.btn:before,main a.btn:after,main a.btn:before{position:absolute;background:0 0;transition:all .3s ease-in-out;z-index:1;content:""}#latest-blog a.btn:before,main a.btn:before{top:0;left:0;right:0;bottom:0;border:.0625rem solid #787f78;border-top-color:#e0e0e0;border-left-color:#e0e0e0}#latest-blog a.btn:after,main a.btn:after{top:3px;left:3px;right:3px;bottom:3px;border:.0625rem dotted transparent}nav ul,nav ul li,section{position:relative}#latest-blog a.btn.right,main a.btn.right{margin-left:auto}#latest-blog a.btn:focus,#latest-blog a.btn:hover,main a.btn:focus,main a.btn:hover{color:#000}#latest-blog a.btn:focus:after,#latest-blog a.btn:hover:after,main a.btn:focus:after,main a.btn:hover:after{border-color:#000}#latest-blog a:focus,#latest-blog a:hover,main a:focus,main a:hover{cursor:pointer;color:#fb7263;border-bottom:.0625rem solid #231f20}nav{display:none}@media (min-width:768px){nav{max-width:calc(6.25vw + 80px);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;position:absolute;left:0;top:0;min-height:100vh;width:100%;z-index:9999}}@media (min-width:768px) and (max-width:320px){nav{max-width:100}}@media (min-width:768px) and (min-width:1920px){nav{max-width:200}}nav ul{font-size:calc(.43403vw + 4.67px);display:block;padding:0;margin:0;width:100%}@media (max-width:768px){nav ul{font-size:8}}nav ul li{display:inline-block;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;font-weight:400;line-height:3.75rem;margin:0;padding-right:.625rem;width:100%;font-family:monospace;text-align:right;text-transform:capitalize;background-color:transparent;border-top:.0625rem solid #000;z-index:3}nav ul li>a{display:block;margin:0;padding:0 0 0 1.25rem;text-decoration:none;color:#000}nav ul li:last-child,nav ul li>a:first-letter{border-bottom:.0625rem solid #000}nav ul li.current-menu-item,nav ul li:focus,nav ul li:hover{background:#d5ede0;transition:0}nav ul li.current-menu-item>a,nav ul li:focus>a,nav ul li:hover>a{color:#000}section{padding:0 1.25rem;padding-top:calc(6.25vw + 0px);padding-bottom:calc(6.25vw + 0px)}@media (max-width:320px){section{padding-top:20;padding-bottom:20}}@media (min-width:1920px){nav ul{font-size:13}section{padding-top:120;padding-bottom:120}}section .container{padding-top:calc(5vw + 24px);padding-bottom:calc(5vw + 24px)}@media (max-width:320px){section .container{padding-top:40;padding-bottom:40}}@media (min-width:1920px){section .container{padding-top:120;padding-bottom:120}}section#banner,section#banner .container,section#social,section#social .container{padding:0}section#portfolio{padding-left:0;padding-right:0}section#latest-blog .container,section#portfolio .container{max-width:100%}section#content article{padding:1.25rem 0;border-bottom:.125rem solid #fff}section#content article h3{margin:0}section#content article small{display:block;margin-bottom:1.25rem}section#content article .btn{margin-bottom:0}#social{z-index:1}#social ul{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-pack:distribute;justify-content:space-around;margin:0;width:100%}#social ul li{display:inline-block}#social ul li a{font-size:2rem;color:#6169ed;transition:color .3s ease-in-out}#social ul li a:focus,#social ul li a:hover{color:#d5ede0}@media (min-width:768px){#social{position:absolute;right:0;min-height:100vh;width:auto;background-color:transparent}#social ul{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100vh;padding-right:1.25rem;list-style:none;text-align:left}#social ul li{display:block}}section#banner{position:relative;min-height:100vh}section#banner .container,section#banner .row{height:100vh}section#banner .container .col,section#banner .row .col{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}section#banner .container .col svg,section#banner .row .col svg{display:block;max-width:40.625rem}section#banner .container .col svg #sun,section#banner .row .col svg #sun{fill:#6169ed;-webkit-animation:sunrise 4s;animation:sunrise 4s}@-webkit-keyframes sunrise{0%{fill:rgba(97,105,237,0)}10%{fill:rgba(97,105,237,.1)}20%{fill:rgba(97,105,237,.2)}30%{fill:rgba(97,105,237,.3)}40%{fill:rgba(97,105,237,.4)}50%{fill:rgba(97,105,237,.5)}60%{fill:rgba(97,105,237,.6)}70%{fill:rgba(97,105,237,.7)}80%{fill:rgba(97,105,237,.8)}90%{fill:rgba(97,105,237,.9)}100%{fill:#6169ed}}@keyframes sunrise{0%{fill:rgba(97,105,237,0)}10%{fill:rgba(97,105,237,.1)}20%{fill:rgba(97,105,237,.2)}30%{fill:rgba(97,105,237,.3)}40%{fill:rgba(97,105,237,.4)}50%{fill:rgba(97,105,237,.5)}60%{fill:rgba(97,105,237,.6)}70%{fill:rgba(97,105,237,.7)}80%{fill:rgba(97,105,237,.8)}90%{fill:rgba(97,105,237,.9)}100%{fill:#6169ed}}section#banner .container .col svg #hero,section#banner .row .col svg #hero{fill:#ecc2c4}section#banner .container .col svg #innercape,section#banner .row .col svg #innercape{fill:#ffffd9}section#banner .container .col svg #shadows,section#banner .row .col svg #shadows{fill:#ecc2c4}section#banner .container .col svg #outrcape,section#banner .row .col svg #outrcape{fill:#fb7263}section#banner .container .col a>i,section#banner .row .col a>i{font-size:5rem;color:#d5ede0;transition:all .3s ease-in-out}section#banner .container .col a>i:focus,section#banner .container .col a>i:hover,section#banner .row .col a>i:focus,section#banner .row .col a>i:hover{color:#6169ed}section#portfolio article:not(.content){position:relative;-ms-flex-preferred-size:100%;flex-basis:100%;text-align:center;background-color:#d1e9dc}section#portfolio article:not(.content) img{display:block;margin:0 auto;width:100%;height:auto}section#portfolio article:not(.content) .portfolio-desc{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);height:70%;width:100%;transition:all .3s ease-in-out;background-color:rgba(251,114,99,.5)}section#portfolio article:not(.content) .portfolio-desc h3{display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);margin:0;color:#ffffd9;text-align:center;width:60%}section#portfolio article:not(.content) .portfolio-desc h3:before{display:block;content:"";background-image:url(../heronamedharley/assets/img/icons/portfolio-hero.svg);background-position:center;background-repeat:no-repeat;width:100%;height:44px;border-bottom:.125rem solid #fff}section#portfolio article:not(.content) .portfolio-desc h3:after{display:block;content:"";position:absolute;top:0;left:0;bottom:0;right:0;width:100%;overflow:visible;border-bottom:.125rem solid #fff}@media (min-width:768px){section#portfolio article:not(.content){-ms-flex-preferred-size:50%;flex-basis:50%}section#portfolio article:not(.content) .portfolio-desc{opacity:0;height:100%;background-color:rgba(251,114,99,.85)}section#portfolio article:not(.content) .portfolio-desc h3{background-color:transparent}section#portfolio article:not(.content):focus .portfolio-desc,section#portfolio article:not(.content):hover .portfolio-desc{opacity:1}}section#portfolio .content{position:relative;-ms-flex-preferred-size:100%;flex-basis:100%;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;padding:2.5rem;z-index:99;min-height:9.375rem}section#portfolio .content h3{display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-size:calc(2.6875vw + 13.4px);font-family:"Rozha One",serif;line-height:1.2;color:#ecc2c4;text-align:center;width:70%}@media (max-width:320px){section#portfolio .content h3{font-size:22}}@media (min-width:1920px){section#portfolio .content h3{font-size:65}}@media (min-width:768px){section#portfolio .content{-ms-flex-preferred-size:50%;flex-basis:50%;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}}section#contact p{color:#e6e6e6;margin-bottom:2.5rem}section#contact ul{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;list-style:none}section#contact ul li{display:inline-block;font-size:2.75rem;color:#fb7263}section#contact ul li a{text-decoration:none;color:#fb7263;transition:color .3s ease-in-out}section#contact ul li a:focus,section#contact ul li a:hover{color:#ecc2c4}footer .container{padding:.9375rem 1.25rem}footer .container h3{display:block;margin:0;font-family:monospace;font-size:.625rem;line-height:1;color:#151fb9}