* {
  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;
  height: 100svh;
}

a {
  text-decoration: none;
}
.hero-banner{
top: 0;
background-image: url('../images/02-hero-bg.jpg');
position: relative;
background-size: cover;
color: white;
height: 15%;
overflow: hidden;
}
header{
  display: flex;
  margin-bottom: 0;
  width: 100%;
  justify-content: space-between;
  background-color: rgb(47, 47, 103);
  
  
}
img{
  height: 200px;
}
ul{
  list-style: none;
  display: flex;
  
}
li{
  margin-left: 50px;
  margin-bottom: 30px;
  margin-bottom: 0px;
  color: black;
  border-bottom: 5px solid rgb(47, 47, 103);
}
nav a {
  text-decoration: none;
  color: rgb(101, 181, 181);
}

h1{
  background-color: rgb(101, 181, 181);
  color: rgb(47, 47, 103);
  padding-left: 50px;
  width: 13%;
}
header ul{
  display: flex;
  list-style: none;
  margin-right: 60px;


  
}
header ul li{
  color: rgb(124, 213, 213);
  margin-left: 15px;
  padding: 4px;
  width:90px;
  justify-content: center;
  border-bottom: 5px solid;

}
.overlay{
  top: 0;
  left:0;
  position:absolute;
  background: rgb(14, 30, 53);
  opacity: 50%;
  height: 100%;
  width: 100%;
}
.overlay-child{
   top: 0;
   left: 0;
    position: absolute;
    background: rgb(14, 30, 53);
    opacity: 50%;
    height: 500px;
    width: 600;
}


h2{
  background-color: rgb(101, 181, 181);
    color: rgb(47, 47, 103);
    padding-left: 50px;
    width: 22%;position: relative;
    float: right;
    margin-right: 20px;
}

h3{
  font-size: 24px;
  font-weight: 800;
  width: 200%;
  height:100%;
  
}
#lbord{
  width: 15%;
  border-right: 5px solid;
  margin-right: 25px;
  margin-bottom: 20px;
  color: rgb(47, 47, 103);;
}
#about{
  display: flex;
  margin-left: 30px;
  margin-top: 80px;
  
}
#work{
  display: flex;
  margin-left: 30px;
  margin-top: 80px;
}
#contact{
  display: flex;
  margin-left: 30px;
  margin-top: 80px;

}
#contact ul {
float: inherit;
}
p {
  margin-left: 40px;
  width: 35%;
}
h4{
  font-size: 24px;
  font-weight: 800;
}
h5{
  font-size: 24px;
  font-weight: 800;
}
h6 {
  margin: 0;
}

p {
  margin: 0;
}
.parent
{
  display: grid;
  grid-template-rows: 500px 100px 100px;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  grid-template-areas: 
  'c1 c1'
  'c2 c3'
  'c4 c5'
  ;
}

.child{
  border: 4px solid rgb(101, 181, 181);
  cursor: pointer;
}

#c1{
  grid-area: c1;
  background-image: url('../images/02-hero-bg.jpg');
  background-position: center;
  width: 800px;
}

#c2 {
  grid-area: c2;
  background-image: url('../images/02-portfolio-1.jpg');
}
#c3 {
  grid-area: c3;
  background-image: url('../images/02-portfolio-2.jpg');
}
#c4 {
  grid-area: c4;
  background-image: url('../images/02-portfolio-4.jpg');
}
#c5 {
  grid-area: c5;
  background-image: url('../images/02-run-buddy.jpg');
}
.h1-like{
  display: flex;
  font-size: 20px;
    font-weight: 800;
    text-wrap: wrap;
    width: 200px;
}
#options{
  
  background-color: rgb(101, 181, 181);
    color: rgb(47, 47, 103);
    padding-left: 50px;
    width: 250px;
    height: 60px;
    position: relative;
    margin-top: 5%;

}
#options p{
  width: 200px;
}