body{
  margin: 0;
  padding: 0;
  font-family: 'Reem Kufi', sans-serif;
  background-color: #34675C;
}
#navbar{
  position: fixed;
  width: 100%;
  height: 20px;
  top: 0px;
  padding: 20px;
  background-color: #B7B8B6;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
#navbar a{
  text-decoration: none;
  color: black;
}
#navbar a:hover{
    font-weight: bold;
}
#myName{
  font-size: 25px;
  
}
#profile-link{
  padding-right: 50px;
}
#welcome-section{
  display: grid;
 grid-template-rows: 1fr 1fr;
  grid-template-areas:
    'title hiking'
    'description hiking';
  width: 100vw;
  justify-items: center;
  align-items: flex-start;
  grid-gap: 0;
}

#hiking{
  width: 55vw;
  height: auto;
  grid-area: hiking;
}
#title{
  grid-area: title;
  font-size: 100px;
  align-self: end;
    padding-top: 50px;
  margin-top: 00px;
  
}
#description{
  grid-area: description;
  font-size: 50px;
  background-color: #B3C100;
  padding-left: 15px;
}

@media screen and (max-width: 800px){
    #navbar{
        height: 100px;
        font-size: 15px;
        padding: 5px;
    }
    #welcome-section{
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-areas:
            'hiking'
            'title'
            'description';
        height: 120vh;
    }
    #hiking{
        margin-top: 110px;
        width: 100vw;
    }
    #title{
        font-size: 70px;
        align-self: flex-start;
    }
    #description{
        font-size: 40px;
        padding: 20px;
    }
}


.backcolor-pine{
  background-color: #B3C100;
}
#showcase{
  width: 100%;
  border-radius: 25%;
  grid-area: showcase;
}
#showcase:hover {
    webkit-filter: blur(4px); /* Chrome, Safari, Opera */
    filter: blur(4px);
}

#project-p{
  grid-area: project-p;
  background-color: #B3C100;
  font-size: 30px;
  padding: 1vw;
}
.project-tile {
  display: grid;
  grid-template-areas:
    'showcase project-p';
  align-items: center;
}
h2{
  padding-top: 100px;
  text-align: center;
  font-size: 50px;
 
}
#slc1 {
  width: 100%;
  border-radius: 25%;
  grid-area: slc1;
}
#slc1:hover {
    webkit-filter: blur(4px); /* Chrome, Safari, Opera */
    filter: blur(4px);
}

#project2-p{
  grid-area: project2-p;
   background-color: #B3C100;
  font-size: 30px;
  padding: 1vw;
}
.project-tile2 {
  display: grid;
  grid-template-areas:
    'project2-p slc1';
  align-items: center;
}
#background{
  text-align: center;
  width: 100%;
}
#bio{
 text-align: center;
  padding: 30px 50px;
  margin: 0 200px;
  background-color: #4CB5F5;
  font-size: 25px;
  border-radius: 2% 2% 0 0;
}
#bio a{
  color: black;
  font-style: italic;
}
@media screen and (max-width: 800px){
    .project-tile{
        grid-template-areas:
            'showcase'
            'project-p';
    }
    .project-tile2{
        grid-template-areas: 
            'slc1'
            'project2-p';
    }
    #showcase{
        border-radius: 0;
    }
    #slc1{
        border-radius: 0;
    }
    #bio{
        margin: 0 10px;
    }
    h2{
  padding-top: 100vh;
  text-align: center;
  font-size: 50px;
 
}
}