* {
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  background-image: url(bg.svg);
  background-repeat: repeat-y;
  background-size: cover;
  background-color: #131d36;
  background-blend-mode: darken;
}
/* ------------------Navigation Bar--------------- */

.navBar {
  display: flex;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  position: sticky;
  top: 0px;
  cursor: pointer;
  height: 60px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.navLeft {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  max-width: 50%;
  width: 30%;
}
.logo {
  margin-left: 4rem;
  width: 6rem;
}
.navRight {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 70%;
}
.menus {
  display: flex;
  text-decoration: none;
  justify-content: space-evenly;
}
#contact {
  margin-right: 60px;
}
.menus li {
  list-style: none;
}
.menus li a:hover {
  list-style: none;
  padding: 10px 30px;
  color: black;
  background-color: rgb(216, 237, 255);
  box-shadow: 1px 1px 2px black, 0 0 10px rgb(160, 160, 255), 0 0 5px darkblue;
  border-radius: 5px;
}
.menus li a {
  text-decoration: none;
  color: white;
  padding: 10px 30px;
  margin: 10px;
  transition-duration: 500ms;
  transition-timing-function: ease;
}

/* ------------------Home Section---------------- */

.home {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.homeLeft {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
  margin-left: 20vw;
  width: 50%;
  font-family: sigmar;
  color: aliceblue;
}
.homeRight {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  margin-right: 16vw;
  width: 50%;
}
.homeRight img {
  width: 16vw;
}
.head {
  font-size: 4rem;
  margin-left: 0;
  transition-duration: 250ms;
  transition-timing-function: ease-in-out;
}
.desc {
  font-size: 2rem;
  transition-duration: 500ms;
  transition-timing-function: ease-in-out;
}

.head:hover,.desc:hover{
  text-shadow: 2px 7px 5px rgba(0,0,0,0.3), 
    0px -4px 10px rgba(255,255,255,0.3);
}
/* ------------------About Section---------------- */

.about {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #2b5e71;
  height: 100vh;
}
.about h1 {
  font-family: sigmar;
  color: white;
  font-size: 60px;
}
.aboutmecontainer {
  display: flex;
  flex-direction: row-reverse;
}
.aboutmetext {
  display: flex;
  color: white;
  max-width: 50%;
  margin: auto;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-size: large;
  line-height: 2rem;
  transition-duration: 500ms;
  transition-timing-function: ease-in-out;
}
.aboutmetext:hover{
    text-shadow: 2px 7px 5px rgba(0,0,0,0.3), 
      0px -4px 10px rgba(255,255,255,0.3);
}

.aboutmecontainer img {
  max-width: 50%;
  margin: auto;
  width: 30%;
}

/* ------------------Projects Section---------------- */

.projMobile{
  display: none;
}
.projects {
  display: flex;
  flex-direction: column;
  color: white;
  justify-content: center;
  /* align-items: center; */
  height: 120vh;
}
.projects h1 {
  font-family: sigmar;
  color: white;
  font-size: 4rem;
  align-self: center;
}

.firstProject {
  display: flex;
  margin-left: 5%;

  width: 10%;
  border-radius: 5px;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.59, -0.32, 0.41, 1.32);
}

.firstProject div {
  display: flex;
  width: 125px;
  height: 125px;
  border: 2px solid #91b0ff;
  background-color: #91b0ff;
  border-radius: 5px;
  margin-left: 5%;
  padding: 2vw 3vw;
}
.firstProject div h2 {
    margin: auto;
    font-family: sigmar;
    font-weight: 50;
    font-size: 20px;
    text-shadow: 2px 7px 5px rgba(0,0,0,0.3), 
      0px -4px 10px rgba(255,255,255,0.3);
}
.firstProject p {
  margin: auto;
}

.firstProject:hover {
  width: 90%;
  background-color: #91b0ff;
}

.secondProject {
  display: flex;
  margin-left: 5%;
  margin: 5%;
  width: 10%;
  border-radius: 5px;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.59, -0.32, 0.41, 1.32);
}
.prog_names {
  overflow: hidden;
  /* position: relative; */
  margin-left: 5%;
  white-space: nowrap;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

}

.secondProject div {
  display: flex;
  width: 125px;
  height: 125px;
  border: 2px solid #91b0ff;
  background-color: #91b0ff;
  border-radius: 5px;
align-items: center;
  margin-left: 5%;
  padding: 2vw;
}
.secondProject div h2 {
  margin: auto;
  font-family: sigmar;
  font-weight: 50;
  font-size: 20px;
  text-shadow: 2px 7px 5px rgba(0,0,0,0.3), 
    0px -4px 10px rgba(255,255,255,0.3);

}
.secondProject p {
  margin: auto;
}

.secondProject:hover {
  width: 90%;
  background-color: #91b0ff;
}

.thirdProject {
  display: flex;
  margin-left: 5%;
  width: 10%;
  border-radius: 5px;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.59, -0.32, 0.41, 1.32);
}

.thirdProject div {
  display: flex;
  width: 125px;
  height: 125px;
  border: 2px solid #91b0ff;
  background-color: #91b0ff;
  border-radius: 5px;
  margin-left: 5%;
  padding: 2vw 4vw;
}
.thirdProject div h2 {
    margin: auto;
    font-family: sigmar;
    font-weight: 50;
    font-size: 20px;
    text-shadow: 2px 7px 5px rgba(0,0,0,0.3), 
      0px -4px 10px rgba(255,255,255,0.3);
}
.thirdProject p {
  margin: auto;
}

.thirdProject:hover {
  width: 90%;
  background-color: #91b0ff;
}

/* ------------------Contact Section---------------- */

input{
  text-align: center;
}
.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80vh;
  background-color: rgb(15, 21, 43);
}
.contact h1 {
  font-family: sigmar;
  font-size: 60px;
  color: aliceblue;
  max-height: 20%;
  margin: auto;
}
.contactForm {
  max-width: 80%;
  display: flex;
  flex-direction: column;
  margin: auto;
  color: white;
}
.nameAndEmail {
  margin: auto;
}
.name,
.email {
  padding: 8px 36px;
  background-color: #303d60;
  border: 1px solid #06102a;
  color: rgb(255, 255, 255);
  border-radius: 10px;
  width: 210px;
  /* margin: 10px 20px; */
}
#name {
  margin-right: 1rem;
}
/* #email {
  margin-right: 1rem;
} */
#details {
  margin: 10px 0px;
  background-color: #303d60;
  border: 3px solid #162241;
  color: aliceblue;
  border-radius: 10px;
  width: 100%;
height: 12rem;
}

.submitbutton {
  width: 12%;
}
.btn {
    margin: auto;
    margin-bottom: 20px;
  padding: 10px 20px;
  border-radius: 30px;
  background-color: #ffffff;
  border: 0px;
  font-family: roboto;
  font-weight: 01000;
  transition-duration: 500ms;
  transition-timing-function: ease;
}
.btn:hover {
  background-color: #91b0ff;
  transform: translateY(-5px);
  box-shadow: rgba(108, 123, 255, 0.25) 0px 6px 12px -2px,
    rgba(116, 153, 255, 0.3) 0px 3px 7px -3px;
}

/* ------------------Footer Section---------------- */

.footer {
  display: flex;
  flex-direction: column;
  height: auto;
  justify-content: center;
  align-items: center;
}

.footer p{
  color: white;
  margin-top: 10px;
  font-size: 20px;
}
.social-media-container{
  margin: 10px;
}
.fa-heart{
  font-size: 26px;
  animation-name: heart-color;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
  animation-fill-mode: both;
  
}
@keyframes heart-color {
  0%,100%{
    color: #91b0ff;
  }
  50%{
    color: red;
  }
  
}

.fa-twitter,.fa-envelope,.fa-instagram,.fa-github,.fa-bars,.fa-xmark{
  color: #91b0ff;
  font-size: 30px;
  margin: 0 20px;
  padding: 10px;
  border-radius: 10px;
  transition-duration: 500ms;
  transition-timing-function: ease-in-out;
}
#hamburger,#cancel,#check{
  display: none;
}

.fa-twitter:hover,.fa-envelope:hover,.fa-instagram:hover,.fa-github:hover,.fa-bars:hover,.fa-xmark:hover{
  background-color: #91b0ff;
  box-shadow: rgba(108, 123, 255, 0.25) 0px 6px 12px -2px,
  rgba(116, 153, 255, 0.3) 0px 3px 7px -3px;
  color: #131d36;
}


/*------------------------------------------------------------- */
/*------------------------ Media Query II --------------------- */
/*------------------------------------------------------------- */@media (min-width : 481px) and (max-width : 768px){
    .navBar{
      flex-direction: column;
      height: 8rem;
    }
    
    .menus{
      top: 0;
      justify-content: space-evenly;
      align-items: center;
      margin: 1rem auto;
      left: -100%;
      
    }
    .navRight{
      width: 100vw;
    }
    .navLeft{
      justify-content: center;
      align-items: center;
      width: 100vw;
      margin: 0rem;
    }
    .logo {
      margin: auto;
      width: 6rem;
    }
    .menus li{
      
      margin: -1.5rem;
      padding: -0.5rem;
    }
    #contact{
      margin-right: auto;
    }
    
    
/*--------------- Home Section ----------- */

.home {
  flex-direction: column;
  justify-content: flex-start;
}
.homeRight img {
  width: 50vw;
}
.homeLeft {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  height: 50%;
  width: 80vw;
}
.homeRight {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width:80vw;
  margin-top: -2rem;
  margin-left: auto;
  margin-right: auto;
} 
.homeRight img {
  width: 30vw;
}
.head {
  font-size: 2.5rem;
  margin-left: 0;
  text-align: center;
}
.desc {
  font-size: 1.5rem;
  text-align: center;
}

/*--------------- Projects Section ----------- */

.projWeb{
  display: none;
}
.projects {
  
  justify-content: flex-start;
  
}
.projects h1 {

  font-size: 3.6rem;
  text-align: center;
  margin: 10rem auto;
}

.projMobile{
  display: inline;
  overflow: hidden;
  position: relative;
      white-space: nowrap;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
      font-size: .5rem;
      line-height: 1rem;
      margin: auto;
    }
    
    /* ------------------About Section---------------- */
    .about{
      height : 150vh;
    }
    .about h1 {
      font-size: 4rem;
      margin: 8rem auto 0 auto;
    }
    .aboutmecontainer {
      flex-direction: column-reverse;
      justify-content: center;
      align-items: center;
      margin: auto;
    }
    .aboutmetext {
      justify-content: center;
      align-items: center;
      text-align: center;
      margin: auto;
      padding-bottom: 2rem;
      font-size: 1rem;
    }
    .aboutmecontainer img {
      max-width: 75%;
      margin: auto;
      margin-bottom: 2rem;
      width: 50%;
    }
    .projects {
      height: 150vh;
    }

    /* ------------------Contact Section---------------- */

    .nameAndEmail {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: auto;
    }
    #name,#email{
      margin: auto;
    }
  }
/*-------------------------------------------------------------*/
/*------------------------ Media Query II ---------------------*/
/*-------------------------------------------------------------*/

  @media (max-width : 481px ) {
    /* *{
      align-items: center;
      justify-content: center;
    } */

    /* ------------------ Nav Bar ------------------ */
    .navBar{
      flex-direction: column;
      height: 8rem;
    }
    
    .menus{
      top: 0;
      justify-content: space-evenly;
      align-items: center;
      margin: 1rem auto;
      left: -100%;
      
    }
    .navRight{
      width: 100vw;
    }
    .navLeft{
      justify-content: center;
      align-items: center;
      width: 100vw;
      margin: 0rem;
    }
    .logo {
      margin: auto;
      width: 6rem;
    }
    .menus{
      justify-content: center;
      align-items: center;
    }
    .menus li{
      
      display: flex;
      margin: -1.5rem;
      padding: -0.5rem;
      font-size: 1rem;
    }
    .menus li a{
      font-size: 0.75rem;
      width: 1.5rem;
    }
    #contact{
      margin-right: auto;
    }
    
    
/*--------------- Home Section ----------- */

.home {
  flex-direction: column;
  justify-content: flex-start;
}
.homeRight img {
  width: 50vw;
}
.homeLeft {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  height: 50%;
  width: 80vw;
}
.homeRight {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width:80vw;
  margin-top: -2rem;
  margin-left: auto;
  margin-right: auto;
} 

.head {
  font-size: 2rem;
  margin-left: 0;
  text-align: center;
}
.desc {
  font-size: 1rem;
  text-align: center;
}

/*--------------- Projects Section ----------- */

.projWeb{
  display: none;
}
.projects {
  
  /* justify-content: flex-start; */
  height: 110vh;
  
}
.projects h1 {

  font-size: 2rem;
  text-align: center;
  margin: 4rem auto;
}

.projMobile{
  display: inline;
  overflow: hidden;
  position: relative;
      white-space: nowrap;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
      font-size: .5rem;
      line-height: 1rem;
      margin: auto;
    }
    
    /* ------------------About Section---------------- */
    .about{
      height : 150vh;
    }
    .about h1 {
      font-size: 2rem;
    margin: 4rem auto 0 auto;
    }
    .aboutmecontainer {
      flex-direction: column-reverse;
      justify-content: center;
      align-items: center;
      margin: auto;
    }
    .aboutmetext {
      justify-content: center;
      align-items: center;
      text-align: center;
      /* margin: auto; */
      padding-bottom: 2rem;
      font-size: 1rem;
    }
    .aboutmecontainer img {
      max-width: 75%;
      margin: auto;
      margin-bottom: 2rem;
      width: 50%;
    }
    .projects {
      height: 150vh;
    }

    /* ------------------Contact Section---------------- */
    .contact h1{
      font-size: 2rem;
    }
    .nameAndEmail {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: auto;
    }
    #name,#email{
      margin: auto;
      width: 50vw;
      
    }
    
    /* ------------------Footer Section---------------- */
    .fa-twitter, .fa-envelope, .fa-instagram, .fa-github, .fa-bars, .fa-xmark {
      color: #91b0ff;
      font-size: 1.5rem;
      margin: 0 0.25rem;
      padding: 10px;
      border-radius: 10px;
      transition-duration: 500ms;
      transition-timing-function: ease-in-out;
  }
  }