:root  { 
	/*CSS Custom Properties (variables) */
	--background:#02131b;
	--primary:#30403f;
	--secondary:#5b7065;
	--teritary:#c9d1c8;
	--accent:#444;
	--text-1: #fff;
	--text-2: #000;
}

body  {background:var(--background); box-sizing:border-box; color:var(--text-1); font:18px/1.4em 'Raleway', sans-serif; margin:0; width:100%;}
a  {color:var(--text-1); text-decoration:underline}
a:hover  {text-decoration:none}
h1  {font:5vw/1em 'Syncopate', sans-serif; margin:0 0 0.167em; text-align:center; color:var(--text-2); text-shadow:0px 1px 1px rgba(255,255,255,0.5);}
h4 {font-family:'Raleway', sans-serif; font-size:1.25em;}
input,
textarea  {display:block; background:var(--teritary); font:1em/1.214em Arial, Helvetica, sans-serif; color:var(--accent); width:100%; padding:0.75em 1.5em; border:1px solid #505762; margin:0; resize:none; border-radius:1.5em;}

.btnSmall {background:var(--primary); border:0; border-radius:1.25em; color:var(--text-1); display:block; font-size:1em; text-align:center; text-decoration:none; padding:1em 2em;}
.btn:hover{background:var(--secondary); color:var(--text-2);}
.btnSmall:hover{background:#bcbcbc}
.content  {margin-left:5vw;}
.dark  {color:var(--text-2); text-shadow:0px 1px 1px #fff;}
.formRow  {width:90%; margin:0 0 1.5em}
.img-r  {max-width:220px; width:100%;}
.light {color:var(--teritary);  text-shadow:0px 1px 1px #000;}
.sitename  {color:var(--text-2); font-size:8vw; margin:.125em; padding-top:.25em; /*text-shadow:-2px -3px 10px rgba(0,0,0,0.7);; background-clip: text;*/}
.subHeading{color:var(--text-1); display:block; font:1em/.75em 'Raleway', sans-serif; margin:0 0 1em; text-align:center;}
.textField  {border-radius:2em; overflow:hidden; border:1px solid #505a68; background:var(--teritary); font-weight:bold; padding:0.25em;}
.top-photo  {background:#000; text-align:right;}

/* Content Sections */
.header {grid-area:header; background:var(--teritary); text-align:center;}
.about {grid-area: about; background:var(--primary); border-bottom:1px; border-bottom-style:solid; border-bottom-color:var(--teritary); padding:2em;}
.accomp {grid-area:accomp; background:var(--secondary); color:var(--text-2); padding:2em 2em 0 2em;}
.accomp1 {grid-area:accomp1; background:var(--secondary); color:var(--text-1); padding:0 .5em 0 4em;}
.accomp2 {grid-area:accomp2; background:var(--secondary); color:var(--text-1); padding:0 2em 0 4em;}
.accomp3 {grid-area:accomp3; background:var(--secondary); color:var(--text-1); padding:0 2em 2em 4em;}
.port {grid-area:port; background:var(--primary); color:var(--text-2); padding:2em 2em 0;}
.port1 {grid-area:port1; background:var(--primary); color:var(--text-1); padding:0 4em;}
.port2 {grid-area:port2; background:var(--primary); color:var(--text-1); padding:0 4em;}
.port3 {grid-area:port3; background:var(--primary); color:var(--text-1); padding:0 4em;}
.port4 {grid-area:port4; background:var(--primary); border-bottom:1px; border-bottom-style:solid; border-bottom-color:var(--teritary); color:var(--text-1); padding:0 2em 2em 2em;}
.contact {grid-area:contact; background:var(--secondary); padding:2em;}
footer {grid-area:footer; color:var(--text-1); font-size:.8em; line-height:.75em; margin:auto; padding:2em 0; text-align:center; width:100%;}
.space-left  {grid-area:space-left; background:var(-background); color:var(--text-2)}
.space-right  {grid-area:space-right; background:var(-background); color:var(--text-2)}


main {display:grid; grid-gap:0;
  grid-template-columns:1em 1fr 1em;
  grid-template-areas: 
    "space-left header space-right"
	"space-left about space-right"
    "space-left accomp space-right"
	"space-left accomp1 space-right"
	"space-left accomp2 space-right"
	"space-left accomp3 space-right"
    "space-left port space-right"
	"space-left port1 space-right"
	"space-left port2 space-right"
	"space-left port3 space-right"
	"space-left port4 space-right"
    "space-left contact space-right"
    "space-left footer space-right";
}

@media (min-width: 650px) {
  h1 {font-size:2.25rem;}
  main {
    grid-template-columns:2em 1fr 1fr 2em;
    grid-template-areas: 
      "space-left header  header space-right"
      "space-left about about space-right"
      "space-left accomp accomp space-right"
      "space-left accomp1 accomp2 space-right"
      "space-left accomp3 accomp3 space-right"
	  "space-left port port space-right"
	  "space-left port1 port2 space-right"
	  "space-left port3 port4 space-right"
	  "space-left contact contact space-right"
	  "space-left footer footer space-right"
  }
  .about {padding:2em 4em;}
  .accomp2 {padding: 0 0 0 1em;}
  .content  {margin-left:4vw;}
  .port1, 
  .port2, 
  .port3 {padding:0 2em;}
  .sitename  {font-size:8vw;}
  .top-photo  {float:right; padding-left:1em;}
}

@media (min-width: 1050px) {
  h1 {font-size:2.5rem;}
  main {
    max-width:1200px;
	margin:auto;
	grid-template-columns:3em 1fr 1fr 1fr 3em;
    grid-template-areas: 
      "space-left header  header  header space-right"
      "space-left about about about space-right"
	  "space-left accomp accomp accomp space-right"
      "space-left accomp1 accomp2 accomp3 space-right"
	  "space-left port port port space-right"
	  "space-left port1 port2 port3 space-right"
	  "space-left port4 port4 port4 space-right"
	  "space-left contact contact contact space-right"
	  "space-left footer footer footer space-right"
   }
  .about {padding:2em 8em 1em 8em;}
  .port3 {padding:0 2em 0 0;}  
  .sitename  {font-size:6rem;}
}