* {padding: 0px; margin: 0px;}

html, body {
  width: 100%;
   scroll-behavior:smooth;
   transition: 500ms;
 }

.header { 
    min-height: 100vh;
    width: 100%;
    background-color: #a1a1a1a1;
    background-image: url(./images/pexels-ylanite-koppens-1906440.jpg) ;
    background-position: center;
    background-size: cover; position: relative;
}

nav {display: flex; padding: 2% 4%; 
    justify-content: space-between;
    align-items: center;
}
nav img { padding: 0px;
    height: 60px; width: 60px;
}
.nav-links { 
    flex: 1;
    text-align: right; 
    right: -200px;
 }

 .nav-links ul li {
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    text-decoration: none; 
 }

 .nav-links ul li a{
    color: rgb(238, 198, 145);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-decoration: none;
 }

 .nav-links ul li ::after{
        content: '';
        width: 0%;
        height: 2px;
        background: #f44266;
        display: block;
        margin: auto;
        transition: 0.5s;

 }
 .nav-links ul li :hover::after{
    width: 100%; 
 }
.skills { 
    color: rgb(87, 88, 66);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding-top: 10vh;
    text-align: center;
}
.skills h1{
    font-size: 50px;
}
.skills p {
   font-weight: 400;
   font-size: 25px;
}

 .btn {
    padding: 8px;
    font-size: 25px;
    text-decoration: none;
    color: rgb(211, 160, 93);
    border: 2px solid rgb(153, 133, 69); 
 }
 .btn:hover {
   color: #e4e0e0;
    transition: 200ms;
    border: 3px solid;
    background-color: rgb(231, 188, 108);
 }
 #inc-btn { position: absolute;
       bottom: 20px; right: 20px;
       padding: 10px; font-size: 20px;
       background-color: #e2dd96; 
       border-color: #ece46e; border-radius: 8px;
 }
 #inc-btn:hover {
       color: rgb(177, 105, 12);
  }

 nav .fa {
   display: none;
}

.studies {
   padding-top: 20px;
   padding-left: 150px;
   height: 100vh;
   width: auto;
   background-image: url(./images/pexels-andreea-ch-1166643.jpg);
   background-position: center; background-size: cover; position: relative;
}
.edu {
    /* text-align: center; */
    
    color: rgb(87, 88, 66);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 10vh; 
}
.eduHead{
   
    font-size: 50px;
    padding-top: 150px;
}
.eduDef {
    
    font-size: 20px;
    padding-top: 20px;
}

.eduBtn {
   margin-left: 50px;
   padding: 8px;
   font-size: 25px;
   text-decoration: none;
   color: rgb(211, 160, 93);
   border: 2px solid rgb(153, 133, 69); 
}
.eduBtn:hover {
   transition: 200ms;
   border: 3px solid;
}

.about {
   text-align: center;
   background-image: url(./images/flora.jpg);
   background-position: center; 
   background-size: cover; position: relative;
   min-height: 100vh;
   width: 100%;
}
.hd1 {
   color: rgb(92, 89, 89);
   font-size: 50px;
}
.hdmain { font-size: 35px; padding-left: 300px;}
.info {
   margin-top: 7%;
   display: flex;
   padding-left: 400px; padding-right: 50px;
   justify-content: space-between;
}
.col {
   background: #e4e0e0;
   max-width: 25%;
   padding: 10px;
   border-radius: 10px; box-shadow: 10px grey;
   transition: 500ms;
}
.col:hover{
   background: #e4e0e0;
   transition: 500ms;
   box-shadow: 0 0 20px 0 rgb(145, 143, 143);
}
.last {
   background-color: #e4e0e0;
   width: 100%;
}
.contactinfo {font-size: 35px; padding: 10px;}
.image { display: flex;
   flex-basis: 32%; }
.cont{
      text-align: center; 
   font-size: 35px;
   padding:50px 0px 10px 0px; }

.imgcol {
   min-height: 85vh;
   position: relative;
 }
 .imgcol img{ 
  
   margin-left: 100px;
   height: 500px;
   width: 300px;
   opacity: 50%;
   border-radius: 10%;
 }
  .layer{
   border-radius: 10%;
   text-align:center;
   flex-basis: 32%;
   position: absolute; top: 0%; left: 0%;
   margin-left: 100px;
   height: 500px;
   width: 300px;
   background: #d4002a;
   opacity: 0%;
 } 

 .layer:hover  {
   opacity: 80%;
   transition: .5s;
 }
 .layer p{ 
   font-family:cursive;
   font-size: 40px;
   font-weight: 200px;
   color: antiquewhite;
   transform: translate(-50%); 
   bottom: 0; 
   left: 50%;
   position: absolute; top: 100%; left: 50%;

}

.layer:hover p{ 
   
   position: absolute; top: 40%;
   transition: 500ms;

}
/* PEOPLE */
.people {
   background-image: url(./images/reviewback.jpg);
   background-size: 100%; background-position: center; position: relative;
   width: 100%;
   min-height: 105vh;
   font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
 }
 .ppl-header {
   text-align: center;
   padding: 50px ;
 }
 .ppl-header h2 { font-size: 50px; color: #504e4e;}
.ppl-head{ font-size: 35px; color: #666060;}


 .ppl-page {
   display: flex;
   /* flex-wrap: wrap; */
   justify-content: center;
 }
 
 .review {
   margin: 10px;
   flex-basis: 25%;
   padding: 20px;
   background-color: #e7e7e7 ; 
   box-shadow: 10px 10px 20px 0 rgb(129, 129, 129);
   border-radius: 10%;
 }
 
 .ppl-name{  font-size: 30px; font-weight: 400px;}
 
 .review img {
   float: left; width: 70px; height: 70px; padding: 10px 20px 10px 10px;
   height: 50px;
   width: 50px;
   border-radius: 50%;
 }
.ppl-text { font-size: 15px; margin-top: 10px;}











 @media (max-width: 700px){
    .skills h1{font-size: 25px; }
    .skills p{font-size: 15px; }
    .btn {font-size: 15px;}
    .nav-links ul li {display: block;}
    .nav-links {
      height: 100vh; width: 150px; z-index: 2; 
     text-align: left;   top: 0px; right: -150px;
     position: absolute; background-color: #8d8b8b; opacity: 0.9;  
     transition: 1s;}

    nav .fa { display: block; font-size: 20px; color: #fff; margin: 10px; cursor: pointer;}  
    
    .studies{padding: 10px; }
    .eduHead{ font-size: 25px; margin: 0%;}
    .eduDef { font-size: 15px; }

    .info {flex-direction: column; 
      padding-left: 10px; 
      padding-right: 10px;}
    .col {
      max-width: 100%;
      font-size: 15px;
    }
    .about{
      margin: 0px;
      padding: 0px;
    }
    .hdmain h1 { font-size: 25px; }
    .hdmain {
      padding: 0px;
      font-size: 15px;
      font-size: large;
    }
    .hd1 {
      font-size: 25px;
    }
   .image {flex-direction:column ;}
   .imgcol img{ 
      height: 300px;
      width: 300px;    
 }

 .layer{ 
   height: 300px;
   width: 300px;
   position: absolute; top: 0%; left: 0%;
  
   }

   .cont{
      font-size: 25px;
       }
   .contactinfo{font-size: 25px;}
   .imgcol {
      min-height: 65vh;
      position: relative;
    }
    .ppl-header h2 { font-size: 25px; }
.ppl-head{ font-size: 20px;}
    .ppl-page {
      flex-direction: column;
    }

 }