/* genera; */
html {
   width: 100%;
   height: 100%;
   display: flex;
   background-color: cadetblue;
   margin: 0px;
   padding: 0%;
}

body {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   margin: 0px;
   align-items: center;
   background-color: white;
}

nav {
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 10%;
   background-color: cadetblue;
   align-items: flex-end;
   justify-content: center;

}

footer {
   width: 100%;
   height: 10%;
   background-color: cadetblue;
   color: white;
   font-size: 20px;
   font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   display: flex;
   flex-direction: column;
   justify-items: center;
   padding-left: 3%;
   padding-top: 1%;
   position: absolute;
   margin-top: 47%;
   padding-bottom: 1%;

}

footer-2 {
   width: 100%;
   height: 10%;
   background-color: cadetblue;
   color: white;
   font-size: 20px;
   font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   display: flex;
   flex-direction: column;
   justify-items: center;
   padding-left: 3%;
   padding-top: 1%;
   padding-bottom: 1%;

}
a {
   color:white;
   text-decoration: none;
}

nav li {
   display: inline-block;
   font-family: sans-serif;
   font-weight: bold;
   margin: 10px;
   user-select: none;
   color:white;
   font-size: 18px;
   text-shadow: 1px 1px black;
}

nav li:hover {
   text-decoration: underline;
}

nav ul{
   display: flex;
   width: 375px;
   margin-right: 3.5%;
}


nav.fixed_nav{
   position: fixed;
}


/* specific home*/
#main {
   display: flex;
   flex-direction: row;
   width: 100%;
   height: 80%;
   position: absolute;
   margin-top: 5.2%;


}

#left {
   display: flex;
   flex-direction: column;
   width: 20%;
   height: 100%;
   align-items: center;
   border-right: 8px solid cadetblue;
}

#profile  {
   margin-top: 10%;
   width: 180px;
   border-radius: 50%;
   height: 240px;
   border: 4px solid cadetblue;
   margin-bottom: 0%;
}


#greeting {
   margin: 0px;
   color: cadetblue;
   font-weight: bold;
   font-size: 20px;
}

#aboutme {
   display: flex;
   flex-direction: column;
   width: 80%;
   margin-top: 0px;
   height:40%;
   font-size: 20px;
   margin-bottom:  10px;
   margin-top: 10%;

}

#text a {
   color: blue;
}

#icons {
   width: 100%;
   height: 30%;
   display: flex;
   justify-content: center;
   align-items: center;
}

#github{
   width:70px;
   height:80px;
}

.icon-pic {
   width:60px;
   height:60px;
   margin-left: 10px;

}

#right {
   display: grid;
   width: 80%;
   height: 100%;
   overflow-y:auto;
   grid-template-rows: repeat(2, 60%); /*60*/
   grid-template-columns: repeat(3, 33.5%);
   justify-items: center;   
   align-items: center;
   position: relative;
}

.project{
   border: 2px solid cadetblue;
   width: 85%;
   height:90%;
   display: flex;
   flex-direction: column;
   box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 16px 0 rgba(0, 0, 0, 0.4);

}

.project a {
   width:100%;
   height:60%;
   display: flex;

}

.project img{
   width:100%;
   height:100%;
   border-top: 2px solid cadetblue; 
}

.title-project {
   width: 100%;
   height:15%;
   display: flex;
   flex-direction: column;
   font-weight: bold;
   align-items: center;
   justify-content: center;
   font-size: 30px;
}

.description {
   width: 100%;
   height: 25%;
   background-color: rgba(95, 158, 160, 0.392);
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   font-size: 16px;
}
.description b{
   margin-top: 0%;
}
/* resume page */
#resume {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 78.5%;
}

/* bio page */
#bio {
   display: flex;
   flex-direction: row;
   padding-top: 2%;
   justify-content: center;
   width: 100%;
   height: 78.5%;
   overflow-y:auto;

}

#text-bio {
   display: flex;
   flex-direction: column;
   width: 70%;
   height: 80%;
   color: rgb(75, 127, 129);
   align-items: center;


}

#long-bio {
   display: flex;
   width: 100%;
   margin-top: 2%;

}

#text-bio img{
   display: flex;
   width: 300px;
   height: 400px;
   margin-right: 3%;
   box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 16px 0 rgba(0, 0, 0, 0.6);

}

#long-bio p{
   display: flex;
   /* border: 3px solid red; */
   width: 55%;
   margin-right: 3%;
   color: black;
   margin-top:0%;
   height: 100%;
   font-size: 17px;
}

#personal-information {
   display: flex;
   flex-direction: column;
   /* border: 3px solid red; */
   width: 25%;

}

#personal-information h3{
   margin-top: 0px;

}

#personal-information span{
   width: 100%;
   color: black;

}

#personal-information a{
   width: 100%;
   color: black;
   text-decoration: underline;
}
/*contact page*/
#contact {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 78.5%;
   background-color: cadetblue;
}
#contact-me{
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width:97%;
   height:100%;
   background-color: white;
   font-size: 30px;
   color:rgb(100, 99, 99);

}

#contact-me h1{
   font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   font-size: 60px;
   color: rgb(75, 127, 129);
   margin: 0;
}

#contact-me p{
   margin-top: 3%;
}


#contact-apps {
   display: flex;
   justify-content: center;
   margin-top: 0%;
   height: 30%;
   width: 50%;
   gap:70px;
}

#contact-apps img {
   width: 90px;
   height: 90px;
}

/* project */

#main-project {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 77%;

}

#project-pic {
   margin-top: 5%;
   width:80%;
   height: 38%;
   border: 2px solid cadetblue
}

#left h1 {
   margin-top: 20%;
}

#left button {
   margin-top: 10%;
   height:5%;
   border-radius: 7px;
}

#right-project {
   margin-top: 3%;
   display: flex;
   height: 90%;
   width: 78.5%;
   overflow-y:auto;
}

#project-text {
   width: 50%;
   margin-left: 7%;
   height: 300%

}

#project-text-2 {
   width: 50%;
   margin-left: 7%;
   height: 270%
}

#project-icons {
   margin-top: 3%;
   width: 5%;
   margin-left: 5%;
}

#project-icons img{
   width: 100%;
}

#project-text a{
   color:blue;
   text-decoration: underline;   
}

#project-text img{
   width: 400px;
   height: 300px;
}

#project-text-2 img{
   width: 250px;
   height: 500px;
}

/*media*/
@media only screen and (max-width: 700px) {
   #left {
      display: none;
   }

   #right {
      display: grid;
      width: 100%;
      height: 100%;
      overflow-y:auto;
      grid-template-rows: repeat(6, 70%); /*60*/
      grid-template-columns: repeat(1, 100%);
      justify-items: center;   
      align-items: center;
      position: relative;
   }

   #right-project {
      margin-top: 3%;
      display: flex;
      height: 90%;
      width: 100%;
      overflow-y:auto;
   }

   #project-text {
      width: 80%;
      margin-left: 7%;
      height: 300%
   
   }
 }


 @media only screen and (max-height: 800px) {

   #profile  {
      display: None;
   }
   #right {
      display: grid;
      width: 80%;
      height: 100%;
      overflow-y:auto;
      grid-template-rows: repeat(3, 90%); /*60*/
      grid-template-columns: repeat(2, 50%);
      justify-items: center;   
      align-items: center;
      position: relative;
   }

   #right-project {
      margin-top: 3%;
      display: flex;
      height: 90%;
      width: 100%;
      overflow-y:auto;
   }

   #project-text {
      width: 80%;
      margin-left: 7%;
      height: 300%
   
   }
 }