/* # Name: Vraj Chauhan
# StudentID: 0827768
# Date: 18/03/2024
# Brief Description: This is the main.css of the website. It contains the style of home page. */

 @import url(reset.css);
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

 :root {
     --primary-color: #f26a2e;
     --secondary-color: #f4f4f4;
     --white-color: #fff;
     --dark-color: #282828;
     --light-color: #f7f7f7;
     --black-color: #333;
 }


 body {
     font-family: 'Poppins', sans-serif;
     color: var(--secondary-color);
     background-color: var(--dark-color);
 }

 nav {
     background-color: var(--black-color);
     list-style: none;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 2rem 10em;
     height: 2em;
 }

 ul {
     display: flex;
     justify-content: space-around;
     align-items: center;
     gap: 2rem;
 }

 nav ul li a {
     color: var(--white-color);
     text-decoration: none;
     transition: color 0.3s, transform 0.3s;


 }

 .left-icon {
     color: var(--primary-color);
     padding-right: 0.5em;
     font-size: 2em;
     cursor: pointer;
 }

 ul a {
     color: var(--white-color);
     text-decoration: none;
     font-size: 1.2rem;
     font-weight: 500;
 }

 ul a:hover {
     color: var(--primary-color);
     font-size: 1.3em;
     color: var(--primary-color);
     transform: translateY(-3px);
 }

 em {
     color: var(--primary-color);
 }

 h1:first-of-type {
     position: relative;
 }

 .waving {
     display: inline-block;
     animation: wave-animation 2s infinite;
 }

 @keyframes wave-animation {

     0%,
     100% {
         transform: rotate(0deg);
     }

     10%,
     30%,
     50%,
     70%,
     90% {
         transform: rotate(-10deg);
     }

     20%,
     40%,
     60%,
     80% {
         transform: rotate(10deg);
     }
 }

 .welcome {
     margin-top: 5em;
     display: flex;
     justify-content: space-around;
     align-items: center;
     padding: 2em;
     margin-bottom: 5em;
 }

 h1 {
     font-size: 2.5rem;
     font-weight: 700;
     color: var(--black-color);
     padding: 1rem;
     background-color: #f4f4f4;
     border-radius: 1em;
     text-align: center;
     margin: 1em 0;
     box-shadow: 0px 0px 1.5em var(--primary-color);

 }

 .welcome h2 {
     font-size: 2rem;
     font-weight: 500;
     padding: 0.5rem 0;
 }

 .welcome h2:last-of-type {
     padding-bottom: 1em;
 }

 .welcome p {
     font-size: 1.5rem;
     font-weight: 300;
     color: var(--secondary-color);
     padding: 0.5rem 0;
 }

 .right-welcome {
     background-color: var(--primary-color);
     width: 30em;
     padding: 2em;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     box-shadow: 0px 0px 2em var(--primary-color);

 }

 .right-welcome img {
     padding: 2em 0;
     padding-bottom: 0;
     border-radius: 30%;

 }

 .icons {
     display: flex;
     justify-content: flex-start;
     gap: 1rem;
     padding: 2rem 0em;
 }

 .icons .fa-linkedin {
     background-color: var(--black-color);
     color: white;
     padding: 1em 1em;
     border-radius: 4em;
 }

 .icons .fa-x-twitter {
     background-color: var(--black-color);
     color: white;
     padding: 1em 1em;
     border-radius: 4em;
 }

 .icons .fa-github {
     background-color: var(--black-color);
     color: white;
     padding: 1em 1em;
     border-radius: 4em;
 }

 .icons .fab:hover {
     background-color: var(--primary-color);
 }

 .about {
     display: flex;
     align-items: center;
     flex-direction: column;
 }

 .about p {
     max-width: 45em;
     font-size: 1.5rem;
     font-weight: 300;
     color: var(--secondary-color);
     padding: 1em;
     margin: 1em 0;
     line-height: 1.5;
     background-color: var(--black-color);
     border-radius: 1em;
     margin-right: 1em;
     text-align: justify;

 }

 .about h2 {
     font-size: 2rem;
     font-weight: 500;
     padding: 1rem 0;

 }

 .techStack {
     display: flex;
     justify-content: space-around;
     align-items: center;
     flex-direction: column;
     margin: 2em 0;
 }

 .techStack-icons {
     max-width: fit-content;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1rem;
     font-size: 4em;
 }

 .techStack-icons .fab {
     padding: 0.5em;
 }

 .techStack-icons i {
     animation: pulse-animation 1s infinite alternate;
 }

 @keyframes pulse-animation {
     from {
         transform: scale(1);
     }

     to {
         transform: scale(1.1);
     }
 }

 .Projects {
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 4rem 0;
 }

 .Projects h1 {
     font-size: 2.5rem;
     font-weight: 700;
     color: var(--black-color);
     margin-bottom: 2rem;
 }

 .project {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 4rem;
 }

 .project-image {
     flex: 0 0 200px;
     margin-right: 2rem;
 }

 .project-image img {
     width: 100%;
     border-radius: 0.5rem;
 }

 .project-description {
     flex: 1;
 }

 .project-description h2 {
     font-size: 1.8rem;
     font-weight: 600;
     color: var(--primary-color);
     margin-bottom: 1rem;
 }

 .project-description p {
     font-size: 1.4rem;
     font-weight: 400;
     color: var(--secondary-color);
     margin-bottom: 1rem;
 }

 .project-description ul {
     margin-bottom: 1rem;
 }

 .project-description ul li {
     font-size: 1.4rem;
     font-weight: 400;
     color: var(--secondary-color);
     margin-bottom: 0.5rem;
 }

 .project-description a {
     display: inline-block;
     padding: 1rem 2rem;
     border-radius: 1rem;
     background-color: var(--primary-color);
     color: var(--white-color);
     font-size: 1.4rem;
     font-weight: 500;
     text-decoration: none;
     transition: background-color 0.3s;
 }

 .project-description a:hover {
     background-color: rgb(255, 208, 165);
 }

 .contact {
     display: flex;
     justify-content: space-around;
     align-items: center;
     flex-direction: column;
 }

 form {
     display: flex;
     justify-content: space-around;
     align-items: center;
     flex-direction: column;
     gap: 1rem;
     background-color: var(--black-color);
     padding: 3em;
     border-radius: 1em;
 }

 form input {
     padding: 1em;
     border-radius: 1em;
     border: none;
     background-color: var(--secondary-color);
     color: var(--black-color);
     font-size: 1.2rem;
     font-weight: 500;
 }

 form input::placeholder {
     font-size: 1.2rem;
 }

 form textarea {
     padding: 1em;
     border-radius: 1em;
     border: none;
     background-color: var(--secondary-color);
     color: var(--black-color);
     font-size: 1.2rem;
     font-weight: 500;
     font-family: 'Poppins', sans-serif;
 }

 form textarea::placeholder {
     font-size: 1.2rem;
 }

 form button {
     padding: 1em 2em;
     border-radius: 1em;
     border: none;
     background-color: var(--primary-color);
     color: var(--white-color);
     font-size: 1.2rem;
     font-weight: 500;
     cursor: pointer;
 }

 form button:hover {
     background-color: rgb(255, 208, 165);
     color: var(--primary-color);
 }

 footer {
     margin-top: 3rem;
     display: flex;
     justify-content: space-around;
     align-items: center;
     background-color: var(--black-color);
     padding: 2em;
     color: var(--white-color);
     font-size: 1.2rem;
     font-weight: 500;
 }


 /* Responsive */
 @media (max-width: 768px) {
     nav {
         padding: 2rem 2em;
     }

     .welcome {
         flex-direction: column;
         padding: 2em;
     }

     .right-welcome {
         width: 20em;
     }

     .icons {
         padding: 2rem 0em;
     }

     .about {
         padding: 2em;
     }

     .about p {
         max-width: 100%;
     }

     .techStack {
         padding: 2em;
     }

     .techStack-icons {
         max-width: 100%;
     }

     .contact {
         padding: 2em;
     }

     form {
         padding: 2em;
     }

     footer {
         padding: 2em;
     }
 }