:root {
  --main-color: teal;

  --larger: 3em;
  --large: 2em;
  --big: 1.5em;

}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  line-height: 1.5;
}

/* header section */

a {
  padding-left: 30px;
  padding-right: 30px;
}

nav {
  justify-content: space-between;
  padding-top: 50px;
  font-size: 1.2em;
  flex-wrap: wrap;
}

h1 {
  background-color: white;
  text-align: right;
  color: black;
  font-size: 3em;
  width: 500px;
  border: 50px teal solid;
  padding-right: 10px;
}

header {
  display: flex;
  justify-content: space-between;
  background-color: teal;
  height: 180px;
}

/* hero image */

.hero-banner {
  position: relative;
  background-image: 
    linear-gradient( rgba(110, 199, 235, 0.5), rgba(100, 222, 238, 0.5) ),
    url(../images/02-hero-bg.jpg);
  height: 400px;
  background-size: cover;
}

.hero-banner h2 {
  display: inline-block;
  position: absolute;
  bottom: 50px;
  right: 50px;
  width: 500px;
  background-color: rgb(255, 255, 255);
  font-size: 3em;
  text-align: right;
}

/* main structure with flexbox */

main {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

main > h2 {
  width: 35%;
  font-size: var(--larger);
  text-align: right;
  padding-left: 50px;
  padding-right: 50px;
  border-right: solid 5px black;
}


div {
  width: 65%;
  float: left;
}

main {
  padding-top: 50px;
}

/* works with CSS Grid */

#workGrid {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 
  "surf surf"
  "led calc"
  "puzzle run";
  padding: 10px;
  width: auto;
  row-gap: 10px;
  column-gap: 10px;
}

#surf {
  grid-area: surf;
  background-image: url("../images/02-portfolio-4.jpg");
  height: 250px;
  width: 100%;
  background-size:cover;
}

#led {
  grid-area: led;
  background-image: url("../images/02-portfolio-1.jpg");
  width: 100%;
  background-size: cover;
}

#calc {
  grid-area: calc;
  background-image: url("../images/02-portfolio-2.jpg");
  width: 100%;
  background-size: cover;
}

#puzzle {
  grid-area: puzzle;
  background-image: url("../images/02-portfolio-3.jpg");
  width: 100%;
  background-size: cover;
}

#run {
  grid-area: run;
  background-image: url("../images/02-run-buddy.jpg");
  width: 100%;
  background-size: cover;
}

.workGridCell {
  background-image: linear-gradient(rgba(110, 199, 235, 0.5), rgba(100, 222, 238, 0.5));
  border: 5px aquamarine solid;
}

.workGridCell:hover {
  cursor: pointer;
  transition: all 0.5s ease-in-out;
  box-shadow: inset 0px 0px 8px rgba(232, 102, 236, 1), 0 0 15px rgba(232, 102, 236, 1);
}

.cellTitle {
  background-color: aquamarine;
  position: relative;
  width: 200px;
  top: 50px;
  padding: 10px;
}

.cellTitle h4 {
  font-size: 1.5em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

p {
  margin: 0;
  padding: 20px;
}

footer > p {
  text-align: center;
  margin: 0 auto;
  padding-top: 100px;
}