/* -------------------fonts import------------------- */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;500;600;800&display=swap');

/* -------------------color variables------------------- */

:root {
  --blue: rgb(35, 0, 193);
  --onyx: rgb(36, 39, 46);
  --light-purple: rgba(169, 168, 255, 0.651)
  --purple: rgb(77, 0, 193);
  --white: rgb(255, 255, 255);
  --mid-grey: #5a6272ff;
  --red: rgb(219 1 119);
}

/* -------------------default font style------------------- */

html{
  font-family: 'Montserrat', sans-serif;
  color: var(--onyx);
}


/* -------------------Background color------------------- */

body{
  color:var(--onyx);
  width: 100%;
  background: linear-gradient(rgb(255, 255, 255) ,rgb(232, 236, 255), rgb(250 249 255), rgb(207 213 255), rgb(210 235 255), rgb(179, 223, 253) );
}





/* -------------------Text styles------------------- */

h1 {
  font-size: 30px;
  margin-block-start: 0.10em;
  margin-block-end: 0.10em;
  font-weight: 600;
}

h2 {
  font-size: 24px;
}

p {
  color:var(--h4);
  font-family: 'Montserrat', sans-serif;
  font-size: large;
}

a{
  font-size: 20px;
  color: var(--onyx);
  text-decoration: none;
  font-weight: 600;
}
/* -------------------Text Decoration------------------- */

.red-underline{
  width: 200px;
  border-bottom: solid 5px var(--red);
  margin-bottom: 20px;
}
 
.blue-underline{
  width: 200px;
  border-bottom: solid 5px var(--blue);
  margin-bottom: 20px;
}
  /* -------------------Image Styles------------------- */

nav{
  color: var(--onyx);
  display: flexbox;
  flex-direction: row;
  justify-content: flex-end;
}
 
img{
  width:100%;
 }

/* -------------------Header style------------------- */
 
nav{
  color: var(--onyx);
  display: flexbox;
  flex-direction: row;
  justify-content: flex-end;
 
 }
 
.nav-bar{
  height: 40px;
  padding:15px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  border-bottom: #b7b7b7;
}

.nav-item{
  font-size: 16px;
  padding-right: 10px;
  text-decoration: none;
  color: var(--onyx);
}


.menu{
  margin-right: 10px;
}


/* -------------------Description Section------------------- */

.description {
background-color:transparent;
display: flex;
flex-direction: column;
align-items: center;
padding:20px;
}

.description p, .description div{
  padding-bottom: 20px;
}

.socials{
  width:70%;
  display: flex;
  justify-content: space-around;
  /* margin-left: 60px; */
}

.social{
  width:30px;
  height:30px;
  }


/* -------------------About Me Section------------------- */
.about-me {
  background-color: rgb(255, 255, 255);
  padding: 20px;
}


.language{
  height: 40px;
  width: 40px;
  text-decoration: none;
  padding-left: 20px;
  padding-right: 20px;
  
  }

/* -------------------Programming Languages------------------- */

#programming-languages-1{
  display: flex;
  justify-content: space-evenly;
  padding-bottom: 20px;
  }
  
  #programming-languages-2{
    display: flex;
    justify-content: space-evenly;
    padding-bottom: 20px;
    }


/* -------------------Projects------------------- */
#project-section{
  padding:20px;
}


#projects{
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background-color:var(--blue); */

}

.project{
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.903);
  font-family: 'Montserrat', sans-serif;
  width: 300px;
  height: 200px;
  border-radius: 1rem;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  margin-bottom: 20px;
  margin-top: 20px;

}

.project-img{
  margin-top:20px;
  height: 70%;
}

.form-section{
  background-color: var(--white);
  padding: 30px;
}

#form {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: rgba(128, 143, 255, 0.651);
  align-self: center;
  max-width: 100%;
  border-radius: 6px;
  margin-bottom: 20px;
}


.input {
padding: 10px;
border: 2px solid #fff;
border-radius: 6px;
background-color: #fff;
font-size: 0.8rem;
text-decoration: none;
color: #000;
margin: 10px;
min-width: 200px;
margin-bottom: 20px;
}

.form-section
{
display: flex;
flex-direction: column;
align-items: center; 

}

/* Button Style */

.button, #submit{
  text-decoration: none;
  background:  var(--red);
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  border: 0px;
  font-weight: 600;
  display: block;
  color: white;
  width: 12rem;
  height: 3rem;
  border-radius: 1rem;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-align: center;
  transition: .3s ease;
  margin-bottom: 10px;
  margin-top: 10px;
}

#form-button{
display:flex;
justify-content: center;
}

.button:hover, #submit:hover {
  background-color: var(--blue); 
}

.button:focus, #submit:focus {
  border: solid 2px var(--blue);
}

/* FOOTER */


footer{
  height: 80px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  background-color: var(--blue); 
}


body {
	/* background: linear-gradient( rgb(139, 222, 255) 50%, rgb(162, 244, 213) 50%); */
  margin: 0px;
}


@media (min-width: 900px) {

  h1 {
    font-size: 40px;
  }

  p{
    font-size: 20px;  
  }

  .nav-bar{
    height: 100px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    
  }

  .menu{
  width: 500px;
  }

  .socials{
    height: auto;
    width: 70%;
    display: flex;
    justify-content: space-around;
    /* margin-left: 60px; */
  }


  #projects{
      display: flex;
      flex-direction: row;
      justify-content: space-around
    }


  .project{
    margin-top: 0px;
    margin-bottom: 30px;
  }

    .socials{
      display: flex;
      justify-content: space-around;
      /* margin-left: 60px; */
    }

    .social{
      width:40px;
      height:40px;
      
      }

    .description{
      justify-content: space-evenly;
      margin: 30px;
      margin-top: 60px;
      margin-bottom: 80px;
  
    }

    #main-1{
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-evenly;
    }

    #profile-photo {
      max-width: 40%;
    }

     .nav-item{
      font-size: 20px;
      padding-left: 60px;
      padding-right: 10px;
    }


    .language{
      margin-top: 20px;
    }

    .form{
      width: 400px;
    }

    footer{
      height: 100px;
  
    }

    #project1-photo{
      max-width: 40%;
    }
  
 }