* { margin:0; padding:0; }


html, body {
  display: flex;
  display: -webkit-inline-box;
  min-height: 100%;
  /*max-height: 100%;*/
  flex-direction: column;

  min-width: 100%;
  max-width: 100%;
  font-family: "Graphik Meetup",helvetica,arial,sans-serif;
  font-weight: 600;
  min-width: 320px;
}


.window{
  display: flex;
  flex-direction: column;
  min-width: 100%;
  min-height: 100%;
  height: 100%;
  /*background-color: green;*/
}

.header{
  display: flex;
  min-height: 50px;
  min-width: 320px;
  max-height: 50px;
  flex-direction: row;
  background-color: red;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  /*background-color: transparent;*/
  background-color: white;
  border-bottom: 1px lightgray solid;
  justify-content: space-between;

}

.nav-bar{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
  align-items: center;
  max-width: 300px;
  font-weight: 100;
}

.nav-item:hover{
  cursor: pointer;
  background: black;
  color: white;
}

.nav-item{
  font-weight: lighter;
}

.name{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 10px;
  font-weight: 400;
  min-width: 140px;

  /*color: gray;*/

}


.container{
  display: flex;
  box-sizing: border-box;
  /* padding: 100px 0 0 0; */
  flex-direction: column;
  /*min-height: 100%;*/
  max-height: 100%;
  /* background-color: red; */
  background-color: rgb(255, 150, 150);
  background-color: white;
  /*justify-content: center;
  padding-top: 10%;*/
  /* background-image: url('http://res.cloudinary.com/dxeyfggji/image/upload/v1520425696/222ffa101dc6561d6e254cc65174b76d.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-origin: content-box; */

}

.b-image{
  background-image: url('http://res.cloudinary.com/dxeyfggji/image/upload/v1520427619/2657ac473429f65.jpg');
  /* background-image: url('http://res.cloudinary.com/dxeyfggji/image/upload/c_scale,h_80/v1520427846/San-Francisco-Skyline-2016011246.svg'); */
  background-image: url('http://res.cloudinary.com/dxeyfggji/image/upload/v1522980611/art-background-backlit-333850.jpg');
  /* background-image: url('http://res.cloudinary.com/dxeyfggji/image/upload/v1515112571/faad9750b04c3e5cc6b889eccfe1487e.jpg'); */
/* background-image: url('http://res.cloudinary.com/dxeyfggji/image/upload/v1522981012/asia-japan-japanese-590478.jpg'); */
/* background-image: linear-gradient(rgba(255,255,255,0.1),rgba(255,255,255,0.1)),url('http://res.cloudinary.com/dxeyfggji/image/upload/v1522981012/asia-japan-japanese-590478.jpg'); */

/* background-image: url('http://res.cloudinary.com/dxeyfggji/image/upload/v1522987391/ancient-architecture-asia-301614.jpg'); */

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-origin: content-box;
  /* min-height: 100%; */
  min-width: 100%;
  display: flex;
  box-sizing: border-box;
  /* padding: 320px 0 0 0; */
}

.banner{
  position: relative;
  display: flex;
  width: 100%;
  background-color: white;
  min-height: 800px;
  /* top: 50px; */
  /* opacity: 0.4; */
}
.project-section{
  display: flex;
  width: 100%;
  min-height: 500px;
  /*background-color: purple;*/
  flex-direction: column;
}

.footer{
  display: flex;
  flex-direction: row;
  /*min-height: 10%;
  max-height: 10%;*/
  min-height: 80px;
  height: 80px;
  /*justify-content: center;*/
  /* background-color: black; */
  /* color: white; */
  background: black;

  /* background-image: url('http://res.cloudinary.com/dxeyfggji/image/upload/v1520428350/San-Francisco-Skyline-2016011246-300px.png'); */

}

.tester{
  display: flex;
  min-width: 100%;
  max-width: 100%;
  object-fit: cover;
  top: 50px;
  position: relative;
  opacity: 0.7;
  height: 700px;
  /*transform: translate;*/

}



.project_name{
  font-size: 30px;
  font-weight: 400;
  /*max-width: 300px;*/

  margin-bottom: 5px;
  padding-bottom: 15px;
  border-bottom: 1px black solid;

}



.logo{
  margin-left: 5px;
}

.down-button, .up-button{
  max-width: 50px;
  max-height: 50px;;
  object-fit: contain;
  /* margin: 20px 0 20px; */
  display: flex;
  /*position: absolute;*/
  font-size: 40px;
  /* max-width: 20%; */
  /* align-self: center; */
  /*top: 90%;*/
  /* top: 725px; */
  justify-content: center;
  /* width: 100%; */
  /* background: white; */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  /* min-width: 50px;
  min-height: 50px; */

}

.button-holder:hover .down-button{
  /* max-height: 45px;
  max-width: 45px; */
  margin:  10px 0 0 0;
}

 .button-holder .up-button:hover{
   margin: 0 0 10px 0;
 }



.down-button:hover, .up-button:hover{
  cursor: pointer;
  /* background: white; */
}

.down-button{
  /* margin: 80px 0; */
}

.linkedin{
  align-self: center;
  display: flex;
  max-width: 100px;
}

.project-description{
  margin-top: 10px;
  padding: 0 10px;
  /* color: #8e8e8e; */
}

.created-with{
  margin-top: 15px;
  padding: 0 10px;
  /* color: #8e8e8e; */
}

.banner-title{
  display: flex;
  font-size: 2.4rem;
  letter-spacing: 0.2rem;
  font-weight: 600;
  align-self: center;
  padding-bottom: 20px;
  box-sizing: border-box;
  border-bottom: 5px white solid;
  line-height: 1.1;
  color: #28292b;
  color: white;
  /* background: -webkit-linear-gradient(left, #28292b, #fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
}

.banner-info{
  margin: 20px 0 20px;
  display: flex;
  /* position: absolute; */
  /* top: 100px; */
  /* top: 500px; */
  /* width: 400px; */
  max-width: 400px;
  text-align: center;
  align-self: center;
  color: white;
  font-size: 18px;
  font-weight: 100;
  font-weight: bold;
  letter-spacing: 3px;
  color: black;
  /* background: #28292b; */
    padding: 20px;
    border-radius: 5px;
    font-weight: lighter;
    /* color: white; */
    letter-spacing: 0.2rem;
    font-size: 1rem;
    /* font-size: 2.625rem; */
    font-weight: 600;
    line-height: 1.1;
    color: white;
    /* color: black; */
    /* background: #28292b; */
    font-weight: 200;
  }

  .b-txt{
    background: -webkit-linear-gradient(left, black, #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }

.project-info {
  width: 30%;
  display: flex;
  flex-direction: column;
  /*margin: 0px 30px;*/
  padding: 20px;
  min-width: 250px;
  font-weight: 100;
  justify-content: center;


}



.project-info{
  /* margin-left: 100px; */
}

.mb-holder{
  display: flex;
  min-width: 320px;
  flex-direction: column;
  align-items: center;
  width: 70%;
}

.macbook{
  display: flex;
  max-width: 100%;
  object-fit: contain;
}
.block-content{
display: flex;
align-self: center;
flex-direction: column;

}

.block-holder{
  position: absolute;
  left: 0;
  right: 0;
  top: 550px;
  min-width: 320px;
  top: 150px;
  top: 300px;

}
.pic{
  /* margin: 20px 0 20px; */
  display: -webkit-inline-box;
  display: flex;
  /*transform: translate(50%,60%);*/

  /* max-width: 300px;
  max-height: 300px;
  min-width: 300px;
  min-height: 300px; */
  width: 200px;
  height: 200px;
  /*object-fit: contain;*/
  object-fit: cover;
  /* -webkit-border-radius: 50%; */

  /*position: absolute;*/
  align-self: center;
  /*top: 1.5rem;*/
  /*right: 40%;*/
  /* position: absolute; */
  /* top: 150px; */
}

.sec{
  position: absolute;
  top: 100px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.sec-content{
  display: flex;
  flex-direction: column;
  align-self: center;
  background: white;
  width: fit-content;
  box-sizing: border-box;
  padding: 30px;
  align-self: center;
  border-radius: 5px;
}

.pic-holder{
  position: absolute;
  background: #28292b;
  top: 200px;
  /* width: 100%; */
  width: 250px;
  border-radius: 50%;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}

.profilepic{
  display: -webkit-inline-box;
  /* border-radius: 50%;
  -webkit-border-radius: 50%; */
  object-fit: cover;
  max-height: 100%;
  max-width: 100%;
  min-width: 100%;
  min-height: 100%;
}

.about-section, .contact-section, .tech-section{
  display: flex;
  min-width: 100%;
  justify-content: center;
  flex-direction: column;
  margin-top: 40px;
  padding-bottom: 30px;

}



.about-section, .contact-section{
  border-bottom: 1px lightgray solid;
}

.technologies{
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
  max-width: 500px;
  align-self: center;

}



.tech-icon{
  display: flex;
  max-width: 100px;
  max-height: 100px;
  object-fit: contain;
  min-width: 100px;
  min-height: 100px;
  border-radius: 50%;
}
.about1, .about2, .contact-info{
  display: flex;
  align-self: center;
  margin: 20px;
  font-weight: 100;
  width: 50%;
  justify-content: center;
  color: black;
}

.about-title{
  display: flex;
  font-size: 30px;
  border-bottom: 1px black solid;
  width: 300px;
  align-self: center;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 40px;
  padding-bottom: 20px;
}

.livelink{
  margin-top: 30px;
  text-decoration: none;
  color: blue;
  padding: 0 10px;

}
.livelink:hover{
  cursor: pointer;
}

.resume-button{
  margin: 20px 0 20px;
  display: flex;
  align-self: center;
  /*position: absolute;*/
  top: 600px;
  font-size: 20px;
  background-color: #28292b;
  width: 200px;
  flex-direction: column;
  justify-content: center;
  /*align-content: center;*/
  color: white;
  text-align: center;
  height: 50px;
  border-radius: 7px;
  text-decoration: none;
  letter-spacing: 0.1rem;
  font-weight: lighter;
  /* background: white; */
  color: black;
  /* font-family: 'Jua', sans-serif; */
  font-weight: 400;
  background: white;
  /* color: #777777; */
  /* border: 1px #777777 solid; */


}

.button-holder{
  width: 70px;
  height: 70px;
  display: flex;
  align-self: center;
  justify-content: center;
  align-items: center;
  margin: 20px 0;

}


.resume-button:hover{
  width: 220px;
  /* height: 55px; */
}



.contact-title, .tech-title{
  display: flex;
font-size: 30px;
border-bottom: 1px black solid;
width: 300px;
align-self: center;
justify-content: center;
margin-top: 30px;
margin-bottom: 40px;
padding-bottom: 20px;
}

.tech-title{
  /* width: 500px; */
  margin-top: 30px;
}

.spacer{
  width: 10px;
}


@media screen and (max-width: 800px){
  .project{
    flex-direction: column;
    padding: 30px 0;
    justify-content: center;
    align-items: flex-start;

  }

  .macbook{
    max-height: 250px;
  }

  #p-flipped{
    flex-direction: column-reverse;
    align-items: flex-end;
    /* margin-right: 100px; */
  }

  #i-flipped{
    align-self: flex-start;
  }
}

@media screen and (min-width: 801px){

  .project{
    flex-direction: row;
    padding: 100px 20px;

  }

}


.project{
  display: flex;
  border-bottom: 1px lightgray solid;
}

a{
  text-decoration: none;
}

.contact-button{
  display: flex;
  box-sizing: border-box;
  font-weight: 400;
  background: #28292b;
  color: white;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 50px;
  align-self: center;
  letter-spacing: 0.1rem;
  font-weight: 400;
}

.contact-button:hover{
  width: 220px;
}