:root {
    --variable-name: value;
  }

  
  selector {
    property: var(--variable-name);
  }

  *{
    font-family: Arial, Helvetica, sans-serif;
  }

/* Variables */
 :root {
  --font-family: "Roboto", sans-serf;
  --normal-font: 400;
  --bold-font: 700;
  --bolder-font: 900;
  --bg-color: #fcfcfc;
  --primary-color: #4756df;
  --secondary-color: #ff7235;
  --primary-shadow: #8b8eaf;
  --secondary-shadow: #5092e7e3;
  --bottom-margin: 0.5rem;
  --bottom-margin-2: 1rem;
  --line-height: 1.7rem;
  --transition: 0.3s;
  }
/* Variables end */

 html {
  scroll-behavior: smooth;
 }

/* CSS Resets */
 /* {
  margin: 0;
  padding: 0;
  
  
 } */

 ul {
  list-style-type: none;
 }

 a {
  text-decoration: none;
  color: var(--primary-color);
 }

 a:hover {
  color: var(--secondary-color);
 }

 body {
  font-family: var(--font-family);
  background-image: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fstatic.vecteezy.com%2Fsystem%2Fresources%2Fpreviews%2F011%2F127%2F621%2Flarge_2x%2Fbeautiful-sea-waves-and-white-sand-beach-in-the-tropical-island-soft-waves-of-blue-ocean-on-sandy-beach-background-from-top-view-from-drones-concept-of-relaxation-and-travel-on-vacation-free-photo.jpg&f=1&nofb=1&ipt=81578c9983a93baf43a1cebffae8db60a5b335b2bade8c66bf5b3fe33f43b479");
  background-repeat: no-repeat;
  background-size:cover;
 }

 nav {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 3.5rem;
    background-color: rgba(195, 220, 243, 0.7);
    backdrop-filter: blur(5px);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
    border-radius: 10%;
    width: 70rem;
    margin: auto;
  }
  
  nav h1 {
    color: var(--primary-color);
  }
  
  nav a {
    color: var(--primary-color);
    transition: var(--transition);
  }
  nav a:hover {
    color: var(--secondary-color);
    border-bottom: 2px solid var(--secondary-color);
  }
  
  nav ul {
    display: flex;
    gap: 1.9rem;
  }
  
  nav ul li {
    font-weight: var(--bold-font);
  }

  .burger-menu {
    color: var(--primary-color);
    font-size: 2rem;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    display: none;
    
  }

  .hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    max-width: 68.75rem;
    max-height: 40 rem ;
    height:40 rem;
    margin: auto;
  }

  .hero-img {
    margin-top: 2rem;
    height: 25.5rem;
    width: 40.5rem;
    border-radius: 10%;
  }
  
  .bio {
    width: 25rem;
    padding: 0.625rem;
    border-radius: 4%;
    box-shadow: 0px 2px 15px 2px var(--primary-shadow);
    margin:10rem;
    background-color: rgba(195, 220, 243, 0.7);
    backdrop-filter: blur(5px)
  }
  
  .bio h1 {
    margin-bottom: var(--bottom-margin);
  }
  
  

  .more-about {
    background-color: rgba(173, 207, 240, 0.7);
    backdrop-filter: blur(5px);
    padding: 10rem 6rem;
    max-width: 50.75rem;
    text-align: center;
    margin: 10rem;
    border-radius: 10%;

  }
  
  .more-about h2 {
    margin-bottom: var(--bottom-margin);
    text-align: center;
    

  }
  
  .more-about p {
    line-height: var(--line-height);
    padding: 0.4rem;
  }

  .skills {
    max-width: 50.75rem;
    margin: auto;
    text-align: center;
    margin-top: 2.5rem;
  }
  
  .skill-header {
    margin-bottom: 1rem;
  }
  
  .skills-wrapper img {
    padding: 1.25rem;
  }
  
  .icon {
    width: 7.875rem;
    height: 7.25rem;
  }

  
  .icon-card {
    background-color: #cbdee6;
    border-radius: 11px;
    box-shadow: 0 3px 10px var(--secondary-shadow);
    padding: 20px;
    margin: 10px;
  }

  .projects {
    
    padding: 32px 0;
    margin-top: 2rem;
    
    
  }
  
  .project-pic {
    width: 65%;
    height: 60%;
    
  }
  
  .projects-container {
    display: flex;
    align-items: center;
    justify-content: center;
    
    
  }
  
  .projects-title {
    text-align: center;
    margin-bottom: 1rem;
    
  }
  
  .project-container {
    text-align: center;
    width: 21.875rem;
    padding: 1rem;
    background-color: #cbdee6;
  }
  
  .project-container p {
    padding: 0.4rem;
  }
  
  .project-title {
    margin-bottom: var(--bottom-margin);
  }
  
  .project-details {
    margin-bottom: var(--bottom-margin);
  }
  
  .project-card {
   
    border-radius: 11px;
    box-shadow: 0 3px 10px var(--primary-shadow);
    padding: 20px;
    margin: 10px;
  }

  
  .contact {
    margin-top: 2rem;
  }
  
  .contact h2 {
    text-align: center;
    margin-bottom: var(--bottom-margin-2);
  }
  
  
  
  .socials {
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 1%;
    bottom: 50%;
  }
  
  .socicon {
    width: 2rem;
    height: 2rem;
  }
  
  

  .scroll-up {
    position: fixed;
    right: 0.5%;
    bottom: 3%;
    cursor: pointer;
  }
  
  .up-arrow {
    width: 3rem;
    height: 3rem;
  }

  footer {
   
    padding: 1.25rem;
    text-align:center;
    margin: 2rem 0 0;
  }

  @media screen and (max-width: 720px) {
    /*changes reflects on screen with a width of 720px and below*/
  
  
   nav {
    padding: 1.5rem 1rem;
   }

   nav ul {
    position: fixed;
    background-color: var(--bg-color);
    flex-direction: column;
    top: 86px;
    left: 10%;
    width: 80%;
    text-align: center;
    transform: translateX(120%);
    transition: transform 0.5s ease-in;
   }

   nav ul li {
    margin: 8px;
   }

   .burger-menu {
    display: block;
   }

   nav ul.show {
    transform: translateX(0);
   }

   .hero {
    margin-top: -4rem;
    flex-direction: column;
    gap: 0;
   }

   .hero-img {
        margin-top: 5rem;
        height: 37.5rem;
        width: 30rem;
    }

   .bio {
    margin-top: 1rem;
    width: 20.5rem;
   }


   .more-about {
    margin-top: 3rem;
    padding: 1rem 3.5rem;
   }

   .more-about h2 {
    text-align: center;
   }

   
  

   .icon {
    width: 5.875rem;
    height: 5.25rem;
   }

   .projects-container {
    flex-direction: column;
   }

   .project-container {
    width: 20.875rem;
   }
   .contact-form-container {
    max-width: 23.75rem;
   }
 }


  @media screen and (max-width: 420px) {
    .hero img {
      height: 37.5rem;
      width: 23rem;
    }
  
    .bio {
      width: 18.3rem;
    }
  
    .project-container {
      width: 17.875rem;
    }
  
    .contact-form-container {
      max-width: 17.75rem;
    }
  }